Why don't all browsers just start displaying the same thing!!!???

jwilkers · #1 04-15-2009, 03:08 PM

Ok,

Just started playing around with 4.2 in a new directory and have started tweaking the left-bar

I set up a .gif to display in the title bar instead of text, with 1px of margin around the graphic. Looks great in FF, but in IE7, there is an extra pixel above the image.

Also, I set up some bullets for the category links in the categories list, but the bullets are not at the same height in relation to the links from FF to IE7. The IE7 ones are slightly higher.
- I ran into this problem with my live site, and had to live with the slight difference, but the
difference is greater in this implementation.

I have tried analyzing the .css using IE Developer toolbar, but can't figure it out.

http://www.64.255.11.132/shop

balinor · #2 04-15-2009, 03:50 PM

Welcome to the world of cross-browser compliance. IE has always had mysterious '1px' glitches, float issues, line spacing issues, etc. That's why there is a separate stylesheet for it. Blame it on IE, they just can't create a standards compliant browser - IE8 is just as bad as 7.

jwilkers · #3 04-15-2009, 03:55 PM

so, should I try to make separate entries for the applicable css in the IE7 css file?

balinor · #4 04-15-2009, 03:57 PM

Yes, google IE and margins and you'll find some hacks

jwilkers · #5 04-15-2009, 05:25 PM

Can't seem to find one to get rid of that ONE darn pixel.

tried putting in the same css for the title bar into the ie7 css and just tinkering with the margins, but IE7 just won't give up..

ridiculous that browser even exists

I've spent close to 4 HOURS today on 1 pixel!!!

Very expensive pixel

jwilkers · #6 04-15-2009, 05:50 PM

Most of the day on this and I just fixed it....

I was doing a bottom border only on the title bar as a bottom "box" divider. I took that out, and changed it to a top border on the content box below it and whammy.

works in FF and IE.

ARRRRRRRRGHHHHH

ARW VISIONS · #7 04-15-2009, 06:23 PM

Sometimes you have to wrap you images in <div> tags to get them the same.

gb2world · #8 04-15-2009, 06:38 PM

You might also get in the habit of normalizing all the css settings to something that is familiar to you, essentially taking over any css that is default - which can vary from browser to browser: See this for example