Stylesheets - CSS layout works OK in Netscape, sucks in IE

Author

CSS layout works OK in Netscape, sucks in IE - Help please

Charles B

2006-08-30, 6:41 pm

Hello

I'm trying to implement the page layout mocked up here:
http://www.walkourworld.com/
so the page behaves tidily when a user alters the browser window width.

There's a first attempt here, which works fine in Netscape 7.2 and also
in Mozilla Firefox/DeerPark v1.6a1.
http://www.walkourworld.com/workshop/test_template.html

Display the same page in Internet Explorer 6 and it looks awful.

One problem is the the 'div's which have variable width (eg: the centre
section of the banner at the top, or the "filler" to the right of the
Welcome tab) don't have the background image or specified bgcolor
painting across the full extent of the 'div', only that portion of it
actually occupied by text or 'nbsp's.

This is the sort of CSS running into trouble:

#banner_middle
{
position: absolute;
left: 350px;
right: 271px;
top: 0;
height: 79px;
background-image: url("banner_middle.gif");
background-repeat: repeat;
}

I've got some JavaScript in the page <head> section which links in a
different stylesheet file if IE is the browser and tried making a few
adjustments in there, like margin-left and margin-right instead of left
and right - like so, but to no effect:

#banner_middle
{
position: absolute;
margin-left: 350px;
margin-right: 271px;
top: 0;
height: 79px;
background-image: url("banner_middle.gif");
background-repeat: repeat;
}

Can anyone point me towards any online resource dealing with these
browser inconsistencies or offer any suggestion for a solution.

CSS files are:
http://www.walkourworld.com/workshop/wow_layout.css
http://www.walkourworld.com/workshop/wow_layout_ie.css

Many thanks for any helpful suggestions

Charles B

Beauregard T. Shagnasty

2006-08-30, 6:41 pm

Charles B wrote:

> http://www.walkourworld.com/workshop/test_template.html
> I've got some JavaScript in the page <head> section which links in a
> different stylesheet file if IE is the browser

Have you looked at the page with JavaScript disabled? There is no
stylesheet. How will your page work for the ~10% who have JavaScript
disabled, or who are behind corporate firewalls that strip it?

Why the "browser.isNetscape" stuff if you are only sniffing for IE?

--
-bts
-Motorcycles defy gravity; cars just suck.

Charles B

2006-08-30, 6:41 pm

Hi Beauregard:

>
> Have you looked at the page with JavaScript disabled? There is no
> stylesheet. How will your page work for the ~10% who have JavaScript
> disabled, or who are behind corporate firewalls that strip it?
>

I only put the template_test.html page onto the live server to link
from this thread - the ideal is a CSS file which works with all fairly
modern browsers, and no need for JavaScript in public areas of the
site.

> Why the "browser.isNetscape" stuff if you are only sniffing for IE?
>

... because I copied the snippet of script from somewhere else ... and I
may find there are other browsers I need to sniff for before the
exercise is done.

Your contribution is appreciated.

Charles B

Beauregard T. Shagnasty

2006-08-30, 6:41 pm

Charles B wrote:

> Hi Beauregard:

Good morning.

>
> I only put the template_test.html page onto the live server to link
> from this thread - the ideal is a CSS file which works with all
> fairly modern browsers, and no need for JavaScript in public areas of
> the site.

Ah. Well, there are those conditional statements you can place directly
in the CSS that may work better. I don't use them. but they would work
something like this, I think:

<link rel="stylesheet" type="text/css" href="wow_layout.css"


>
> .. because I copied the snippet of script from somewhere else ... and
> I may find there are other browsers I need to sniff for before the
> exercise is done.

Browser sniffing is generally doomed to failure. <g>

While you are pondering your pixel-perfect layout, have a read of this:
http://k75s.home.att.net/fontsize.html

You will also want to assign a background color to the body. I get to
see my ugly default purple...

--
-bts
-Motorcycles defy gravity; cars just suck.

Beauregard T. Shagnasty

2006-08-30, 6:41 pm

Beauregard T. Shagnasty replied to hisself:

> Ah. Well, there are those conditional statements you can place
> directly in the CSS that may work better.

Oops, sorry. I meant to say in the <head> instead of in the CSS.

--
-bts
-Motorcycles defy gravity; cars just suck.

Charles B

2006-08-30, 6:41 pm

Thanks for your useful suggestions Beauregard

[color=darkred]
>
> Ah. Well, there are those conditional statements you can place directly
> in the CSS that may work better. I don't use them. but they would work
> something like this, I think:
>
> <link rel="stylesheet" type="text/css" href="wow_layout.css"
> 
>

An excellent suggestion - I'll try that tomorrow; I haven't used
HTML-comment conditionals previously.

>
>
> Browser sniffing is generally doomed to failure. <g>
>
> While you are pondering your pixel-perfect layout, have a read of this:
> http://k75s.home.att.net/fontsize.html
>

Some good points on your linked page - I've stripped the Verdana out,
and I'll check out which are the best-looking percent values for h1,
h2, etc.

> You will also want to assign a background color to the body. I get to
> see my ugly default purple...

Should look better now I hope!

Many thanks for your help.

Charles B

Beauregard T. Shagnasty

2006-08-30, 6:41 pm

Charles B wrote:

> Thanks for your useful suggestions Beauregard
>
> <schnipp>
> An excellent suggestion - I'll try that tomorrow; I haven't used
> HTML-comment conditionals previously.

Neither have I. Never had the need to browser-sniff.

>
> Some good points on your linked page - I've stripped the Verdana out,
> and I'll check out which are the best-looking percent values for h1,
> h2, etc.

Ok.

>
> Should look better now I hope!

bgcolor: #fff;
should be
background-color: #fff;

...'cause I still see purple. <g> bgcolor is not a valid attribute.

> Many thanks for your help.

Welcome.

--
-bts
-Motorcycles defy gravity; cars just suck.