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:

• WordPress Codex – CSS Fixing Browser Bugs
• Richinstyle – Bugs in Mozilla/FireFox
• Richinstyle – Bugs in all browsers
• Centricle – Will the Browser Apply the Rules
• Positioniseverything – Internet Explorer Design and Layout Bugs and Hacks
• CSS-only Filters Summary
• Eric Meyer on CSS – Tricking Browsers and Hiding Styles – A bit dated but good
• Positioniseverything.net – Modern browser bugs explained
• Sitepoint – Browser Specific CSS Hacks

Related Articles

• Sex Sells – How To Nail a Sexy Layout
• Another How To Website Design Tutorial
• In Search of the Perfect Layout
• Innovative and Simple Web Page Structure – Just Change the CSS
• Boycott Ugly Table Designed Blogs and Websites
• The Holy Grail of Web Page Layout – Without Hacks
• Usability Isn’t Expensive. It’s Practical. Usability is Useful.
• A Study on the Art of a Well-Designed Weblog
• Beauty is Only Skin Deep: Designing Blogs For Feeds, Search Engines and Audience
• Validating the Code Behind the Page
• 10 Steps to Valid HTML
• Validate an Entire Website
• Conquering Site Validation Errors
• Fixing Browsers: Bugs and Hacks
• CSS and Web Page Design List of Resources

---

Site Search Tags: html, css, bugs, browser, web, hack, hacks, tips, technique, design, page, style, stylesheet, *+html, layout, site, website, architecture, structure, margins, padding, space, validation
Copyright Lorelle VanFossen