Pages display different in each browser, safari, firefox, IE |
Pages display different in each browser, safari, firefox, IE |
Zoee |
Apr 2 2008, 10:11 AM
Post
#1
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 2 2008, 10:58 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 |
Apr 2 2008, 11:10 AM
Post
#3
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 2 2008, 11:51 AM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 |
Apr 2 2008, 12:00 PM
Post
#5
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 2 2008, 12:20 PM
Post
#6
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 |
Apr 2 2008, 12:25 PM
Post
#7
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 IMGsCODE 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 |
Apr 2 2008, 12:59 PM
Post
#8
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 IMGsCODE 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 |
Apr 2 2008, 04:59 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Apr 3 2008, 01:55 AM
Post
#10
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 3 2008, 04:49 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Sorry, I got it all backwards.
|
Zoee |
Apr 3 2008, 07:52 AM
Post
#12
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 3 2008, 08:00 AM
Post
#13
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
What is it you don't understand of the validator? Each error typically point to an appropriate page in the HTML Reference.
|
Zoee |
Apr 3 2008, 08:06 AM
Post
#14
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 3 2008, 08:11 AM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Apr 3 2008, 08:13 AM
Post
#16
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 3 2008, 08:18 AM
Post
#17
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Apr 3 2008, 08:23 AM
Post
#18
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Apr 3 2008, 08:28 AM
Post
#19
|
Member Group: Members Posts: 46 Joined: 26-March 08 Member No.: 5,294 |
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 |
Apr 3 2008, 08:36 AM
Post
#20
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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. |
Lo-Fi Version | Time is now: 23rd April 2024 - 06:00 AM |