Unfortunately, I'm yet to find a pair of browsers that agree on how to interpret the CSS...
Firefox gives me what I'm looking for, the light starfield in this table cell, with the left 150px darkened and the links overlayed on this bit, centered. Image: http://img.photobucket.com/albums/v113/ ... irefox.jpg
Internet Explorer appears from my testing to be ignoring both the max-width attribute and the fact that the DIV should be left aligned (I think anyway, I'm no expert). I get the DIV filling the whole table cell with the darkened starfield, and the links centered in this DIV. This is annoying because it means that for the time being, I have to keep the darkened starfield fullsize rather than cropping it down to 150px width - greatly increasing loading time. Image: http://img.photobucket.com/albums/v113/ ... irefox.jpg
Opera gives the darkened starfield, but not in the right place - it's centered, apparently ignoring that the DIV should be left aligned (I think). Interestingly, Internet Explorer gives me this result if I swap out the max-width for width at 150px. Image: http://img.photobucket.com/albums/v113/ ... irefox.jpg
Oh, and Amaya makes a complete mess of it but I don't care - I've yet to come across someone using it as a primary browser.
I can swap out the max-width for width, which reduces the amount by which the site can be resized by a little but I don't think anyone objects to the minimum width for the page being 150 pixels! So if someone can tell me a) if the DIV should be left aligned in that table cell and b) how to make it left aligned, either way then I can get this site looking the way I want.
There's a semi-live version which I'm working on at http://www.angusenterprises.co.uk. I'm trying to get the layout correct before putting in the scripting.
CSS (style1.css - bits that probably matter are td.header and div.headlinks I think):
Code: Select all
/* Non-class definitions */
body
{
background-color:#332222;
font-family:tahoma,arial,sans-serif;
font-size:10pt;
color:#999988;
text-align:center;
}
hr
{
background-color:#332222;
color:#332222;
border:0px;
height:1px;
}
/* Class definitions */
table.body
{
border-style:solid;
border-width:1px;
border-color:#221111;
margin-left:auto;
margin-right:auto;
padding:0%;
}
td.header
{
background-image:url("images/header.jpg");
background-repeat:no-repeat;
border-style:solid;
border-left-width:2px;
border-right-width:2px;
border-top-width:4px;
border-bottom-width:2px;
border-color:#000000;
width:500px;
max-width:500px;
max-height:150px;
padding:0%;
}
td.sublinks
{
background-color:#221111;
color:inherit;
border-style:solid;
border-color:#000000;
border-width:2px;
width:500px;
max-width:500px;
padding:0%;
}
td.main
{
background-color:#221111;
color:inherit;
border-style:solid;
border-color:#000000;
border-left-width:2px;
border-right-width:2px;
border-top-width:2px;
border-bottom-width:4px;
width:500px;
max-width:500px;
padding:0%;
}
div.headlinks
{
background-image:url("images/headerd.jpg");
background-repeat:no-repeat;
font-family:helvetica,tahoma,arial,sans-serif;
font-size:9pt;
font-weight:bold;
font-variant:small-caps;
letter-spacing:0pt;
text-align:center;
line-height:1.5;
height:150px;
max-height:150px;
max-width:150px;
}
div.sublinks
{
font-family:helvetica,tahoma,arial,sans-serif;
font-size:8pt;
font-weight:bold;
font-variant:small-caps;
letter-spacing:0pt;
word-spacing:12pt;
margin-left:12px;
}
div.bodytext
{
font-family:helvetica,tahoma,arial,sans-serif;
font-size:8pt;
font-weight:bold;
letter-spacing:1pt;
text-align:justify;
margin-left:5px;
margin-right:5px;
margin-top:15px;
margin-bottom:2px;
}
h1.bodytext
{
font-size:10pt;
font-variant:small-caps;
line-height:1.0;
margin-left:-2px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
h2.bodytext
{
font-size:9pt;
font-variant:small-caps;
line-height:0.5;
margin-left:-1px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
h3.bodytext
{
font-size:8pt;
font-variant:small-caps;
line-height:0.5;
margin-left:-1px;
margin-right:0px;
margin-top:0px;
margin-bottom:2px;
}
a.links
{
background-color:inherit;
color:#888877;
text-decoration:none;
}
img.thumbs
{
border-style:solid;
border-width:1px;
border-color:#000000;
margin-bottom:7px;
}
img.links
{
border-style:none;
}