This is why I try not to do markup anymore....

[Chris]

I just had a new layout done for my survival site, the guy send it to me and his markup works fine in FF, but not at all in IE. I told him to fix it, but thought I'd do my own research into the problem... I came across this post.



If the menu is n pixels from the bottom I am sure this is what causes the menu to get thrown of in non-IE browsers. This is because some browsers counts pixels from within a div others count from outside the div..let's say you have a 1px margin for the outer div. And this div is wrapped around the rest of content. Then IE I belive will add 1px from the bottom when "drawing" or rendering the screen. Thats why it is not correctly lined.
I will try to look up your css's and see if I find out excactly what causes this.

And that is seriously why I hate doing markup now. In my own particular case its this menu, if I change the left margin to 5 pixels it lines up in IE but is off in FF, if I change it to 10 pixels it lines up in FF but is off in IE. As far as I can tell each IE pixel is twice as wide as each FF pixel.


Or rather I should say that this is why whenever I try to do an all CSS layout I get frustrated and just fall back on good ol'tables. Say what you will, a table based layout is simple and does not have these problems.

[michael_gersitz]

I have been expirenmenting more and more in CSS divs and tabless designs, and I have found that it is causing me alot of problems when I try to access my pages in FF. Looks good in IE. I haven't heard of a problem when something looks good in FF, that it is all messed up in IE.

[agua]

I now build all my new sites using xhtml/css and am getting up to speed with them. Layout is not a problem - although I still use tables for tabular data (I tried with css and it is possible - but I find it not as quick). I remember building my first sites with tables - that used to take me forever and I'd get all lost inside the code :D

michael_gersitz - that problem sounds like the reverse of the problem 90% of the worlds web designers normally have.

I think the problem is that FF is used much more now by web designers and developers and it also has extensions which help you build css/xhtml sites (css edit and web developers toolbar + more) - so testing on IE can get left until last, and sometimes forgotten.

It would be interesting to see the problem your having Chris - any chance of the url?

[Masetek]

The difference is FF displays it correctly!

I HATE IE SO MUCH! I spent ages getting a 3 column with header/footer layout working perfect in FF only to open it in IE and spend another 3 hours getting it right! I end up with so much crap in the <!--[if IE]> and <!--[if IE 6]> tags.

It does get easier once you know the hacks and issues though. If I was in your situation Chris (money wise) I wouldn't be doing my own markup.

Just get James to do it :)

[michael_gersitz]

michael_gersitz - that problem sounds like the reverse of the problem 90% of the worlds web designers normally have.




Good thing I am not a web designer, and good thing I use IE, and good thing i know how to make html tables. And good thing I can always get James to do it if I had money to pay him.

[r2d2]

Whether a 'problem' appears in FF or IE, obviously just depends on which one you develop it in - the other one will probably have a problem.

Chris - I'm not an expert on CSS, but that sounds like the Box-model problem. Do you have a width and margin applied to a div?

As for me - I always use Paul O'Brien's (http://www.pmob.co.uk/) premade CSS layouts. Very well coded, and already work across browsers. Just need to refill the divs with your own site.

[Cutter]

I feel your pain, that gardeningblog layout I did for you drove me nuts! Fix one thing and another error fills its place. On my first major site I had a CSS problem that took me a month to locate the culprit. When I run into these problems it drives me nuts, but I feel so great when I finally fix them.

[Sean]

I've been using this pretty simple trick in my CSS:



div.middle {
width: 741px;
background: url(middlebg.gif);
padding: 1px 5px 6px 10px;
overflow: auto;
}
html>body div.middle {
width: 725px;
}


Where the div.middle applies to both IE and FF but the html>body div.middle applies to FF (replaces the width of the other one). Not sure if you guys know this trick or not, but I figured I'd mention it... just incase.

[Chris]

My problem is that he is building his layout with an overall background. Basically he has a 2 pixel high 870 pixel wide graphic that he is draping down the entire page, this ends up drawing a left menu area. Then he is trying to put the left menu text on the left menu.

However, when the margin requires different pixels to be displayed correctly in IE as it does to be displayed in FF.

I've attached it here if any of you want to take a look.

[Sean]

I've fixed:
-the extra tall "bottomheader"
- the double thick borders
-margins on the top and bottom that looked kinda funny
-the sidebar left margins

but I'm not sure how to fix that grey background behind the top image and sides, I haven't worked with transparent images over image backgrounds. Here's a zip with just the CSS file.

[Chris]

Hey thanks Sean.

As for the image issue... that is from IE's non-support of alpha channel transparency in PNGs. Apparently there are work arounds, and apparently it is also a big source of complaints with IE. I did a Google on it and there were quite a few helpful pages.