This is an interesting one. Three things happening: floats, inline and the 3px jog.
Put a border around your 2 nav headings and you'll see the problem. Floats "sit on top" of the normal flow of the document with content sliding out from underneath the float. This is what happens in your second text box (sub-nav). That's why the border extends under the logo. Your first nav (header-navigation) is done inline. An inline box is only as long as its content. Hence the text and the box slide out from under the logo. The second menu (sub-nav) is a normal display and hence begins under the logo and the text starts in Mozilla right next to the logo (the 12 px left is applied to the box which is why it doesn't start at the left edge of the logo). If you make the sub-nav inline, it starts next to the header-nav since the length of the line allows for both boxes. That is, the clear won't work since there is room next to header-nav to fit the sub-nav. Try it with borders and you'll what I mean. The sub-nav will be 6px lower because it is relatively positioned. If you do both as normal display, then improper 3px jog in IE will cause a difference in appearance. I'd suggest you keep the logo as a float. Then make the entire navigation setup a second float which is floated left against the logo. This will allow you to pad the 2 text menus since they will be within the containing div of the second float. Do both as normal flow not inline. If you do this, be sure to a clear:both after the second float. And never make the total width 100% even if you use a pixilated width (browsers actually add pixels differently when calculating widths as well as the ie 5 box model problem). It's not as complicated as it sounds. Leave the borders so you can see the fit. When you remove the borders, you'll get a little extra padding for width issues. You may even want to wrap the whole logo and nav in their own div to make it easier to work with. This may take a couple of "huh's" to work out. It's part of the process of learning to think css. I'll be glad to elaborate or work on the code with you. drew First thing to remember is that floats are out of the flow of the document but acknowledged by the document. This means that normal flow text boxes start under the float not next to the float. Your sub-nav text shows that. The header-navigation begins next to the float but not under it because it is an inline box not a normal flow box. -----Original Message----- From: timeforcake [mailto:[EMAIL PROTECTED] Sent: Sunday, January 11, 2004 10:56 PM To: [EMAIL PROTECTED] Subject: [wdvltalk] css lineup! Hello there everyone. I am stuck! I am currently working on the top section/navigation of a page, and the problem is that the secondary line of navigation lines up differently (vertically speaking) in IE and in Mozilla. It should not. I have been trying to read about the "3px jog/differences", and I've searched the Internet far and wide only to find a very large number of complicated hacks that were a bit over my head. I've also posted to a CSS forum, but no luck (or should I say. . . no responses! =) ) The page I'm working on is here: <http://www.foxowl.com/index2.html>http<http://www.foxowl.com/index2.html>:/ /www.foxowl.com/index2.html The CSS file is here: <http://www.foxowl.com/foxowl.css>http<http://www.foxowl.com/foxowl.css>://w ww.foxowl.com/foxowl.css (Note: I"m still fiddling w/ the php nav. . . so I've not yet removed the php code to an external file, don't worry, I will! And the css file validates and the HTML validates, strict.) I'm hoping that someone here can: #1) Explain in plain terms what's going on and why it's happening. #2) Explain in simple, easy-to-understand English how I can go about fixing my problem. I'm looking forward to learning from all of the wise people here! Thank you so very very much!! -eRin. ____ * The WDVL Discussion List from WDVL.COM * ____ To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: "set WDVLTALK pw=yourpassword" in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub ________________ http://www.wdvl.com _______________________ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to %%email.unsub%% To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with. ____ � The WDVL Discussion List from WDVL.COM � ____ To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: "set WDVLTALK pw=yourpassword" in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub ________________ http://www.wdvl.com _______________________ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
