[SOLVED] Browser CSS confusion

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
AngusL
Forum Contributor
Posts: 155
Joined: Fri Aug 20, 2004 4:28 am
Location: Falkirk, Scotland

[SOLVED] Browser CSS confusion

Post by AngusL »

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):

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;
}
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.
Last edited by AngusL on Wed Dec 07, 2005 9:50 am, edited 1 time in total.
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

First of all, IE ignores any min-* and max-* definitions. Also, like many browsers, it displays DIV's with 100% width by default. Try setting the left panel width to 150 like so: width: 150px;. That's so it doesn't cover the entire page. To get rid of the DIV aligning to the center of the page, set float: left;. This should force it do move to the left. Try that and tell me what happened.
AngusL
Forum Contributor
Posts: 155
Joined: Fri Aug 20, 2004 4:28 am
Location: Falkirk, Scotland

Post by AngusL »

That sorted it, certainly in Internet Explorer anyway - I'm still at school so I can't check Opera. Thanks a lot for that, looks like I've still got quite a bit of learning to do!
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

AngusL wrote:That sorted it, certainly in Internet Explorer anyway - I'm still at school so I can't check Opera. Thanks a lot for that, looks like I've still got quite a bit of learning to do!
Good to hear, and it seems to be working on Opera over here. :)
Post Reply