Something is wrong with me...

...i can make ie work, but not firefox!

[createErrorMsg]

I feel like the anti-christ coming in here and saying this, but Firefox is really getting on my nerves.

I'm designing a simple, header, horizontal nav, left content, right sidebar, footer page, using Ryan Brill's negative margin's method and faux columns. I finally got the negative margins thing working right, then Firefox goes and completely screws up my borders! In fact, it won't even DISPLAY the border on my containing div, which is a problem since the header, nav and footer all have THEIR borders.

So I set everyone on the page's borders to different colors to see what was going on, and it turns out that the nav links (using CSS rollover) actually overlap the nav bar border and a portion of the container div (holding the content and sidebar). What the &*%#!

I feel so conflicted. I know in my heart of hearts that Firefox is good and pure and full of candy and roses, and that IE represent everything evil, stupid and trollish in the world, YET IE seems to like me better.

ANY idea why Firefox is allowing elements in different divs to overlap each other? Or why it won't display my border? Or why I even bother designing web pages to begin with?

I can post code details if anyone thinks they can actually help with this (I refrained because I now officially hate these code details.)

Thanks in advance.

[iamlost]

I can post code details if anyone thinks they can actually help with this (I refrained because I now officially hate these code details.)

Without posting your DocType and relevant code snippets we can sympathise but not help.

Generally Moz will display as to your DocTypes standard. IE will often display what it thinks you want or to what MS thinks standard should be.

That is why many of us design in Moz/Opera, validate html and css, and then tweak as required for IE. It is usually much easier than from IE to Moz/Opera.

[createErrorMsg]

iamlost, thanks for the response. Now that I've had a few hours to cool off from the battle, I'm back to trying to solve the problem. I've got everything working fine in Moz, except that weird border/overlap thing. I'll put some snippets here to give an idea, hopefully someone can help.

doctype is html 4.01 strict. I checked the doctype declaration against the W3C list to make sure it was written right...it was.

Anyway, the code.

the html:
<div class="logo">
<img ...>
</div>
<div class="nav">
<ul> ---------------->horizontal nav, see CSS below
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div class="container"> ---->allows for faux column
<div class="cont_box"> --->allows for neg margins c/o RYan Brill
<div class="content">
<p>blahdy blah blah</p>
</div>
</div>
<div class="sidebar">
link link linkety link
</div>
</div>
<div class="clearer"></div>
<div class="footer">
yak yak
</div>

the (relevant) css:
/* ------------POSITIONING------------- */
.logo {
margin: 0 auto;
width: 649px;
text-align: center;
background: #fff;
border: 1px solid white;
}

.nav {
margin: 0 auto;
width: 649px;
border: 1px solid white;
}

.container {
margin: 0 auto;
width: 649px;
background: #bfdbae url(../images/bg.gif) right repeat-y;
border: 1px solid white;
text-align: left;
}

.cont_box {
float: left;
width: 100%;
margin-right: -107px;
background: #bfdbae url(../images/bg.gif) right repeat-y;
}

.content {
background: #bfdbae;
margin-right: 107px;
height: 100%;
padding: 15px;
}

.sidebar {
margin: 0 auto;
float: right;
width: 107px;
}

.clearer {
height: 0px;
clear: both;
}

.footer {
clear: both;
width: 649px;
height: 100%;
border: 1px solid white;
border-top: 2px solid white;
background: #bfdbae url(../images/fade_flip.gif) bottom repeat-x;
}

/* ---------NAV settings--------*/
.nav ul {
display:inline;
list-style-type: none;
text-align: center;
clear: left;
}

.nav ul li {
display:block;
float: left;
text-align: center;
border-top: 5px solid white;
border-bottom: 1px solid white;
background: #ccc url(../images/fade_over.gif) top repeat-x;
}

.nav ul li #last {
border-right: 1px solid white;
}

.nav ul li a {
color: #000;
width: 107px;
height:40px;
line-height: 3em;
font-size: 11px;
border-left: 1px solid white;
text-decoration: none;
display: block;
background: #bfdbae url(../images/fade.gif) top repeat-x;
}

.nav ul li a:hover {
color: #fff;
font-weight: bold;
background: #bfdbae url(../images/fade_over.gif) top repeat-x;
}

I know that's a lot of code, but if ANYONE can cull through it and figure out what the problem is, I will be eternally grateful.

Thanks.

[iamlost]

You and I design/code differently. It was quite interesting to work through your snippets.

I changed several things. It appears to be the same in Moz, IE, and Opera - but I do not know the size of your background images which may make a difference. Hopefully this puts you on track for cross-browser compatability.

Using inline lists for nav is difficult to get cross browser compatable (as you have noticed). Eventually they will support navigation lists (nl) and we can use css and lists to replace DHTML. But that is never-never.

Please note your original code in normal font and replacement code in bold.

.nav {
width: 649px;
height: 40px; /* specific height helps cross-browser */
margin: 0 auto;
padding: 0;
border: 1px solid #fff; /* Note change to Hexcode as more cross compatable */
}
.nav ul {
/* display: inline; */ /* removed inline to ul li */
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
/* clear: left; */ /* not sure why this is used */
}
.nav ul li {
display: inline; /* moved from ul to ul li */
float: left;
/* display: block; */
/* text-align: center; */
/* border-top: 5px solid white;
border-bottom: 1px solid white; */ /* moved to .nav ul li a */
/* background: #ccc url(../images/fade_over.gif) top repeat-x; */
}
.nav ul li a {
display: block;
width: 107px;
height: 33px; /* changed to allow for borders */
color: #000;
font-size: 11px;
line-height: 3em;
text-decoration: none;
border-top: 5px solid #fff; /* moved from .nav ul li */
border-bottom: 1px solid #fff; /* moved from .nav ul li */
border-left: 1px solid #fff;
background: #bfdbae url(../images/fade.gif) top repeat-x;
}

Also: adding text-align: center; to the html,body in css file does two things. One, it removes the repetition further in code; two, it centres the page in older IE browsers who will otherwise display everything hard left.

If you do not already include:

html, body {width: 100%; height: 100%; padding: 0; margin: 0; border: 0; font-size: 100%; text-align: center;/* not always necessary */}

you might find it helpful in cross-browser display.

[SuzyUK]

I think it is all to do with floats.. and IE's "auto enclosing" behaviour..

floated elements are removed from the flow so their parent elements do not know they are there and therefore don't stretch (clear)

First the nav div.. it doesn't know it's got any content, so it needs clearing and then the container div itself needs clearing, I know you've got a clearing div in there, before the footer, but that is not actually forcing the container div to stretch (therefore still no borders or faux column image?)

using the "easyclearing" method described on PIE is possibly the best for this situation as floating the parent div (the correct way to make parent stretch in compliant browsers) will lead to fun and games when trying to center the design

if you take this code (from the easy clearing page)

.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

then add the class "clearfix" to the nav and the container

<div class="nav clearfix">...

<div class="container clearfix">...

then remove all other "clear" rules and divs..that might help the borders and image.

let us know

Suzy

[createErrorMsg]

All I can say is...unbelieveable!

I thought for sure I wouldn't get much response to this question. Thank you two so very much for your advice.

iamlost:

You and I design/code differently. It was quite interesting to work through your snippets.

I assume you mean your code is at least moderately organized whereas mine, is, let's say this nicely, not? I tend to let my code (css) be sloppy until things are starting to look right, then I (attempt to) go back and clean and organize it. I'm starting to wonder about the wisdom behind this method, though, and am trying to get some pre-existing sense of order in my head before I start coding.

YOUR comments were extremely helpful to me in that regard, as I can see in just this one, short example the logic behind how you order declarations in your rules. I made all the changes you advised (save one) in the css. Although this didn't fix the border issue I was having, it definitively cleaned up the code and got some peices in the right places. So thank you.

The one thing I didn't change was the background: url() bit in the .nav ul li, as I read somewhere that placing the hover image here pre-loads it for rollovers. Let me know if you believe this to be incorrect. Realistically, preloading those images can't make that much of a difference, anyway, but every little bit can help.

suzyUK:
Eureka! Yours was just the answer I needed. I created the clearfix class, added it into the source and instantly my blessed borders appeared.

It's interesting, I searched and searched online for reasons why Firefox wasn't doing what I wanted, when the answer lay, instead, in what ie was doing in it's own proprietary way!

Thanks again to both of you. You've restored my faith in Mozilla, web design, and the everlasting kindness of the human spirit.