Table Background Image

[corban55]

Hi ALL,

I am a new web designer, and am having issues with my header image on the site I am working on. On some earlier IE browser, the header image does not appear in entirely. On mozilla, firefox, and new IE's it is fine.

The way the header image is setup is that I have it as a background image of a table, and the links are in seperate td's.

I would love to know:
1. Did I setup the table correctly
2. Is my css written correctly, is there a better way?

Thanks in advance,
Andrew

One of the webpages with the header on it is:

http://www.fx-strategy.com/new_site/strategy/index.html

The css that relates to this table is below:

body {
margin: 0;
padding: 0;
height:100%;
border:none;
background-image: url(../new_web_images/background_repeat.jpg);
background-repeat:repeat;
}

#Container {
position:relative;
margin-left: auto;
margin-right:auto;
width: 756px;
height: 100%;
background-color:#FFFFFF;
}

#Container_strategy {
position:relative;
margin-left: auto;
margin-right:auto;
width: 756px;
height: 100%;
background-color:#FFFFFF;
}

#menu {

position:relative;
background-image: url(/new_web_images/080307_header_02.gif);
background-repeat:no-repeat;
}

#menu td {

font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:700;
color:#333333;
}

#menu a {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:700;
color:#333333;
text-decoration:none;
}

#menu a:hover {
text-decoration:underline;
}

[iota]

For your questions, use W3C validators.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

http://www.google.com/search?q=W3C+validators

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fx-strategy.com%2Fnew_site%2Fstrategy%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

[ahallicks]

First piece of advice I would give to you being 'new to coding' is, do not use tables for layout (http://www.hotdesign.com/seybold/)[1]. Tables were created for one thing... tabular data. Not to layout a web page. It will be so much easier for you in the long run if your look into the correct and semantic way to use HTML for content and CSS for style and layout.

Generally speaking, you should be using dividers to layout your page... for example you'd have a header, navigation, content and footer div. Then you can set a background (or if they are important to the content a foreground) image to each of these to show the various parts of your page. In your case you would add a background-image to the header of your page and give it specific height and width.

[1] - http://www.hotdesign.com/seybold/ - "Why Tables For Layout Is Stupid"

[VIPStephan]

The validator won’t cover all of the questions though as there’s no semantics validator yet.


1. Did I setup the table correctly


No. Tables are not meant to control the page layout, they are for tabular data only (i.e. phone directory or sports results, et al). Modern web design is about semantic HTML (http://brainstormsandraves.com/articles/semantics/structure/) using CSS to control the presentational aspects.

2. Is my css written correctly, is there a better way?


Don’t see any major errors in the CSS you posted. You could save some lines, though. #1: You probably don’t need all that positioning. #2: put background-image and background-repeat in one rule, the shorthand background property:


background: [color] [image] [position] [repeat] [attachment];

You can sort them anyway you like and/or leave values out (e.g. only have background image and repeat in that rule).

Same goes for font styling (well, almost):

font: [style] [weight] [size] [family];


However, here the order is fixed I think and the family plus one of the other values is mandatory (i.e. at least 2 of ’em with one always being font family)

Also you can shorten the color values from #RRGGBB (r=red, g=green,b=blue) to #RGB if they are the same for each tone, e.g. #FFFFFF would become #FFF or #336699 would become #369.

Ah well, ahallicks was faster with the first point. Anyway, hope you understand it now. :)

[Kor]

you have set the background to the parent DIV, not to the table. You might need to set the height of the DIV also, as a DIV does not necessarily take the height or the width of its nested elements.

#menu {
background-image: url(/new_web_images/080307_header_02.gif);
background-repeat: no-repeat;
height:228px;
}