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

Started by
1 comment, last by benryves 18 years, 10 months ago
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]
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.
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.

[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]

This topic is closed to new replies.

Advertisement