Hello all,
I have ALWAYS used tables to design web pages, and I'm finally trying to break into the more "complicated" world of CSS. I've done a number of online tutorials and feel like I've learned quite a bit, but I'm obviously a total newbie. I've written the following CSS for a friend's website, and it looks fantastic in IE but fails in FF. I know that means something's wrong with my CSS, as FF is very strict in rendering pages just as they're described. I've validated both my HTML and CSS at W3C and it comes up clean, so I'm obviously just not understanding some basic principle.
First, here's the url: http://www.mightymichaelis.com/rmv/
Now, there are a number of issues with it that I'm still trying to work out, but the one that's really irking me that I'd like some advice on is the navigation bar. You'll note that in IE it displays in the center of the navigation container's background image, but in FF it hangs out on the left side. Why is that? What am I misunderstanding?
Here's the CSS:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #000;
}
#container
{
width: 800px;
background-image: url(background.gif);
background-repeat: repeat-y;
background-position: center;
}
#navcontainer
{
width: 800px;
height: 39px;
background-image: url(navbar.gif);
position: relative;
}
#nav {
margin-top: 2px;
padding: 0;
height: 31px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav span {
display: none;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
display: block;
padding: 31px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:31px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -31px;
}
#nav a:active, #nav a.selected {
background-position: 0 -62px;
}
#thome a {
width: 85px;
background: url(home.gif) top left no-repeat;
}
#tabout a {
width: 93px;
background: url(about.gif) top left no-repeat;
}
#tservices a {
width: 114px;
background: url(services.gif) top left no-repeat;
}
#tequipment a {
width: 120px;
background: url(equipment.gif) top left no-repeat;
}
#tcontact a {
width: 96px;
background: url(contact.gif) top left no-repeat;
}
#contents
{
margin: 10px;
padding: 20px;
width: 500px;
text-align: left;
}
#footer
{
margin: 0;
padding: 0;
}
And here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center>
<div id="container">
<div id="header">
<img src="./header.jpg" alt="Rolla Works Vending">
</div>
<div id="navcontainer">
<ul id="nav">
<li id="thome"><a href="/" class="selected"><span>Home</span></a></li>
<li id="tabout"><a href="#"><span>About</span></a></li>
<li id="tservices"><a href="#"><span>Services</span></a></li>
<li id="tequipment"><a href="#"><span>Equipment</span></a></li>
<li id="tcontact"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<div id="menu"></div>
<div id="contents">
This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.This is the text in the container.
</div>
</div>
<div id="footer">
<img src="./footer.gif" alt="Rolla Works Vending">
</div>
</center>
</body>
</html>
Any help will be appreciated! Thank you!
Full Version: NavBar drifts left in FF, looks good in IE
'text-align: center' centers inline content, not block level elements. Except in IE in Quirks Mode. Change to a doctype that triggers Standards Mode (AKA Strict Mode) and the menu won't be centered in IE either. You can read all about rendering modes and switching between them here.
http://hsivonen.iki.fi/doctype/
And here you can read about centering blocks.
http://css-discuss.incutio.com/?page=CenteringBlockElement
http://www.w3.org/Style/Examples/007/center.html
http://hsivonen.iki.fi/doctype/
And here you can read about centering blocks.
http://css-discuss.incutio.com/?page=CenteringBlockElement
http://www.w3.org/Style/Examples/007/center.html
Thank you for your help, but now I'm more confused then before. The only place I used 'text align=center' was in the body. I removed that, and my page still renders as it did before. I've already tried centering the #nav element by setting right and left margins to auto, but that didn't help. I'm still completely befuddled. Apparently something else is causing the menu to drift left in FF. All my attempts to define a position in the #nav element don't show up in FF, but only in IE and probably because I'm doing something really obviously wrong.
The layout looks centered to me in Opera, Firefox, and Safari. I can't try MSIE, but as pandy said, your doctype declaration throws it into quirks mode. MSIE's quirks mode doesn't support centering with auto margins.
FWIW, the minimum font size enforced by my browsers causes your text content to expand, which pushes the horizontal menu out of the background image that you've given it.
And the 10px margin around div#contents cause it to be separated from footer.gif by 10px.
FWIW, the minimum font size enforced by my browsers causes your text content to expand, which pushes the horizontal menu out of the background image that you've given it.
And the 10px margin around div#contents cause it to be separated from footer.gif by 10px.
I was too hasty. It's more complex. It doesn't help to center the navbar itself because the links are floated left. First both UL and LI are made inlineand A is made block. Can't make head or tail of how it's supposed to work and what makes it work in FF. Can you explain?
Oh darn! It didn't work in FF to start with either! Sorry, I was very tired last night when I looked at this. I thought it was my changes that made it not work in FF. 
You could maybe give UL a width in pixels. Don't make it inline! It's all images, so that should work, eh? Then you can center it with margin auto. Make LI display: inline and ditch the float. Leave A alone.
Another option is to not use a width for UL but let it span all available space. Don't make it inline, but make LI inline. Now you can center the inline list items with text-align: center (used with UL). Again, leave A alone.
You could maybe give UL a width in pixels. Don't make it inline! It's all images, so that should work, eh? Then you can center it with margin auto. Make LI display: inline and ditch the float. Leave A alone.
Another option is to not use a width for UL but let it span all available space. Don't make it inline, but make LI inline. Now you can center the inline list items with text-align: center (used with UL). Again, leave A alone.
The reason the float is there is because the navbar won't show up without it. My navbar is all image-based with absolutely no text, and I've used the Accessible Image Fast Rollovers technique described here.
Anyhow, I took your suggestion and modified it to a strict doctype, added a width to the UL, then used auto-margins to center it, and now it is in the center of the navbar. Yay!! Thank you, pandy.
Thank you, too, Darin for the suggestion about the container margin. I knew that would be a bug I would want to fix, but I was trying to solve one problem at a time. I've fixed that now, too.
You can visit the URL at the top of the thread to see how the changes you suggested worked.
So, here's the new "bug" regarding the FF and IE displays:
I've set the top margin of the UL to 2px b/c of a 2px difference in height between the #navcontainer background image and the images that make up my fancy navbar rollover images. The #navcontainer background image has 2px of whitespace above it. In IE, this 2px top margine seems to effectively push the navbar images down 2px so that they line up perfectly on the background image. In FF, no such thing happens. Instead, the navbar images still hover 2 px above the background image.
So, I could go back and change the background image to delete the whitespace and instead try to use some kind of top margin to create that lovely whitespace. Or, I could change the header image to include the whitespace at the bottom and not mess with margins at all. Or, I'm wondering if there's a more simple third alternative that doesn't require messing with my image files? Is there some simple coding option that I'm not understanding?
Thanks!
Anyhow, I took your suggestion and modified it to a strict doctype, added a width to the UL, then used auto-margins to center it, and now it is in the center of the navbar. Yay!! Thank you, pandy.
Thank you, too, Darin for the suggestion about the container margin. I knew that would be a bug I would want to fix, but I was trying to solve one problem at a time. I've fixed that now, too.
You can visit the URL at the top of the thread to see how the changes you suggested worked.
So, here's the new "bug" regarding the FF and IE displays:
I've set the top margin of the UL to 2px b/c of a 2px difference in height between the #navcontainer background image and the images that make up my fancy navbar rollover images. The #navcontainer background image has 2px of whitespace above it. In IE, this 2px top margine seems to effectively push the navbar images down 2px so that they line up perfectly on the background image. In FF, no such thing happens. Instead, the navbar images still hover 2 px above the background image.
So, I could go back and change the background image to delete the whitespace and instead try to use some kind of top margin to create that lovely whitespace. Or, I could change the header image to include the whitespace at the bottom and not mess with margins at all. Or, I'm wondering if there's a more simple third alternative that doesn't require messing with my image files? Is there some simple coding option that I'm not understanding?
Thanks!
This sounds like a situation where vertical margins are collapsing. Normally, that is what you want. If two paragraphs have top and bottom margins of 1em, then you probably want 1em of space between them. That's what you get if the margins collapse. If they don't collapse, then you get 2em of space between them: 1em for the first paragraph and 1em for the second.
One workaround is to use padding rather than margins. Padding doesn't collapse.
FWIW, usually, it's easier to get things right in standards-oriented browsers, and then fiddle with it until MSIE gets it right (or close enough to right).
One workaround is to use padding rather than margins. Padding doesn't collapse.
FWIW, usually, it's easier to get things right in standards-oriented browsers, and then fiddle with it until MSIE gets it right (or close enough to right).
Ah, that makes sense. Thank you!
I decided to just go ahead and edit the images. What do I care about 2 pixels of extra whitespace? It looks fine without it, and I will never understand CSS the way an honest-to-goodness web designer will. I write web content for a living; I don't design web pages. I'm mostly just doing this as a favor (and to see whether or not I can do it).
You guys have been amazingly helpful, and I really appreciate your taking the time to look at it for me and offer plausible explanations/solutions.
Thank you again!!
I decided to just go ahead and edit the images. What do I care about 2 pixels of extra whitespace? It looks fine without it, and I will never understand CSS the way an honest-to-goodness web designer will. I write web content for a living; I don't design web pages. I'm mostly just doing this as a favor (and to see whether or not I can do it).
You guys have been amazingly helpful, and I really appreciate your taking the time to look at it for me and offer plausible explanations/solutions.
Thank you again!!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.