Jump to content
  • Advertisement
Sign in to follow this  
Ekim_Gram

[web] This is why I hate the browser wars (CSS troubles)

This topic is 4866 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Alright, to start off I'm making a website for a band. They're all great friends of mine and have seen the work I've done for my band (Link) So this morning I have a few minutes to start things off. It's been a while since I've done any website work so I'm a bit rusty, but I made sure everything is validated. Link Go there and look at the site in IE first. Looks good right? Everything is how I wanted it to be (aside from the sloppy programming and un-needed lines that I've got to clean up). Now look at it in FireFox/Mozilla. See the difference? What could be causing this? index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>One Fight Later</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
<body>
	<h1 class="logo">ONE FIGHT LATER</h1>
	
	<div id="navbar">
		<ul class="nav">
			<li><a href="index.html">HOME</a></li>
			<li><a href="index.html">BIOS</a></li>
			<li><a href="index.html">LINKS</a></li>
			<li><a href="index.html">MEDIA</a></li>
			<li><a href="index.html">SHOWS</a></li>
		</ul>
	</div>
	
</body>
</html>


style.css
body
{
	background-color: #111;
}

h1.logo
{
	color: #FFF;
	text-align: center;
}

li a
{
	display: block;
	width: 2em;
	font-size: .8em;
	padding: .2em;
	color: #CCC;
	text-decoration: none;
}

li a:hover
{
	background-color: #222;
	color: #FFF;
	text-decoration: none;
}

ul.nav
{
	list-style: none;
	margin: .2em;
}
	
#navbar
{
	position: absolute;
	top: 10px;
	left: 2px;
	border-color: #333;
	border-style: solid;
	border-width: 1px;
	color: #CCC;
}


(EDIT: fixed your link, which wasn't terminated with a quote... good work, web master :P -- Kylotan) [Edited by - Kylotan on June 19, 2005 7:56:40 PM]

Share this post


Link to post
Share on other sites
Advertisement
Lose one of these two lines:
display: block;
width: 2em;

And you'll be ok.

The problem is that you tell the browser to expect a 2em block - so the enclosing block resizes appropriately. Then you include text which is wider than 2ems, so it flows over the edge of the expected limit. I suggest just removing the width line and letting it find its own size.

Share this post


Link to post
Share on other sites
Oh, and don't forget to do a full refresh (Ctrl+F5) in Firefox when testing, it can sometimes be a bit reluctant to give up the cached stylesheet.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!