The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Pages display different in each browser, safari, firefox, IE
Zoee
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 2 2008, 10:58 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,986
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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post Apr 2 2008, 11:10 AM
Post #3


Member
***

Group: Members
Posts: 46
Joined: 26-March 08
Member No.: 5,294



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

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 2 2008, 11:51 AM
Post #4


WDG Member
********

Group: Root Admin
Posts: 7,986
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post Apr 2 2008, 12:00 PM
Post #5


Member
***

Group: Members
Posts: 46
Joined: 26-March 08
Member No.: 5,294



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 2 2008, 12:20 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 7,986
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
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 2 2008, 12:25 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 7,986
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 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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post Apr 2 2008, 12:59 PM
Post #8


Member
***

Group: Members
Posts: 46
Joined: 26-March 08
Member No.: 5,294



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 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 2 2008, 04:59 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,921
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. happy.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post Apr 3 2008, 01:55 AM
Post #10


Member
***

Group: Members
Posts: 46
Joined: 26-March 08
Member No.: 5,294



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2008, 04:49 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,921
Joined: 9-August 06
Member No.: 6



Sorry, I got it all backwards. blush.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2008, 08:00 AM
Post #13


Programming Fanatic
********

Group: Members
Posts: 4,125
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post Apr 3 2008, 08:06 AM
Post #14


Member
***

Group: Members
Posts: 46
Joined: 26-March 08
Member No.: 5,294



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2008, 08:11 AM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,921
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post Apr 3 2008, 08:13 AM
Post #16


Member
***

Group: Members
Posts: 46
Joined: 26-March 08
Member No.: 5,294



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2008, 08:18 AM
Post #17


Programming Fanatic
********

Group: Members
Posts: 4,125
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;
}


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2008, 08:23 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 4,125
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zoee
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2008, 08:36 AM
Post #20


Programming Fanatic
********

Group: Members
Posts: 4,125
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th April 2014 - 08:47 PM