Pages display different in each browser, safari, firefox, IE Options

[Zoee]

Some of my pages on my website are appearing differently with IE on windows and I cant figure out why. On the pages linked from the map on this page http://www.farmshopslincolnshire.co.uk/directory.html all the text is underlined when viewed in IE (only the "back to directory page" and "purchase premium listing" text is meant to be underlined).

Also in Firefox on Mac the map on the directory.html page doesnt display as a whole map each quarter sits one under the other.

I cant find anything in my code that is causing this and I could do with fixing it.

Thanks


Zoee

[Darin McGrew]

I recommend that you start by fixing the markup errors reported by our online validator.

Glancing at your markup, it looks like the map images total to 291px wide. If there is more than 9px of margin/padding, then they won't fit side-by-side in the 300px wide table cell.

[Zoee]

I recommend that you start by fixing the markup errors reported by our online validator.

Glancing at your markup, it looks like the map images total to 291px wide. If there is more than 9px of margin/padding, then they won't fit side-by-side in the 300px wide table cell.

So the map width/height needs to be the same as the table size?

Also is there a quick way to add all those missing bits of code or do I just have to go through and add it all, and am I able to access that validator myself?

Thank you!

Zoee

[Darin McGrew]

So the map width/height needs to be the same as the table size?

Not necessarily. The map width plus any margin/padding needs to be less than or equal to the space you've given it. But different browsers us different default margin/padding.

Is there any reason not to use a single map, rather than splitting it into four pieces?

Also is there a quick way to add all those missing bits of code or do I just have to go through and add it all, and am I able to access that validator myself?

Sure, you can access the validator yourself. There's a link at the bottom of the page.

HTML Tidy may help repair markup errors, but I've never used it. I just fix my markup errors myself.

[Zoee]

So the map width/height needs to be the same as the table size?

Not necessarily. The map width plus any margin/padding needs to be less than or equal to the space you've given it. But different browsers us different default margin/padding.

Is there any reason not to use a single map, rather than splitting it into four pieces?

Also is there a quick way to add all those missing bits of code or do I just have to go through and add it all, and am I able to access that validator myself?

Sure, you can access the validator yourself. There's a link at the bottom of the page.

HTML Tidy may help repair markup errors, but I've never used it. I just fix my markup errors myself.

thanks, The reason its split in to 4 is because each section of the map is a link to make finding a farm shop in each area faster. If you can suggest a better way to do this I will certainly consider it?

with the validator I checked the code it told me to correct and most of it that it said to correct already is...

Zoee

[Darin McGrew]

Please see the FAQ entry How do I link different parts of an image to different things?

If the markup was correct, then the validator wouldn't report errors.

[Darin McGrew]

CODE

Error: there is no attribute [...] for this element (in this HTML version)

You're using non-standard presentational markup. Use CSS instead.

CODE

Error: required attribute alt not specified

You need to provide an alt attribute. See Use of ALT texts in IMGs

CODE

Error: element a not allowed here; possible cause is an inline element containing a block-level element

You can't nest one a element inside another. You forgot a closing </a> tag earlier.

[Zoee]

CODE

Error: there is no attribute [...] for this element (in this HTML version)

You're using non-standard presentational markup. Use CSS instead.

CODE

Error: required attribute alt not specified

You need to provide an alt attribute. See Use of ALT texts in IMGs

CODE

Error: element a not allowed here; possible cause is an inline element containing a block-level element

You can't nest one a element inside another. You forgot a closing </a> tag earlier.

Ive downloaded HTML tidy and ran
tidy -f errs.txt -m directory.html to get it to fix the file and save the errors but I get this:
HTML Tidy: unknown option: f
HTML Tidy: unknown option: r
HTML Tidy: unknown option: r
HTML Tidy: unknown option: s
HTML Tidy: unknown option: .
HTML Tidy: unknown option: t
HTML Tidy: unknown option: x
HTML Tidy: unknown option: t
Error: Can't open "directory.html"

I'll take a look at that map solution at some point, looks complicated though!

Zoee

[pandy]

It isn't, but do what Darin suggested and split the image in 4 pieces then so you can línk them normally.

Don't know about Tidy switches, but i know that if you use the validator and correct the errors yourself you might learn something.

[Zoee]

It isn't, but do what Darin suggested and split the image in 4 pieces then so you can línk them normally.

Don't know about Tidy switches, but i know that if you use the validator and correct the errors yourself you might learn something.

the image already is in 4 pieces and on firefox they don't line up as they do in other browsers.

thanks


Zoee

[pandy]

Sorry, I got it all backwards.

[Zoee]

the pages that need the most fixing are these:

http://www.farmshopslincolnshire.co.uk/dir...ynorthwest.html
http://www.farmshopslincolnshire.co.uk/dir...ynortheast.html
http://www.farmshopslincolnshire.co.uk/dir...ysouthwest.html
http://www.farmshopslincolnshire.co.uk/dir...ysoutheast.html

I used a Div tag to create the scroll boxes I dont know if perhaps I should use some different code for that, when I put the page into the html validator it had lots of complicated errors...

Zoee

[Frederiek]

What is it you don't understand of the validator? Each error typically point to an appropriate page in the HTML Reference.

[Zoee]

What is it you don't understand of the validator? Each error typically point to an appropriate page in the HTML Reference.

For example:

"... " align="center" bordercolor="#FFFFFF" bgcolor="#238520">
^
Error: there is no attribute bordercolor for this element (in this HTML version)"

This is telling me that there is no bordercolor attribute and I need to add one? its there already...

[pandy]

No, it's telling you there is no such attribute in HTML. To be exact it says there is no such attribute in the version of HTML that you use. But that is true for all versions. It's an old IE extension IIRC. Use CSS.

[Zoee]

No, it's telling you there is no such attribute in HTML. To be exact it says there is no such attribute in the version of HTML that you use. But that is true for all versions. It's an old IE extension IIRC. Use CSS.

So do I need to correct that piece of HTML and if so, how?

[Frederiek]

Effectively, bordercolor is not defined in the HTML version. I couldn't find it anywhere in the specs at W3C. Beside on that same line, you set the border to zero.

Anyway, as Darin already suggested, you'd better apply the border color through CSS, eg:

table {
border: solid 1px #ffffff;
}

[Frederiek]

The goal of CSS is to seperate structure (the HTML) from presentation (the CSS). So you'd have to get rid of all presentational markup and define them in style rules.

[Zoee]

So if a add a style for the table with all the styles for my fonts in my html I can delete bgcolor, border and align and add from where it is now and add it to the style at the top of my code instead?

What about when my tables have different bgcolors?

[Frederiek]

Yes. For diffrent background colors on different tables, you can give such a table a unique ID or a class. An ID can only be used once, but a class can be applied to several elements (in this case tables) at the same time.

See the FAQ entry Where can I learn about CSS?.
And I'd add Web Design References: Cascading Style Sheets.