Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Pages display different in each browser

Posted by: Zoee Apr 2 2008, 10:11 AM

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

Posted by: Darin McGrew Apr 2 2008, 10:58 AM

I recommend that you start by fixing the http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.farmshopslincolnshire.co.uk%2Fdirectory.html&warnings=yes 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.

Posted by: Zoee Apr 2 2008, 11:10 AM

QUOTE(Darin McGrew @ Apr 2 2008, 04:58 PM) *

I recommend that you start by fixing the http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.farmshopslincolnshire.co.uk%2Fdirectory.html&warnings=yes 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

Posted by: Darin McGrew Apr 2 2008, 11:51 AM

QUOTE(Zoee @ Apr 2 2008, 09:10 AM) *
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?

QUOTE(Zoee @ Apr 2 2008, 09:10 AM) *
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.

Posted by: Zoee Apr 2 2008, 12:00 PM

QUOTE(Darin McGrew @ Apr 2 2008, 05:51 PM) *

QUOTE(Zoee @ Apr 2 2008, 09:10 AM) *
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?

QUOTE(Zoee @ Apr 2 2008, 09:10 AM) *
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

Posted by: Darin McGrew Apr 2 2008, 12:20 PM

Please see the FAQ entry http://www.htmlhelp.com/faq/html/images.html#imagemap

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

Posted by: Darin McGrew Apr 2 2008, 12:25 PM

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 http://www.htmlhelp.com/feature/art3.htm

CODE
Error: element a not allowed here; possible cause is an inline element containing a block-level element
You can't nest one http://www.htmlhelp.com/reference/html40/special/a.html element inside another. You forgot a closing </a> tag earlier.

Posted by: Zoee Apr 2 2008, 12:59 PM

QUOTE(Darin McGrew @ Apr 2 2008, 06:25 PM) *

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 http://www.htmlhelp.com/feature/art3.htm

CODE
Error: element a not allowed here; possible cause is an inline element containing a block-level element
You can't nest one http://www.htmlhelp.com/reference/html40/special/a.html 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

Posted by: pandy Apr 2 2008, 04:59 PM

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. happy.gif

Posted by: Zoee Apr 3 2008, 01:55 AM

QUOTE(pandy @ Apr 2 2008, 10:59 PM) *

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. happy.gif


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

thanks


Zoee

Posted by: pandy Apr 3 2008, 04:49 AM

Sorry, I got it all backwards. blush.gif

Posted by: Zoee Apr 3 2008, 07:52 AM

the pages that need the most fixing are these:

http://www.farmshopslincolnshire.co.uk/directorynorthwest.html
http://www.farmshopslincolnshire.co.uk/directorynortheast.html
http://www.farmshopslincolnshire.co.uk/directorysouthwest.html
http://www.farmshopslincolnshire.co.uk/directorysoutheast.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

Posted by: Frederiek Apr 3 2008, 08:00 AM

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

Posted by: Zoee Apr 3 2008, 08:06 AM

QUOTE(Frederiek @ Apr 3 2008, 02:00 PM) *

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

Posted by: pandy Apr 3 2008, 08:11 AM

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.

Posted by: Zoee Apr 3 2008, 08:13 AM

QUOTE(pandy @ Apr 3 2008, 02:11 PM) *

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?

Posted by: Frederiek Apr 3 2008, 08:18 AM

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;
}

Posted by: Frederiek Apr 3 2008, 08:23 AM

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.

Posted by: Zoee Apr 3 2008, 08:28 AM

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?

Posted by: Frederiek Apr 3 2008, 08:36 AM

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 http://htmlhelp.com/faq/html/docs.html#about-css.
And I'd add http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html.

Posted by: Zoee Apr 3 2008, 08:39 AM

I could do with a validator that fixes most of the HTML itself, I'm trying to work my way through most of the items but I dont understand the majority of it!

Posted by: pandy Apr 3 2008, 08:39 AM

It gets even better. If you use a linked style sheet you can use the same style sheet for your whole site. Or serveral sites, should you want to.
See http://www.htmlhelp.com/reference/css/style-html.html and http://www.htmlhelp.com/reference/css/structure.html .

Posted by: pandy Apr 3 2008, 08:40 AM

QUOTE(Zoee @ Apr 3 2008, 03:39 PM) *

I could do with a validator that fixes most of the HTML itself, I'm trying to work my way through most of the items but I dont understand the majority of it!


You will when you are done. smile.gif

Tools that "fix" things can't fix them so it looks like you want.

Posted by: Zoee Apr 3 2008, 08:47 AM

Rather than go through and fix everything that isnt making a difference at the moment I just need to get rid of the underline that I get under all the text on those 4 pages when viewed in IE.

Thanks

Zoee

Posted by: pandy Apr 3 2008, 08:57 AM

Frederiek, I fear a point is missed here. smile.gif

Posted by: Frederiek Apr 3 2008, 09:11 AM

Did I, Pandy? I don't understand.
Anyway, as everyone around here knows, I'm on Mac, surfing with Safari, my favorite.

The page directorysouthwest.html has an error of a missing closing tag for <a> on line 85. On the page directorysoutheast.html on line 74 there are several closing <a> errors. Close them properly, and it probably will solve the underline problem.

Posted by: pandy Apr 3 2008, 09:25 AM

No no! I meant I feel our attempts to inspire Zoee do the right thing isn't really working. happy.gif

Posted by: Zoee Apr 3 2008, 09:39 AM

I checked through the validator and changed everything, when I looked most of the errors are alts that are missing!

Posted by: Zoee Apr 3 2008, 09:54 AM

Now I need to fix the text, it looks a though return has been pressed twice between each line of text (on the same pages) though it hasnt, do I need to add something to the Style for that text?

Zoee

Posted by: Frederiek Apr 3 2008, 10:51 AM

See the why of ALT texts in the article http://www.htmlhelp.com/feature/art3.htm to which Darin already pointed you.

What do you mean by two returns in the text? Where (or which page) exactly?

Posted by: Zoee Apr 3 2008, 10:56 AM

on the same 4 directory pages, each line of text has a large gap before the next so it looks

like

this

instead of

like
this

Thanks

Zoee

Posted by: Zoee Apr 3 2008, 11:19 AM

Its just on IE though.

Zoee

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)