Big Breaks

[jtyoungs]

On the fourcp website i made there is a couple of big breaks going on under the header in IE6. Can anyone tell me what is wrong?

one of the pages that does it is

http://www.fourcp.co.uk/print.html

cheers

[welshstew]

I'm getting a 404?

[jtyoungs]

sorry was using the links from the last website i had written down. Should work fine now.

[karinne]

The problem is with your #rightside div ...

If it's only for the image, why don't you apply it as a background to #content instead?

[welshstew]

Your heading is wrapped in a H2 tag (why, I don't know as you are using an image and no text) and then you have three breaks.

Could this be something to do with it?

[jtyoungs]

karinne seems more likely. will have to change layout then chore! alot of pages to check.

I always wrap them in h tags so the alt shows in that format. for screen readers and if image goes a missing

Thanks all!

[Stuart]

H tags are only for headers. Using them to "host" content is not a good idea since it's actually invalid

[jtyoungs]

it validated for me It's a good habit to have i think. If you have a header with a logo. you set the header as the background image in css and overlay the logo. Then put the logo in header tags because it is the heading of the header and the website.

[welshstew]

Originally Posted by jtyoungs

it validated for me It's a good habit to have i think. If you have a header with a logo. you set the header as the background image in css and overlay the logo. Then put the logo in header tags because it is the heading of the header and the website.

If you set the logo as the background image in css then why are you again wrapping that in header tags?

to me that sounds like you are doing something like the following (simplified):
<h1><h2></h2></h1>

That sort of nesting is a mis-use of structural markup.

You should only nest H3 inside of H2. However, your logo, the most important (and therefore H1), should not be nested in this way.

[Marc]

I take it you don't realize that the H tags are heavily relied upon by search engines?

[Aso]

An ideal solution to graphic replacement for headings is to use

HTML: Select all

<h1>Four CP Digital Print Center</h1>

Then in the css

HTML: Select all

h1 {
display: block;
height: 27px;
background: url('images/banner.jpg') no-repeat;
text-indent: -5000px;
}

This way, the search engines can read it, it degrades nicely without styles, and most importantly, it will work for screen readers.

[welshstew]

Originally Posted by aso186

An ideal solution to graphic replacement for headings is to use

HTML: Select all

<h1>Four CP Digital Print Center</h1>

Then in the css

HTML: Select all

h1 {
display: block;
height: 27px;
background: url('images/banner.jpg') no-repeat;
text-indent: -5000px;
}

This way, the search engines can read it, it degrades nicely without styles, and most importantly, it will work for screen readers.

Quite agree, although it won't work for the css on / images off scenario.

For which you could use the Gilder / Levin Method of image replacement:
http://www.mezzoblue.com/tests/revis...e-replacement/
http://wellstyled.com/files/css-repl...example02.html
http://wellstyled.com/css-replace-text-by-image.html

You get some extra markup, but it will work with screen readers and fix the above scenario.