Skip navigation

Web Page Design: Talking Only to Internet Explorer

The more I work with Firefox as my main web browser, the more I want to kick Microsoft Internet Explorer off the planet. When it comes to web page design, working with and displaying web pages, Firefox is so incredible. I want to bash my head against the web design wall when it comes to forcing beautiful web page designs to work with Internet Explorer.

One of the big problems I have is making Internet Explorer work with basic CSS styles. Padding, margins, spacing, placement, all the elements necessary for the architectural structure of a web page design – they suck in Internet Explorer. It has its own rules on where and how to start measuring space. Even this lovely designed WordPress Theme looks terrible in Internet Explorer, and I’m helpless to fix it as I can’t change WordPress Themes on WordPress.com, not even mine. SIGH. But I can change my own web page designs on my full version WordPress blogs.

In order to get a web page design to render beautifully in Internet Explorer, after it works so lovely in Firefox and other browsers, I have to use a few tricks, often called CSS hacks.

I tend to think of these as my method of talking only to Internet Explorer and ignoring everyone else. Like that low-to-the-ground, in-your-face, hissed dialog you often have with your spouse and/or children: “Didn’t I tell you not to… Don’t make me…. I told you to…” That kind of conversation.

To give a command to Internet Explorer through your style sheet (style.css is the common file name), you need to send a private message with a bit of CSS code:

* html section {instructions}

The section is the tag, class or ID reference, such as body blockquote, em, a:href, strong, or #header, #footer, .alignright, .alignleft and others. The instructions are the styles applied to that section.

One of the problems I had with one section of a recent web page design came with the bottom margin of a container, specifically a blockquote. Firefox and other browsers held the spacing very nicely between the blockquote and the text below, but Internet Explorer put a huge gap between the two. Giant empty space. Not the kind of whitespace that looks pleasing, but the kind of gap that says “something is missing here”.

I needed to talk privately with Internet Explorer and say “Hey, I know you think you are doing your best, but this space thing sucks. Make it smaller, okay?”

blockquote { margin: 10px 20px 30px; background: green; text-align: center; }
* html blockquote { margin-bottom:10px; }

That made the fix. The space shrinks down when the page is viewed with Internet Explorer, but looks normal and fine with other browsers.

The * html is only read by Internet Explorer. The rest of the web browsers ignore it. So if you are having a problem with Internet Explorer messing up your web page design, after you validate and check to make sure it isn’t because you have something worse going on, then consider having a private discussion with Internet Explorer, one-to-one, and set it straight.

Rumor has it that the next version of Internet Explorer will make all these IE hacks a mess, and that they can be done away with, but that doesn’t fix the problems for the millions of people who will still be using older versions of Internet Explorer. I know many people living overseas (and in the US) still using Windows 98, so I think IE hacks will be around for a while.

NOTE: For a good review of CSS hacks that will apply to IE7 and also some backwards compatibility, even on this technique, see Nano Box – Easy CSS Hacks for IE7.

I don’t like designing web pages with CSS hacks. I hate having to do it. Totally hack-less web designs, not just architecture but tiny details are really difficult. I have a lot of problems with padding and margins in my sidebars, blockquotes, footer, header, just about everywhere, fighting the IE 3 pixel jog, and sometimes I have to get out the big hammer, and others times I whisper instructions just to Internet Explorer.

Here are more resources for learning about CSS and browser bugs and how to talk to a specific browser while ignoring the rest:

Related Articles


Site Search Tags: , , , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen

19 Comments

  1. Posted May 31, 2006 at 2:45 am | Permalink

    Actually, it’s better to create a seperate css file for IE and use conditional comments, – and it’s much easier to work with when it’s time to start screaming at IE.

    I’ve written a little about how it’s done in
    CSS design for the future – a IE 7 test

  2. Posted May 31, 2006 at 2:56 pm | Permalink

    Don’t get too cozy with *html , my understanding is IE 7 breaks that hack.

  3. Will
    Posted June 2, 2006 at 10:49 am | Permalink

    check out dean.edwards.name/IE7/.

  4. Posted June 2, 2006 at 2:13 pm | Permalink

    Will: Your link doesn’t work.

    To others: Yes, as mentioned, IE 7 publicity “claims” that the IE hacks will make this not work, but only if you are using IE 7. Since the majority of users will not upgrade, then what? That’s the question that I’m missing the answer on. Has anyone addressed backwards compatibility with this? Or do we all have to remove our IE hacks and say to our users “MUST be viewed ONLY in IE 7 to look good”?

    Reports continue to state that a huge majority of Internet users, especially those outside the United States and a few European countries, are using Windows 98 still! What about your international readers?

  5. Posted June 9, 2006 at 2:58 am | Permalink

    i need ajob as web page designer, but now iam still
    student doing this course,i need idvices.thanks you.

  6. Posted June 9, 2006 at 12:18 pm | Permalink

    To answer your question about backwards compality, I usually create a file ie.css that goes for all IE versions. – And if the site looks really strange in IE 6 I create a so called iesix.css file, and still use conditional comments.

    Anyway, I discovered that if you use the property list-style:none outside; in lists it actually show up right in all browsers and you don’t need create a IE hack to tell where the margin should be.

  7. Posted June 5, 2007 at 6:43 am | Permalink

    Nice…

  8. Posted October 2, 2007 at 2:56 pm | Permalink

    I seem to have the opposite problem in IE my sites look beautiful. In FireFox they are a jumbled mess. I came across this looking for some hacks that will make FireFox stop destroying all the coding I’ve done.

  9. Posted October 2, 2007 at 10:46 pm | Permalink

    Actually, if you are using IE hacks to make IE work, which is the norm, without backups to web standards to fall back on, your design in Firefox could well bork. Serious web designers design in Firefox, and then test and fix to make it work in all versions of IE, since IE is such a pain and doesn’t use web standards consistently across versions.

  10. Posted October 31, 2007 at 8:24 pm | Permalink

    hi.

    thanks for the great info. i blog. and love mozilla.

    question:

    how can i make a hack for IE which will make it overlap jpegs the way mozilla does?

    mozilla allows me to have a jpeg which starts at text and continues over the blockquote. but IE thinks if a jpeg was begun i text that it mist end in text and pushes the blockquote down or to the right.

    is there a bandaid for this?

    thanks.

  11. Posted November 2, 2007 at 10:30 pm | Permalink

    The same way you should be doing it no matter what browser you are using. To have an image “under” the text, which you describe as “overlap”, the image is set as a background image within the CSS/stylesheet. As far as I know, there is no special hack or anything for this, though positioning it in IE can be a little more trouble, it’s not a big deal.

    That is unless I don’t understand what you are asking.

  12. Posted February 15, 2008 at 10:40 pm | Permalink

    IE can be such a nightmare, I have had to go as far as multiple style sheets and some javascript to detect the browser.

  13. Posted July 21, 2008 at 3:57 pm | Permalink

    Ive been working on CSS based sites for sometime but still get the odd error in firefox ! wish they just played ball the same when designing, would make life a whole lot easier for everyone involved… but then that would be to simple and obvious…lol

  14. Posted September 7, 2008 at 7:02 pm | Permalink

    Thanks Lorelle,
    this seemed to fix our blog! I was doing a class… and we had my Mac, and a PC with Vista, and one with IE 6.0 The PCs both showed a shifted header. This seems to have solved the problem!

  15. Senthil
    Posted February 17, 2009 at 7:27 am | Permalink

    Hi Lorelle,

    I am facing problems with WuCoco WordPress Theme (http://mikelococo.com/projects/wucoco). Everything looks fine when viewed in Mozilla, but left side columns squishes over when viewed in IE6/7. Is this something we can fix? Please let me know.

    • Posted February 17, 2009 at 10:39 am | Permalink

      Please contact the designer of that WordPress Theme for help. If they have discontinued support, you can try the WordPress Forums, or change Themes.

      Yes, this is common and it could be a lot of things causing the problem. Internet Explorer does not play well with margins and padding. If you are willing to do it yourself, then adjust the margins and padding for those architectural containers by reducing the width and see what happens.

  16. Senthil
    Posted February 17, 2009 at 7:37 am | Permalink

    Of note, the above problem occurs when I use the two column layout.

  17. Posted March 19, 2010 at 11:01 pm | Permalink

    I’m hoping that I can please get some help here, since for some reason, I can’t get an account on the WordPress.org forum…I’ve requested it twice, but I never get the email which tells me my password…but I digress.

    Could you please take a look at my site and tell me why the font on just the first post’s month and date is white, but it’s the correct color, gray, on the rest? In IE7, they are all gray, which is how they should be. Do you know a fix for this?

    Also, in IE7, my footer is WAY AT THE BOTTOM of the page, but in Mozilla, the footer is displayed correctly. I’m a big time newbie, and I don’t know what to do to fix these two issues. Any help would be GREATLY appreciated. Thanks so much!

    • Posted March 23, 2010 at 10:46 pm | Permalink

      I’m sorry but I am not available for hire currently. A think called the “3 pixel jog” is probably the problems in Internet Explorer (many versions). Please see CSS: Studying Your CSS Styles for tips on the rest.


8 Trackbacks/Pingbacks

  1. [...] Lorelle har igen skrevet et handy lille stykke tekst om wordpress og design. Som mange sikkert har lagt mærke til, har Firefox og IE ofte lidt forskellige opfattelser af hvordan en side skal vises fordi fortolkningen af html-koden varierer. Lorelle har en simpel og velfungerende løsningsforslag til problemet der kort sagt går ud på at IE får lidt ekstra vejledning de steder læsningen af html-koden giver problemer. Dejlig simpelt – men man skal jo lige vide hvor fejlen er og hvordan den skal løses/omgås… [...]

  2. [...] For example, for previous versions of Internet Explorer, you could use * html followed by code that ONLY talked to Internet Explorer. So you would have two versions of instructions. The one that worked for the rest of the browsers and the version that worked only for Internet Explorer. [...]

  3. [...] Web Page Design: Talking Only to Internet Explorer [...]

  4. [...] Web Page Design: Talking Only to Internet Explorer [...]

  5. [...] Web Page Design: Talking Only to Internet Explorer [...]

  6. […] Web Page Design: Talking Only to Internet Explorer […]

  7. […] Web Page Design: Talking Only to Internet Explorer […]

  8. […] Web Page Design: Talking Only to Internet Explorer […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,280 other followers

%d bloggers like this: