So whats with IE6? just one more time. – HTML / CSS

  html

Q(Question):

I setup a site that uses a set width main body then installed some divs within the body. In Opera, IE7, and FF it all looks pretty similar, some small problems with IE7 but the site still looks good. In IE6 one of my right floated divs sort of slides to the right a bit further than in the rest of the browsers leaving a nice 5 px gap between the div and another object. Whats the deal?

A(Answer):

I setup a site that uses a set width main body then installed some divs within the body. In Opera, IE7, and FF it all looks pretty similar, some small problems with IE7 but the site still looks good. In IE6 one of my right floated divs sort of slides to the right a bit further than in the rest of the browsers leaving a nice 5 px gap between the div and another object. Whats the deal?

That’s the beauty of Internet Explorer. Post a link to your site we’ll see if we can help you fix it.

A(Answer):

I’d love to honestly but I probably won’t run the update that has this problem untill early this coming week.

It blows my mind, it just appears to float the item 5 extra pixels to the right which then applies a gap in between the item and a GIF that I placed in the corner of the two.

IE 7 Also appears to place things about 5 px lower on the screen than FF and Opera. Seems like it has to do with the inherent IE7 top margin.

A(Answer):

So I changed the left margin of the right floated element from 0px to 10px and now the gap is gone and IE 6 and has had no effect in Opera & FF. LOL it makes absolutely no sense.

The top margin thing still bothers me.

A(Answer):

So I changed the left margin of the right floated element from 0px to 10px and now the gap is gone and IE 6 and has had no effect in Opera & FF. LOL it makes absolutely no sense.

The top margin thing still bothers me.

Yea, that is how IE works if you want to test with the standards use Opera and FF. Basically, you need to ‘massage’ it to get it the way you want in IE 6&7.

A(Answer):

It makes sense if you realize that IE and other browsers don’t render elements the same way. Borders/padding/margins are often rendered differently. If it must be exact for all borwsers you will have to fiddle around with your style sheet and use some hacks or use seperate style sheets for the various browsers.

A(Answer):

I haven’t looked at the code but most browsers have their own default margin/padding so it is sometimes good to just set them all to zero and then set each element as you wish.

You usually don’t need hacks for any browser but IE. In fact, there are few hacks for any browser but IE.

A(Answer):

How is it that you can add specific css style sheets for specific browsers?

A(Answer):

You can’t, but you can target IE with "conditional comments". Targeting specific browsers is a waste of time since, if you follow and write standard code, CSS works pretty well in all browsers. You only have to adjust for IEs quirks and bugs. So, for example:

<!--[if IE 6]>
#mydiv{
background-color:red;
}
<![endif]-->

A(Answer):

You can’t

Sure you can. Use javascript to detect the user agent and dynamically write the link to the targeted style sheet, or use a server side script to do the user agent detection and load the appropriate style sheet.

But conditionals are an elegant solution and I recommend that also. They are easy to implement and don’t rely on any scripted support to work.

But having seperate style sheets for various browsers is not uncommon and can make it easy to make changes for a targeted browser only.

LEAVE A COMMENT