[SOLVED] Browser CSS confusion
Posted: Sun Dec 04, 2005 9:04 am
I'm currently working on my site, and using CSS with a couple images to lay out the header. One image is a photoshopped starfield, which is the background to a table cell. In this table cell, I have a DIV (max-width:150px) containing links to parts of my site. The background to this DIV is a darkened version of the starfield (to enhance readability of the links).
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):
Thanks in advance.
I'm sure this is probably down to a misunderstanding on my side, most probably the DIV isn't meant to be left-aligned by default.
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;
}