margins in IE6

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm working on a website with a similar feel to this: /

What I have so far can be viewed here: /

(I'm going to change the colours, honest!)

This appears to render identically in FF 2, Opera 9, Safari 3.0.3 and
SeaMonkey 1.1.5 (all Windows), with each of these browsers applying
margin to the top of the h2 element at the beginning of the content, and
to the bottom of the p element at the end of the content, creating a
nice bit of whitespace between the subnav and the footer respectively.
However, for some reason, IE5 and IE6 do not apply this margin, so the
text is directly adjacent to the subnav and the footer.  Is this because
I have done something to trigget an IE bug?

I've floated both the navbar and subnav divs left and given them a width
of 100% to prevent them from collapsing once I floated the a elements
inside -- I then clear these with the following div, mbody.

I have given mbody a minimum height to prevent the container from
becoming too short on pages with sparse content. In FF etc., mbody
appears to be 300pixels high no matter what, with the floated sidebar
and content divs growing out of it, but in IE5/6, mbody stretches to
contain the divs. Why is this? I've demonstrated this by putting a pinky
background colour on the mbody div.

Finally, I saw this technique somewhere as a way to have a graphical
logo while still having a h1 element for SEO purposes:

<h1><a href="homepage"><span>My company name</span></a></h1>

You put display:block on the a, give it a fixed pixel width to match
your logo image, then use the logo as a background for the a element.
You then put a display:none on the a span to hide the text.

As well as this, I've noticed that some sites use text-indent: -9999px
on the span instead of display:none but this has the side effect that
the dotted border you get when clicking the logo in Firefox stretches
all the way to the left edge of the viewport (although the hotspot is
still constrained to the image).

Are any of you using these techniques? Are they considered OK?

Re: margins in IE6

Mark wrote about a top margin of h2 and a bottom margin of p:

Quoted text here. Click to load it

Why would it? You didn't specify any H2 or P margin in your CSS. The CSS  
recommandation doesn't require any specific default (or user) CSS.

Quoted text here. Click to load it

No, there're no bug involved here. However, it doesn't matter much. If you  
*really* want to have the same layout in all browsers (without user CSS),  
then, you should explicitly specify margins.

Quoted text here. Click to load it

But you fixed the height to 300px.
To avoid problems, use 'min-height', not 'height'.
(IE may not support it, because IE isn't conforming to the CSS  

Quoted text here. Click to load it

It's a CSS hack. Typical of people who think that author's CSS (without  
user CSS) is the only way to see/render/use HTML documents.
As all CSS hacks, it works only for two or three extremely specific cases,  
but is broken in the general case.
For example, when I activate one of the accessibility layout user CSS of  
my browser (Opera), background images are disabled (by an !important rule)  
so that I see a hole in place of your logo.
Is it a SEO? Not sure, but I could think that some hypotetical search  
engine could give a low rank to background images as they're decorations,  
but not part of the content of a site. A CSS-unaware search engine may  
simply ignore the image as it's not contained in the HTML code.
To be SE friendly, please, just write normal non-obfuscated HTML code, as  
people did before SE existed. SE were designed to work with existing code.  
No need to adopt a specific coding style (but POSH) to be viewed by SE.

Logically, the logo isn't a background image, it's part of the content of  
the page, so you should specify it as an image, with the IMG element.

e.g. Use:

<h1><img src="path/to/logo" alt="My company name"></h1>

Most of the problems are due to the fact that you lie by claiming it's a  
background image.

Quoted text here. Click to load it

The text-indent hack surely is much worse.

If you've a question that doesn't belong to Usenet, contact me at  

Re: margins in IE6

André Gillibert wrote:
Quoted text here. Click to load it

That's why there is a height property for IE, then a

html>body #mbody {
    height: auto;
    min-height: 300px;

rule for conforming browsers.

Quoted text here. Click to load it

But surely a search engine crawler will just see:

My company name

in a h1 element, which is about as POSH as you can get (plus I'd expect
a textual h1 element to have more SEO weight than the text in an img alt

Quoted text here. Click to load it

That is what I see on a lot of sites and and I don't disagree with your
argument. At the same time, the h1 'hack' (as you call it) seems to be
gaining ground. I've just noticed that it's used on the O'Reilly home
page (

<h1>O&#8217;Reilly Media</h1>

#header h1 {
     margin:0 0 0 180px;
     background:url(/images/oreilly/oreilly_large.gif) no-repeat 0 0;

I'm not claiming is any kind of authority on HTML, but
presumably the developers of the site aren't total hacks either, and
there must be some advantage to doing it this way?

Re: margins in IE6

Mark wrote:

Quoted text here. Click to load it

Yes, this is becoming increasingly annoying.
Back in time, in 2004, I could right-click on any non-background image and  
save it on disk, copy its address, open it in a new window, reload it,  
copy it to clipboard, or see its properties, etc.

I see more and more sites displaying those "fake" images.
My favorite browser don't provide such a context menu for background  
images. (I'll fill a wish request to the development team of this browser).

Quoted text here. Click to load it

No, it isn't as POSH as you can get, because there're these DIV and SPAN  
things that are semantically non-sense.
SPAN can usually be safely ignored, which is a Good Thing(TM), but DIV  
render a web page very difficult to interpret by alternative non-CSS  
renders and processors. Must a DIV be interpreted as a wrapper that must  
be ignored or as enclosing an entity very separate from the sibling  
elements? It depends on the DIV. I cannot find a way to automate that.

Anyway, this (most probably) doesn't affect (current) SE.

Quoted text here. Click to load it

This isn't proven, but it's possible that primitive SE ignore ALT  
Anyway, condemning your logo to disappear or be lower ranked on images SE  
to hypotetically improve the visibility of your company name on HTML SE,  
all that based on very hypotetical unproven knowledge of SE, is not  
necessarily good. Most probably, your company name appears elsewhere in  
the page, so that its presence at the top of the site isn't that much  
useful for SEO.

The point is that you've very tiny arguments to prove that it's a SEO. It  
could be as well a SE pessimization.
Just stick to one guideline: Don't try to be clever with SE. Write normal  
HTML, and you'll be indexed correctly.
I noticed that the current evolution with SE is to *penalize* pages that  
try to be clever (e.g. by adding keywords written blank on blank and  
similar hacks to improve their page rank), while they improve their  
indexation of normal pages. Don't go on the side of spammers!

Quoted text here. Click to load it

Excerpt from this page:
| <link rel="stylesheet" rev="stylesheet"
|  href=" "
| type="text/css"/>

This rev relation is clearly wrong.
Is this enough to convince you that their XHTML design isn't a reference?
Moreover XHTML Transitional served as text/html is a bad choice.

When doing a weird thing, you must understand the reasons for doing it.  
The argument: "Others do it, so it's right." will lead to the spread of  
bad design. (Bad design has already been spread in 99.99% of the web).

(BTW, the text-indent:-9999px is very ugly)

Strangely, at < I see:
| <h1><a target=_top href=" "><img
| src="/images/oreilly/oreilly.gif" width="228"
| height="67" alt="O'Reilly" /></a></h1>

Which isn't consistent with the hack used for the logo of the main page.

Quoted text here. Click to load it

Invalid tag soup is considered OK on the web by almost all web developers.

If you've a question that doesn't belong to Usenet, contact me at  

Re: margins in IE6

André Gillibert wrote:
Quoted text here. Click to load it

You've convinced me here. I think I will just stick to an <img> element
inside a h1.

This is much easier than doing all the CSS for the <h1> hack.


Site Timeline