Netscape & CSS

[Cerebral Believer]

Hi,

I have created a stylesheet in Microsoft Frontpage for a website I am
creating. Basically I am using a number of nested <div> tags to control the
layout of my page. What I have created displays fine in Internet Explorer,
but not anything like how it should in Netscape or Firefox (both appear to
render the page similarly incorrectly).

Basically if you imagine each number represents a <div>, my page should
render like this

1 2 3
4 5 6
7
8
9

Which it does in Internet Explorer, but in Netscape/Firefox it appears:

1
2
3
4
5
6
7
8
9

Just for informations sake, I have one global <div>, which holds 3 sectional
<div>'s (TOP, MIDDLE & BOTTOM). Each of the sectional <div>'s holds a
further three <div>'s (left, center and right [1+2+3 & 4+5+6]), and in the
case of the BOTTOM sectional <div> (doclinks, textnav, & footer [7+8+9]).
Can anyone point out areas where I could improve my code, or where I have
done something stupid? Most importantly, does anyone know what CSS coding I
need to specify so that I can get my page to at least render similarly in
both browsers? Here is my CSS:

-------

html {
min-height: 100%;
width: 100%;
height: 100%
}
body {
min-height: 100%;
width: 100%;
height: 100%
}
#GLOBAL {
min-height: 100%;
width: 100%;
height: 100%
position: static;
display: inline;
}
#TOP {
width: 100%;
height: 200px;
position: static;
top: 0px;
left: 0px;
right: 0px;
bottom: auto;
display: inline;
}
#topleft {
width: 17%;
height: 200px;
position: static;
top: 0px;
left: 0px;
right: 83%;
bottom: auto;
display: inline;
}
#topcenter {
width: 66%;
height: 200px;
position: static;
top: 0px;
left: 17%;
right: 17%;
bottom: auto;
display: inline;
}
/**
#infostrip {

}
**/
#topright {
width: 17%;
height: 200px;
position: static;
top: 0px;
left: 83%;
right: 0px;
bottom: auto;
display: inline;
}
#MIDDLE {
width: 100%;
height: 400px;
position: static;
top: 200px;
left: 0px;
right: 0px;
bottom: auto;
display: inline;
}
#middleleft {
width: 17%;
height: 400px;
position: static;
top: auto;
left: 0px;
right: 83%;
bottom: auto;
display: inline;
}
/**
#infostrip {

}
**/
#middlecenter {
width: 66%;
height: 400px;
position: static;
top: auto;
left: 17%;
right: 17%;
bottom: auto;
display: inline;
}
#middleright {
width: 17%;
height: 400px;
position: static;
top: auto;
left: 83%;
right: 0px;
bottom: auto;
display: inline;
}
#BOTTOM {
width: 100%;
height: auto;
position: static;
top: auto;
left: 0px;
right: 0px;
bottom: 0px;
display: inline;
}
#doclinks {
width: 100%;
height: 100px;
position: static;
top: 600px;
left: 0px;
right: 0px;
bottom: auto;
display: inline;
}
#textnav {
width: 100%;
height: 100px;
position: static;
top: 700px;
left: 0px;
right: 0px;
bottom: auto;
display: inline;
}
#footer {
width: 100%;
height: 100px;
position: static;
top: 800px;
left: 0px;
right: 0px;
bottom: auto;
display: inline;
}

 

[Neredbojias]

To further the education of mankind, "Cerebral Believer"

Hi,

I have created a stylesheet in Microsoft Frontpage for a website I am
creating. Basically I am using a number of nested <div> tags to
control the layout of my page. What I have created displays fine in
Internet Explorer, but not anything like how it should in Netscape or
Firefox (both appear to render the page similarly incorrectly).

Basically if you imagine each number represents a <div>, my page
should render like this

1 2 3
4 5 6
7
8
9

Which it does in Internet Explorer, but in Netscape/Firefox it
appears:

1
2
3
4
5
6
7
8
9

Just for informations sake, I have one global <div>, which holds 3
sectional <div>'s (TOP, MIDDLE & BOTTOM). Each of the sectional
<div>'s holds a further three <div>'s (left, center and right [1+2+3 &
4+5+6]), and in the case of the BOTTOM sectional <div> (doclinks,
textnav, & footer [7+8+9]). Can anyone point out areas where I could
improve my code, or where I have done something stupid? Most
importantly, does anyone know what CSS coding I need to specify so
that I can get my page to at least render similarly in both browsers?
Here is my CSS: ....snip
#topleft {
width: 17%;
height: 200px;
position: static;
top: 0px;
left: 0px;
right: 83%;
bottom: auto;
display: inline;
}

....snip

I think you're trying to do a few things you can't do. Regarding the
above example...position:static;right:83%;? Also, how do you set a width
on inline elements? That it "works" in IE is so much sulfur dioxide in
the atmosphere...

 

[Andy Dingley]

I have created a stylesheet in Microsoft Frontpage for a website I am
creating. Basically I am using a number of nested <div> tags to control the
layout of my page. What I have created displays fine in Internet Explorer,
but not anything like how it should in Netscape or Firefox (both appear to
render the page similarly incorrectly).

FP is crap, older versions even worse than newer.

FF is almost certainly right, IE is wrong. FP is just pandering to how
IE gets it wrong, but that's still not a good thing.

Validate your HTML and CSS with a reliable validator.

That CSS is not good style (even though it might be correct). It's
symptomatic of CSS generated by WYSIWYG tools that it over-emphasises
rigid and absolute positioning, rather than trying to provide a
flexible layout. This is the second biggest reason why _all_ current
WYSIWYG tools are inappropriate for use with CSS.

(the biggest reason is their habit of inlining styles, rather than
encouraging rational use of re-usable classes)

 

[Cerebral Believer]

To further the education of mankind, "Cerebral Believer"

Hi,

I have created a stylesheet in Microsoft Frontpage for a website I am
creating. Basically I am using a number of nested <div> tags to
control the layout of my page. What I have created displays fine in
Internet Explorer, but not anything like how it should in Netscape or
Firefox (both appear to render the page similarly incorrectly).

Basically if you imagine each number represents a <div>, my page
should render like this

1 2 3
4 5 6
7
8
9

Which it does in Internet Explorer, but in Netscape/Firefox it
appears:

1
2
3
4
5
6
7
8
9

Just for informations sake, I have one global <div>, which holds 3
sectional <div>'s (TOP, MIDDLE & BOTTOM). Each of the sectional
<div>'s holds a further three <div>'s (left, center and right [1+2+3 &
4+5+6]), and in the case of the BOTTOM sectional <div> (doclinks,
textnav, & footer [7+8+9]). Can anyone point out areas where I could
improve my code, or where I have done something stupid? Most
importantly, does anyone know what CSS coding I need to specify so
that I can get my page to at least render similarly in both browsers?
Here is my CSS: ...snip
#topleft {
width: 17%;
height: 200px;
position: static;
top: 0px;
left: 0px;
right: 83%;
bottom: auto;
display: inline;
}

...snip

I think you're trying to do a few things you can't do. Regarding the
above example...position:static;right:83%;? Also, how do you set a width
on inline elements? That it "works" in IE is so much sulfur dioxide in
the atmosphere...

OK,

Please forgive my ignorance, I am a newbie at all this and haven't got round
to an indepth sudy of .css on my course. As far as I know static
positioning should arrange elements in document flow (according to the way
the HTML is naturally formed). I thought the top, left, right and bottom
attributes defined the exact area an element should occupy on a page. I am
not at all sure about inline elements, but having toyed with other values,
this seemed to be the one that produced the desired effect.

Regards,
C.B.

 

[Jonathan N. Little]

OK,

Please forgive my ignorance, I am a newbie at all this and haven't got round
to an indepth sudy of .css on my course. As far as I know static
positioning should arrange elements in document flow (according to the way
the HTML is naturally formed). I thought the top, left, right and bottom
attributes defined the exact area an element should occupy on a page. I am
not at all sure about inline elements, but having toyed with other values,
this seemed to be the one that produced the desired effect.

Okay how about this little demo...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>layout template</title>

<style type="text/css">
BODY { margin: 0; padding: 0; width: 100%}

/* I use a bottom margin to show separate sections */
.stooges {
clear: both; width: 100%; margin-bottom: .5em;
}

/* 31% is an approx to factor in padding... */
.moe {
float: left; width: 31%; color: #500; background-color: #fee;
}

/* like moe but added right margin for collapsed padding of curly */
.larry {
margin-right: 1em; float: left; width: 31%; color: #050;
background-color: #efe;
}
.curly {
color: #005; background-color: #eef;
}

/* again I use a bottom margin to show separate sections */
.shep {
margin-bottom: .5em; clear: both; width: auto; color: #505;
background-color: #fef;
}

/* reasonable visual padding for sections */
.moe, .larry, .curly, .shep { padding: 1em; }
</style>
</head>
<body>

<div class="stooges">
<div class="moe">This is div 1</div>
<div class="larry">This is div 2</div>
<div class="curly">This is div 3</div>
</div>

<div class="stooges">
<div class="moe">This is div 4</div>
<div class="larry">This is div 5</div>
<div class="curly">This is div 6</div>
</div>

<div class="shep">This is div 7</div>

<div class="shep">This is div 8</div>

<div class="shep">This is div 9</div>

</body>
</html>