Another IE/Firefox problem

[branwen]

I've been working on a layout, and I can't seem to figure out why IE and Firefox are at such odds here. http://www.nbtsc.org/~branwen/webdesign/designblue.html
It all shows up for me how I intended in IE at this point, but Firefox wants to put one extra pixel between end of the dark blue "bar" (actually part of the background image) and the "content" div. It also does not put the "endbar" div right inder the "content" div, and decides rather to place it quite a few pixels below.
Does anyone know what is going on here, besides Firefox and IE just plain butting heads?

 

[monaco]

I've been working on a layout, and I can't seem to figure out why IE and Firefox are at such odds here. http://www.nbtsc.org/~branwen/webdesign/designblue.html
It all shows up for me how I intended in IE at this point, but Firefox wants to put one extra pixel between end of the dark blue "bar" (actually part of the background image) and the "content" div. It also does not put the "endbar" div right inder the "content" div, and decides rather to place it quite a few pixels below.
Does anyone know what is going on here, besides Firefox and IE just plain butting heads?

Try using negative border values for the DIVs. It works in some cases, but it's trial and error to get the right values to look right.

 

[Rowan W]

Use containing divs to keep everything "glued" together.

eg, <div id="container"><div id="header"></div><div id="body"></div></div>

And most importantly, design for Firefox, not IE.

 

[monaco]

And most importantly, design for Firefox, not IE.

I second that, IE blows!

 

[branwen]

Use containing divs to keep everything "glued" together.

eg, <div id="container"><div id="header"></div><div id="body"></div></div>

And most importantly, design for Firefox, not IE.

I'll try the containing div--good idea, but I'm not sure it will help with the top part, since it's not a div but part of the background image. I guess I should've though better on that.

I would design for Firefox, but I know that most people will be looking at a page in IE. I usually look first in Firefox, then try to find out why IE is being so horrid, but I really do have to "design for IE", sad as it is.

 

[monaco]

I say design for firefox. You can put a browser check and suggest your users download firefox on Windows when it finds IE. You cannot, however, suggest Mac user get IE6+, or suggest that a linux user get IE at all.

Firefox runs on everything, if you're worried about reaching visitors, I would target the largest number of platforms. Also, firefox is steadily gaining in popularity. That said, I would design for firefox, and work the bugs out of IE, not the other way around. The way firefox works is to follow w3c specifications anyway. IE is the bad guy here.

 

[branwen]

I say design for firefox. You can put a browser check and suggest your users download firefox on Windows when it finds IE. You cannot, however, suggest Mac user get IE6+, or suggest that a linux user get IE at all.

Firefox runs on everything, if you're worried about reaching visitors, I would target the largest number of platforms. Also, firefox is steadily gaining in popularity. That said, I would design for firefox, and work the bugs out of IE, not the other way around. The way firefox works is to follow w3c specifications anyway. IE is the bad guy here.

I know, I really do. I totally agree with you. That's why I work until my design works in ALL browsers. I'm not going to leave anyone out, even if they're a stickler for IE in all it's horridness. Really, I NEVER use IE for myself, only for designs. I try to convert everyone I can to Firefox. But if I'm going to make a site for a client, I am not going to suggest to his or her viewers that they need to download a new browser so they can see that website. I am not about to go losing potential customers for my clients.

 

[branwen]

Okay. I had ".endlinks ul { padding-top: 5px; margin: 0px; }" in my css and "<ul class="endlinks">" in my html, and when I took out the "ul" in the css (".endlinks { padding-top: 5px; margin: 0px; }") the whole "endbar" div flushed up to the div above it in Firefox. One problem down, and only the little 1px problem to go.

 

[Jimmy Changa]

If the folks are using IE, they aren't worried about 1px.

 

[monaco]

If they're using IE, their biggest worry is remembering to breathe, I bet...

 

[LeetPCUser]

They are identical for both here. If you need help optimizing it PM me and I can help.