Is it Me or IE?

lohseca · May 14th, 2006, 10:40 PM

To start, I'm what you'd call a "hobbyist." I do web development because I (usually) can, and there are groups with which I'm involved that need help.

So I'm working on a re-design of our soccer club's site, and I decided I needed to move away from the "tables" safety zone and into CSS. Bought the book, went through the examples, ready to go! Or so I thought....

Here's what I came up with so far: http://chris.lohse.org/emssc/testcolumns2.html
The CSS is at:
http://chris.lohse.org/emssc/mainnew.css

I started with a 3-column layout that I found on Bluerobot.com and faked my way through adding the header (with that tricky black graphic and text) and doing all the other formatting.

It shrinks; it stretches; it looks pretty nice for a day's work, I guess.

Look nice, that is, unless you happen to be one of the zillion or so people in the world who use IE.

The black bar in the header doesn't render anywhere near correctly, and much of the other formatting is trashed as well.

Any advice? Is the design a lost cause, or is my inexperience what's hurting me here?

Cheers,
Chris

richard.york · May 16th, 2006, 07:57 PM

First some observations,

* Using parsing bugs to filter CSS sent to Explorer is a bad idea. IE7 fixes lots of parsing bugs, and implements many selectors previously unsupported by IE 6, however not everything these filters are intended to fix have been fixed.

A future-proof approach to hacking Explorer is IE's own proprietary conditional comments:
http://msdn.microsoft.com/workshop/a...omment_ovw.asp

* Units aren't required for zero measurements.

* Rather than typing out "background-color", you can just type "background" (just want to save you some typing :-))

* You've left semi-colons off of some declarations, try using the W3C CSS validation service at http://jigsaw.w3.org/css-validator/ It will help you find errors. Firefox also reports CSS errors to you using the JavaScript Console, Tools -> JavaScript Console (Firefox 1.5 or later). This is another reason to quarantine your IE hacks, otherwise it's possible that you'll get loads of errors while validating your style sheets.

Does this work as expected in Firefox?
It's difficult to tell if that black header is where it's supposed to be. (I'm viewing this in Mac Firefox)

Now, for the code, first the markup.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>EMSSC Test Page</title>
    <style type="text/css" media="screen">
        @import "test.css";
    </style>
    <!--[if lt IE 7]>
        <style type='text/css'>
            div#spacerbox {
                position: relative;
                top: 86px;
                z-index: 10;
            }
            h1 {
                margin-top: 90px;
            }
            div#navTopBannerLinks {
                right: auto;
                width: expression(document.getElementById('body').offsetWidth - 338);
            }
        </style>
    <![endif]-->
</head>
<body id='body'>
    <div id="topBanner">
       <img src="http://chris.lohse.org/emssc/topbanner.gif" height="107" width="800">
    </div>
    <div id="TopBannerRadius">
       <img src="http://chris.lohse.org/emssc/headernavcurve.gif" height="19" width="38">
    </div>
    <div id="navTopBannerLinks">
       <p>blahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
    </div>
    <div id="spacerbox">
    </div>
    <div class="content">
    <h1>Big Goings on at EMSSC</h1>
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.  <br><br>
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.  <br><br>
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.  <br><br>
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.  <br><br>
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.  <br><br>
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.
        This is where the center content would be if this were a real page.  <br><br>
    </div>
    <div class="content">
        <h2>More News--Not as Big as the Other Stuff</h2>
        <p>
            This is where some more content would be.
            This is where some more content would be.
            This is where some more content would be.
            This is where some more content would be.
        </p>
    </div>
    <div class="content">
       <a href="default.asp" title="This could be alink to somewhere">&lt; This could be alink to somewhere</a> &nbsp;::&nbsp;
       <a href="view_css.asp?layout=layout3" title="">And this could also be a link</a>
    </div>
    <div id="navAlpha">
        <div id="Heading">
            Topic Heading
        </div>
        [list]
            <li><a href="http://www.alistapart.com/" title="A List Apart: For People Who Make Websites">A List Apart</a></li>
            <li><a href="http://greasyskillet.org/" title="The Website of Dave Elfving">Greasy Skillet</a></li>
            <li><a href="http://royrosenow.com/" title="Sketches, illustrations, and Voodoo Bob">Roy Rosenow</a></li>
            <li><a href="http://s****yal.com/" title="A s****y weblog">S****yAl</a></li>
            <li><a href="" title="">Fake Link One</a></li>
            <li><a href="" title="">Nothing Here</a></li>
            <li><a href="" title="">Links Nowhere</a></li>
            <li><a href="" title="">Fake Link Four</a></li>
            <li><a href="" title="">Fifth Fake Link</a></li>
        </ul>
    </div>
    <div id="navBeta">
        <div id="Heading">
            Topic Heading
        </div>
        <p>
            I could put anything I want here and the box will grow and shrink properly.
            I just need to fix padding and stuff...I could put anything I want here and
            the box will grow and shrink properly.  I just need to fix padding and stuff...
            I could put anything I want here and the box will grow and shrink properly.
            I just need to fix padding and stuff...
        </p>
    </div>

</body>

Now, the style sheet.

Code:

body {
    color: #000;/* Color of body text */
    background: #fff; /* The background, but not the boxes */
    margin: 0; /* No margin */
    padding: 0; /* No padding */
    font: 11px verdana, arial, helvetica, sans-serif;
}
h1 {
    margin: 0 0 15px 0; /* Top, right, bottom, left */
    font-size: 28px;
    font-weight: 900;
    color: #369; /* EMSSC Blue */
}
h2 {
    font: bold 12px/14px verdana, arial, helvetica, sans-serif; /* Font size/line height, etc */
    margin: 0 0 5px 0; /* Top, right, bottom, left */
}
p {
    font: 11px/20px verdana, arial, helvetica, sans-serif; /* Font size/line height, etc */
    margin: 0 0 16px 0; /* Top, right, bottom, left */
    padding: 0;
}
.content p {
    margin: 0;
}

div#navTopBannerLinks p { /* eliminate direct child selector */
    color: #fff;
    font: 12px/19px verdana, arial, helvetica, sans-serif;
    margin: 0; /* Top, right, bottom, left */
    /* eliminate padding, vertical-align. No default padding,
        vertical-align doesn't apply to block elements */
}
a {
    color: #09c;
    font: 600 11px verdana, arial, helvetica, sans-serif; /* Combine font size, family, weight */
    text-decoration: none;
}
a:link {
    color: #09C;
}
a:visited {
    color: #07a;
}
a:hover {
    background: #eee;
}

/* All the content boxes belong to the content class. */
.content {
    min-width:120px; /* min-width will have to be implemented in Explorer using a hack */
    margin: 20px 180px 20px 150px; /* Top, right, bottom, left */
        /* eliminate border, no width */
    background: #fff;
        /* eliminate padding, no default */
}

div#spacerbox {
    min-width: 120px;
    height: 19px;
    margin: 86px 168px 20px 128px; /* Top, right, bottom, left */
    background: #f93;
}
div#navAlpha {
    position: absolute;
    width: 128px;
    top: 107px;
    left: 0;
    background: #f93; /* EMSSC Orange */
    z-index: 2;
    /* You don't need the voice-family hack,
       Explorer is in standards mode */
}
div#navAlpha div#Heading { /* No direct child */
    background: #369; /* EMSSC Blue */
    padding-left: 10px;
    height: 19px;
}
div#navAlpha ul {
    /* The links are wrapped in an unordered list
       so that you can control the spacing
       between the links, which is off a bit in IE */
    margin: 0;
    padding: 0;
    list-style: none; /* Turn off list bullets */
}
div#navAlpha li {
    padding: 3px;
}
div#navBeta {
    position: absolute;
    top: 107px;
    right: 0;
    background: #f93; /* EMSSC Orange */
    z-index: 2;
    width: 168px;
}

div#navBeta p {
    padding-left: 10px;
    padding-right: 10px;
}
div#navBeta div#Heading {
    background: #369; /* EMSSC Blue */
    padding-left: 10px;
    height: 19px;
}
/* Redundant rule eliminated */

div#topBanner {
    position: absolute;
    width: 100%;
    height: 107px; /* Missing semi-colon */
    top: 0;
    left: 0;
    background: url('http://chris.lohse.org/emssc/topbannerbleed.gif') repeat-x; /* Combine background rules */
    z-index: 2;
}
div#TopBannerRadius {
    position: relative;
    width: 38px;
    /*height:19px*/
    top: 70px;
    left: 300px;
    /*background-image: url('topbannerbleed.gif');*/
    /*background-color:#000;*/
    z-index: 12;
}
div#navTopBannerLinks {
    position: absolute;
    height: 19px;
    background: #000;
    top: 70px;
    right: 0;
    left: 338px;
    z-index: 12;

       /*Until I added this, IE was making the box taller
           That invokes "Layout" in IE, which is a fix
           for lots of common positioning, and dimension-related bugs.
           http://msdn.microsoft.com/library/de...ie20050831.asp
       */
}

Ok, I've done my best to comment the changes that I made to your code. First thing you'll notice is that I've cleaned it up quite a bit.

Of course, with most things IE, what's wrong rarely makes sense. I removed the relative positioning from most of the elements that make up the center column. Sometimes when certain bits of CSS come together, IE just stops applying *any* margin at all, and that was the bulk of the problem with the overlapping. To work-around this, you can apply a relative position and give the top property a value.

What else? Ah, you also applied the left and right properties together to imply width, which is why the rounded black bar looked OK in Firefox, but failed in IE. To fix this in IE, you apply a proprietary expression. Expressions allow you to make use of JavaScript from your stylesheet, I added a "body" id name to the <body> element, so I could reference its offsetWidth. Once I have the width of the <body> element, I just subtract from that the length that element is offset from the left.

The last thing I did to make things easier cross-browser was to structure that list of links in the left column in an unordered list. The spacing between links was different between IE and Firefox, placing all of those in a list let me control that spacing.

Anyway, compare this with your original and you should see what's happening. I hope this is helpful to you, please let me know if I can be of further help.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html