space above H2 in ie

[unclecurio]

Okay, I'm sure this is rookie cross-browser stuff but I can't seem to turn up an answer to the problem so I'm hoping someone here can help!

<div id="sidebar">
<h2>Navigation</h2>
Some links go here
</div>

Now, I've styled the h2s thus...

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 5px;
    width: 215px;
    float: left;
    display: block;
    height: 25px;
    background-image: url(siteimages/backdrop-side-h2.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0px;

And the containing sidebar div thus...

sidebar1 {
    float: left; 
    width: 220px;
    padding: 0px;
    margin: 0px;
}

All is well in pretty much every browser - the H2 with it's backdrop sits snugly at the top on the sidebar DIV. However, in IE, there is a large gap above it which I can't work out how to resolve.

This is driving me slightly nuts - can anyone suggest a reason for this?

 

[surreypcsupport]

Okay, I'm sure this is rookie cross-browser stuff but I can't seem to turn up an answer to the problem so I'm hoping someone here can help!

<div id="sidebar">
<h2>Navigation</h2>
Some links go here
</div>

Now, I've styled the h2s thus...

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 5px;
    width: 215px;
    float: left;
    display: block;
    height: 25px;
    background-image: url(siteimages/backdrop-side-h2.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0px;

And the containing sidebar div thus...

sidebar1 {
    float: left; 
    width: 220px;
    padding: 0px;
    margin: 0px;
}

All is well in pretty much every browser - the H2 with it's backdrop sits snugly at the top on the sidebar DIV. However, in IE, there is a large gap above it which I can't work out how to resolve.

This is driving me slightly nuts - can anyone suggest a reason for this?

Is the page content contained within a table? If you add the attribute topmargin=0 to the top level table it may well solve the problem although topmargin is unsupported in xhtml 1.0.

 

[unclecurio]

Thanks for the reply but no, the whole thing is done in DIVs. This is really driving me nuts!

 

[BlueBoden]

There are some basic more or less undefined rules you must follow, or keep in mind with cross-platform/browser compatibility.

The space above your heading, is likely removed by removing the margin on the tag, if that doesn't work directly, try something like margin-top: 0 !important; The !important rule will overwrite other declarations, but try not to rely to much on it, as it doesn't seem to overwrite other properties declared with !important.


I usually reset the margin/paddings for everything with below, and then declare them later. Because i likely need to change them anyway.

* {
margin: 0;
padding: 0;
}

Also be sure to include a valid doctype, some margin/padding issues can occur when browsers are switched into backwards compatibility mode, the doctype should be placed on the first line in the site/document.

The topmargin attribute is non-standard, and should not be used. Even if it where standard, it would have been replaced by better alternatives by now, such as CSS Properties.

You do not need to apply display: block; on h2 elements, as the h1-h6 elements are block-level elements by default. Also note that any floated elements automatically becomes block-level elements, so you do not need to set inline elements to block when floating them.

 

[unclecurio]

Thanks for the reply - that's a feature I wasn't aware of before.

I finally discovered the problem stemmed from the fact that the file I was editing had been created in Dreamweaver originally and had an 'if IE' conditional attribute that whacked on an extra 30 pixels of padding!

The moral is always beware of other people's code!

 

[Scorpyan]

And avoid dreamweaver graphical editing!

 

[anurdh65]

#menu {
width: 12em; /* set width of menu */
background: #eee;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

 

[hannah123]

Reply

Use padding=0 there