PDA

View Full Version : Tables, borders and browsers


gregfindley.com
04-28-2006, 03:10 PM
Hi all,

Just putting together a quick layout design for a site, I've used tables, when I look at the site in IE it looks fine and how I want it, when I check it in Firefox the tables where I have a white border it shows a nasty shadow effect..

www.kentcrusaders.co.uk

Does anyone know how I can adjust this so appears in MF as in IE??

Thanks,
Greg

dthomsen8
04-28-2006, 03:23 PM
Hi all,

Just putting together a quick layout design for a site, I've used tables, when I look at the site in IE it looks fine and how I want it, when I check it in Firefox the tables where I have a white border it shows a nasty shadow effect..

www.kentcrusaders.co.uk

Does anyone know how I can adjust this so appears in MF as in IE??

Thanks,
Greg

I think your difficulties are with "proprietary" parameters, and specifically border color, but here are the w3c.org validation results:


Below are the results of attempting to parse this document with an SGML parser.

1. Error Line 9, column 82: there is no attribute "LEFTMARGIN" .

..."#000000" alink="#000000" leftmargin="0" topmargin="0">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.


2. Error Line 9, column 96: there is no attribute "TOPMARGIN" .

...k="#000000" leftmargin="0" topmargin="0">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.


3. Error Line 10, column 26: there is no attribute "HEIGHT" .

<table width="681" height="560" border="0" align="center" cellpadding="0" cellsp

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.


4. Error Line 12, column 88: required attribute "ALT" not specified .

...tfadeout.gif" width="12" height="598"></td>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


5. Error Line 13, column 71: required attribute "ALT" not specified .

...es/logo.gif" width="235" height="113"><a href="http://www.gregfindley.com" ta

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


6. Error Line 13, column 192: required attribute "ALT" not specified .

..." width="420" height="113" border="0"></a></td>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


7. Error Line 14, column 89: required attribute "ALT" not specified .

...tfadeout.gif" width="14" height="598"></td>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


8. Error Line 19, column 49: there is no attribute "BACKGROUND" .

...d width="653" height="19" background="images/navbar.gif"><table width="654" b

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.


9. Error Line 59, column 106: there is no attribute "BACKGROUND" .

...dding="0" cellspacing="0" background="images/resultsbar.gif">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.


10. Error Line 75, column 127: there is no attribute "BORDERCOLOR" .

...ding="5" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#EFEFEF">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.


11. Error Line 86, column 194: required attribute "ALT" not specified .

...eclubmark.gif" width="85" height="98"></font></div></td>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


12. Error Line 91, column 113: required attribute "ALT" not specified .

...agetest.jpg" width="316" height="225"></td>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

dthomsen8
04-28-2006, 03:30 PM
The effect you mention is in Firefox, Opera and Netscape, but not MSIE, confirming my suggestion that the problem lies in "proprietary" parameters, specifically those recognized by Microsoft, but not by other browsers.

Another suggestion is to try a more liberal DOCTYPE, such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Let me know how it turns out.

domedia
04-28-2006, 04:49 PM
Correct, the attributes 'bordercolor' and 'height' is not valid for table tags.
With your design it looks pretty easy to fix though, since the tables are on a white background, you don't really need any border at all.
So for example on the table you've got with the loog in it, use this table tag instead:
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="328">

gregfindley.com
04-28-2006, 07:35 PM
Hi,

Thanks for your replies guys,

Have tried swiching the page doc type to what you suggested, all that done was added a top margin on the page?

I need the margin as thats how I wanted the box and image seperated, tried swicthing off the border colour but that doesn't help either?

Any more suggestions?

Thanks!
Greg

domedia
04-28-2006, 08:14 PM
To have margins around an image, add margins to the image
CSS:.yourimage {display: block; margin: 3px auto;}
HTML: image.gif

Why would you keep the bordercolor if you know it's not valid html and won't work Firefox?
Actually, you don't need a table around the image at all. You just want a box, use a DIV. Tables are for columns/rows.

dthomsen8
04-28-2006, 08:18 PM
Hi,

Thanks for your replies guys,

Have tried swiching the page doc type to what you suggested, all that done was added a top margin on the page?

I need the margin as thats how I wanted the box and image seperated, tried swicthing off the border colour but that doesn't help either?

Any more suggestions?

Thanks!
Greg

Did you fix the problem? The sides look the same to me.

You can easily get rid of the warning messages about missing alt parameters by specifying a description for each image. This is mainly a way to make the site more accessible to the visually impaired, but it does provide a yellow box "hint" in MSIE, but not other browsers.

Always run your pages through www.w3.org HTML and CSS validation, and review what they report. I am not a fanatic about getting rid of all the warning messages, but the errors definitely need correction.

Oh, do you have a robots.txt file for your sites? You should, it improves your search engine results and can keep your images out of Google's image results. Search on "robots.txt" in Google and you will get the information you need.