margins in IE6

[Mark]

Hi

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

http://www.oreilly.com/catalog/9780596515836/

What I have so far can be viewed here:

http://www.lester1.eclipse.co.uk/test/

(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?

 

[André Gillibert]

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

However, for some reason, IE5 and IE6 do not apply this margin, so the
text is directly adjacent to the subnav and the footer.

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.

Is this because I have done something to trigget an IE bug?

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.

I have given mbody a minimum height to prevent the container from
becoming too short on pages with sparse content.

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
recommandation)

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.

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.

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).

The text-indent hack surely is much worse.

 

[Mark]

André Gillibert wrote:

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
recommandation)

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

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

rule for conforming browsers.

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.

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
attribute).

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.

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 (www.oreilly.com):

<h1>O’Reilly Media</h1>

#header h1 {
width:293px;
height:98px;
margin:0 0 0 180px;
padding:0;
background:url(/images/oreilly/oreilly_large.gif) no-repeat 0 0;
font-size:0;
text-indent:-9999px;
text-align:center;
}

I'm not claiming www.oreilly.com 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?

 

[André Gillibert]

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 (www.oreilly.com):

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).

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

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.

(plus I'd expect a textual h1 element to have more SEO weight than the
text in an img alt attribute).

This isn't proven, but it's possible that primitive SE ignore ALT
attributes.
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!

<h1>O’Reilly Media</h1>

#header h1 {
width:293px;
height:98px;
margin:0 0 0 180px;
padding:0;
background:url(/images/oreilly/oreilly_large.gif) no-repeat 0 0;
font-size:0;
text-indent:-9999px;
text-align:center;
}

I'm not claiming www.oreilly.com 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?

<http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0>
Excerpt from this page:
| <link rel="stylesheet" rev="stylesheet"
| href="http://www.oreillynet.com/styles/all.css"
| 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 <http://www.oreilly.com/catalog/9780596515836/> I see:
| <h1><a target=_top href="http://www.oreilly.com"><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.

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

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

 

[Mark]

André Gillibert wrote:

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.

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.

Thanks.