CSS layout works OK in Netscape, sucks in IE

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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Charles B - 30 Aug 2006 13:06 GMT

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

Reply to this Message

Beauregard T. Shagnasty - 30 Aug 2006 13:53 GMT

> 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?

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

Charles B - 30 Aug 2006 14:29 GMT

Hi Beauregard:

> > http://www.walkourworld.com/workshop/test_template.html
> > I've got some JavaScript in the page <head> section which links in a
[quoted text clipped - 3 lines]
> 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

Reply to this Message

Beauregard T. Shagnasty - 30 Aug 2006 15:11 GMT

> Hi Beauregard:

Good morning.

>>> http://www.walkourworld.com/workshop/test_template.html I've got
>>> some JavaScript in the page <head> section which links in a
[quoted text clipped - 8 lines]
> 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"

>> 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.

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...

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

Beauregard T. Shagnasty - 30 Aug 2006 15:16 GMT

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.

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

Charles B - 30 Aug 2006 17:15 GMT

Thanks for your useful suggestions Beauregard

> >>> http://www.walkourworld.com/workshop/test_template.html

> 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
[quoted text clipped - 3 lines]
>

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

> >> Why the "browser.isNetscape" stuff if you are only sniffing for IE?
> >
[quoted text clipped - 6 lines]
> 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

Reply to this Message

Beauregard T. Shagnasty - 30 Aug 2006 18:43 GMT

> Thanks for your useful suggestions Beauregard
>
>>>>> http://www.walkourworld.com/workshop/test_template.html
> <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.

>> Browser sniffing is generally doomed to failure. <g>
>>
[quoted text clipped - 4 lines]
> and I'll check out which are the best-looking percent values for h1,
> h2, etc.

Ok.

>> 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!

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.

Signature

-bts
-Motorcycles defy gravity; cars just suck.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2006

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