# CSS Gurus - what am I doing wrong here?

**URL:** <https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693>\
**Category:** Factual Questions\
**Created:** [July 8, 2008, 3:11pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693 "2008-07-08T15:11:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mangetout](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/mangetout/32/19_2.png) [@Mangetout](https://boards.straightdope.com/u/Mangetout)\
**Post date:** [July 8, 2008, 3:11pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/1 "2008-07-08T15:11:23Z")

</div>

I’ve noticed a problem on my website that manifests in IE - in the [guestbook](http://www.atomicshrimp.com/st/content/guestbook/).

I want it to look like [this](http://www.atomicshrimp.com/stuff/gbff.png), but in IE6, it looks like [this](http://www.atomicshrimp.com/stuff/gbie6.png) - the grey background of the alternate posts (and presumably, invisibly, the white background of the other ones too) bleeds out of the container, also, the content of successive posts seems to drift a little to the left, eventually ending with the text overlapping the dotted edge of the box.

What am I doing wrong here?

---

<div class="post-metadata">

**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\
**Post date:** [July 8, 2008, 4:03pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/2 "2008-07-08T16:03:37Z")

</div>

It looks okay to me in IE7, so it’s probably just a quirk of IE.

And speaking of quirks, you have your Doctype in Transitional, which is what’s known as “Quirks mode” for IE. Try it in Strict and see what happens (just as an experiment - it may mess other stuff up).

---

<div class="post-metadata">

**Author:** ![Stathol](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@Stathol](https://boards.straightdope.com/u/Stathol)\
**Post date:** [July 8, 2008, 5:57pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/3 "2008-07-08T17:57:31Z")

</div>

The short answer is that you’re probably not doing anything wrong – IE is. The IE rendering engine is notoriously bad, especially prior to IE7. What you’re seeing is almost certainly a consequence of IE’s broken box model implementation. You can probably fix the problem with a little extra CSS.

The drifting text is probably the same phenomenon as the [IE6 Three Pixel Text-Jog](http://www.positioniseverything.net/explorer/threepxtest.html), but it could be something else.

Do some googling on the [Holly Hack](http://www.google.com/search?q=%22holly+hack%22), and [haslayout](http://www.google.com/search?q=haslayout). You can probably fix both problems by forcing IE to believe that the relevant elements have layout.

---

<div class="post-metadata">

**Author:** ![SparrowHawk](https://avatars.discourse-cdn.com/v4/letter/s/ac8455/32.png) [@SparrowHawk](https://boards.straightdope.com/u/SparrowHawk)\
**Post date:** [July 8, 2008, 7:11pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/4 "2008-07-08T19:11:30Z")

</div>

And when you want to force IE to do something, [conditional comments](http://www.quirksmode.org/css/condcom.html) is a good way to do it.

---

<div class="post-metadata">

**Author:** ![Mangetout](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/mangetout/32/19_2.png) [@Mangetout](https://boards.straightdope.com/u/Mangetout)\
**Post date:** [July 8, 2008, 9:14pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/5 "2008-07-08T21:14:34Z")

</div>

[QUOTE=GuanoLad]  
It looks okay to me in IE7, so it’s probably just a quirk of IE.

And speaking of quirks, you have your Doctype in Transitional, which is what’s known as “Quirks mode” for IE. Try it in Strict and see what happens (just as an experiment - it may mess other stuff up).  
[/QUOTE]

I probably should do this, but there’s so much in my site that isn’t compliant with Strict, it might well cause more problems than it solves.

---

<div class="post-metadata">

**Author:** ![Greg\_Charles](https://avatars.discourse-cdn.com/v4/letter/g/839c29/32.png) [@Greg\_Charles](https://boards.straightdope.com/u/Greg_Charles)\
**Post date:** [July 9, 2008, 2:03pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/6 "2008-07-09T14:03:54Z")

</div>

[QUOTE=GuanoLad]  
It looks okay to me in IE7, so it’s probably just a quirk of IE.

And speaking of quirks, you have your Doctype in Transitional, which is what’s known as “Quirks mode” for IE. Try it in Strict and see what happens (just as an experiment - it may mess other stuff up).  
[/QUOTE]

I’m not by any means an HTML or CSS guru, but I don’t think this is right. Using “Strict” in the DOCTYPE disallows certain deprecated tags, which “Transitional” allows. You get “Quirks” mode in IE by leaving out the DOCTYPE tag entirely. This mode not only allows the deprecated tags, but also behaves as if the newer version of IE still has some of the browser bugs of older versions. Some (billions of) pages were coded for older IE browsers and rely on the bugs for proper rendering.

Or am I full of fertilizer?

---

<div class="post-metadata">

**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\
**Post date:** [July 9, 2008, 4:34pm UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/7 "2008-07-09T16:34:22Z")

</div>

You may indeed be right, I also am no expert on the application of Doctypes.

Though it may, in fact, be somewhere in between. I’m pretty certain that you do need some kind of Doctype setting for “quirks” mode.

But it’s good practice to leave out the deprecated tags anyway. Because they’re deprecated. Soon enough they’ll be unsupported entirely.

---

<div class="post-metadata">

**Author:** ![Greg\_Charles](https://avatars.discourse-cdn.com/v4/letter/g/839c29/32.png) [@Greg\_Charles](https://boards.straightdope.com/u/Greg_Charles)\
**Post date:** [July 10, 2008, 8:28am UTC](https://boards.straightdope.com/t/css-gurus-what-am-i-doing-wrong-here/455693/8 "2008-07-10T08:28:34Z")

</div>

I find the whole thing horribly confusing. It’s like CORBA used to be … one big reason CORBA is practically dead. I’m anxiously awaiting the day when all browsers implement all the standards consistently and according to specs. That’s currently scheduled for the 12th of Never. I bet they slip though.
