Question

I have the following HTML code:

<div id="event_create">
    <img src="WEB-INF/images/Classifieds/create_blurred_135x135.png"
        name="createbutton"
        onmouseover="buttondown('createbutton')"
        onmouseout="buttonup('createbutton')"
        onclick="buttonclick('createbutton')"
        alt="Create Classified Image"
        class="cameo">
    <h2 class="cameo_heading" >Create Ad</h2>
    <ul type="circle">
        <li class="cameo_content">Content goes here</li>
        <li class="cameo_content">Content goes here</li>
        <li class="cameo_content">Content goes here</li>
        <li class="cameo_content">Content goes here</li>
    </ul>
</div>

which is supported by the following CSS:

#event_create {
    width:100%;
    height:143px;
    border: 1px solid green;
    background-color: red;
}

.cameo {
    float:left;
    margin-left:4px;
    margin-top:4px;
    border:1px solid black;
}

.cameo_heading {
    margin-left: 200px;
    margin-top: 3px;
    font-size:1.1em;
    color:gray;
}

.cameo_content {
    margin-left: 200px;
    font-size:12px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    line-height:1.2em;
} 

ul {
    list-style-type:circle;
    padding-left: 0;
    margin-left: 0;
    border: 1px dashed black;
} 

li {
    padding-left: 7px;
    margin-bottom: 5px;
}

The code displays properly in Firefox and Safari. However, IE pads the area under the image with extra space and throws the entire design off. The image is actually 135 x 135 pixels. Can someone please help?

Answer 1

Standard operating procedure for consistent cross-browser Website design involves always doing two things:

1. Declare a DOCTYPE. This forces browsers (IE in particular) into so-called “standards compliant” mode instead of quirks mode (both euphemisms); and
2. Use a reset CSS such as meyerweb’s or Yahoo’s to get rid of browser differences in default settings for borders, padding, margins and so on.