CSS layout

#1

Hi Folks,

Below is some test text which I've been working on, to try and get my
head around CSS more.

However I've observed 3 issues, mainly with Firefox which dont seem to
like some bits.

1) Although "centered" is centered, in Firefox the background colour
doesnt display
2) The borders in firefox appear to be much wider than IE
3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

Not quite sure why its not working, but can I recommend
http://www.yourhtmlsource.com/styles...csslayout.html
for newbies explaining about layout - its not my own site, but its
good.

Thanks

Sp

<style>
body {
text-align:center;
}

#top{
width:100%;
height:50px;
background-color:cyan;
}

#overall{
width:100%;
height:100%;
background-color:lightgray;
}

#main {
margin:auto;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightblue;
}

#second{
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightgreen;
}

#third{
position:relative;
left:5px;
top:10px;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:yellow;
}

#right{
float:left;
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
}

#bottom{
float:left;
width:100%;
height:50px;
background-color:cyan;
}

#containedbottom{
right:0%;
left:0%;
position:absolute;
width:100%;
bottom:8px;
height:50px;
background-color:cyan;
}

#centered{
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
margin: 0 auto; text-align: left;
}

</style>
<body><div id="overall">

<div id="top">
this is top text
</div>
<div id="main">
this is test text
<div id="second">
second text
<div id="third">
third text
</div>
</div>
</div>

<div id="right">
this text should appear to the right of first box
</div>
<div id="bottom">
this is bottom text
</div>
<div id="centered">
this text should be centered
</div>
<div id="containedbottom">
this is bottom text v2
</div>

</div></body>

#2

On 2006-09-28, UKuser <spidercc21 (AT) yahoo (DOT) co.uk> wrote:

Quote:

Hi Folks,

Below is some test text which I've been working on, to try and get my
head around CSS more.

However I've observed 3 issues, mainly with Firefox which dont seem to
like some bits.

1) Although "centered" is centered, in Firefox the background colour
doesnt display

Firefox is actually correct here, but what's going on is rather
complex...

If you set the background-color on #centered to green (so as not to
confuse it with the other red box) and then add

div {
-moz-opacity: 0.5;
}

to your style rules, you will see the green box behind the fog of the
other boxes (which are now semi-transparent).

Firefox has correctly centered the div with respect to its containing
block.

But when it comes to put the text into div#centered, it (correctly
again) tries to put it to the right of the left floats. But since there
isn't room for the text (the floats #main and #right actually completely
obscure the content area of div#centered), the text is moved downwards
until it clears the floats. It is therefore overflowing its containing
box, which is why you can't see the background. It left its background
behind, in the right place, behind all the other floats where you can't
see it!

Quote:

2) The borders in firefox appear to be much wider than IE

They look like 1px to me, which is fine.

Quote:

3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

This part I don't understand, both div#bottom and div#containedbottom
look like they're in the right places.

[...]

Quote:

style
body {
text-align:center;
}

#top{
width:100%;
height:50px;
background-color:cyan;
}

#overall{
width:100%;
height:100%;
background-color:lightgray;
}

#main {
margin:auto;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightblue;
}

#second{
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightgreen;
}

#third{
position:relative;
left:5px;
top:10px;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:yellow;
}

#right{
float:left;
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
}

#bottom{
float:left;
width:100%;
height:50px;
background-color:cyan;
}

#containedbottom{
right:0%;
left:0%;
position:absolute;
width:100%;
bottom:8px;
height:50px;
background-color:cyan;
}

#centered{
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
margin: 0 auto; text-align: left;
}

/style
body><div id="overall"

div id="top"
this is top text
/div
<div id="main"
this is test text
<div id="second"
second text
<div id="third"
third text
</div
</div
</div

div id="right"
this text should appear to the right of first box
/div
div id="bottom"
this is bottom text
/div
div id="centered"
this text should be centered
/div
div id="containedbottom"
this is bottom text v2
/div

/div></body

#3

UKuser wrote:

Quote:

I recommend
http://www.yourhtmlsource.com/styles...csslayout.html
for newbies explaining about layout

Very bad idea. To quote from the Absolute Positioning section:
"If you position an element (an image, a table, or whatever) absolutely
on your page, it will appear at the exact pixel you specify."

This is not only incomplete, but even encourages the hugely bad design
practice of positioning everything on a page at absolute pixel x/y
coordinates.

No wonder there is so much crap on the web, if the uneducated are
learning from sources like this. :-(

--
Berg

#4

UKuser wrote:

Quote:

Hi Folks,

Below is some test text which I've been working on, to try and get my
head around CSS more.

However I've observed 3 issues, mainly with Firefox which dont seem to
like some bits.

1) Although "centered" is centered, in Firefox the background colour
doesnt display

See Ben's response.
Add clear:left to centered div to fix the background.

Quote:

2) The borders in firefox appear to be much wider than IE

"the 'border' property cannot set different values on the four borders"
which in essence you are doing. Change like so:

/*border: 1px 1px 1px 1px; REMOVE */
/*border-style:solid; REMOVE */
border:1px solid; /* ADD */

Quote:

3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

You have this div (containedbottom) absolutely positioned, so although
it is inside your overall div (which is static) it is out of the normal
flow and its left/right positioning properties are relative to the
extreme left/right of the viewport.

If your overall div were relatively positioned, your absolutely
positioned containedbottom div's left/right positioning properties would
be relative to the overall div.

--
Gus

#5

Cheers for your help folks - everything fixed.

Sp

Gus Richter wrote:

Quote:

UKuser wrote:
Hi Folks,

Below is some test text which I've been working on, to try and get my
head around CSS more.

However I've observed 3 issues, mainly with Firefox which dont seem to
like some bits.

1) Although "centered" is centered, in Firefox the background colour
doesnt display

See Ben's response.
Add clear:left to centered div to fix the background.

2) The borders in firefox appear to be much wider than IE

"the 'border' property cannot set different values on the four borders"
which in essence you are doing. Change like so:

/*border: 1px 1px 1px 1px; REMOVE */
/*border-style:solid; REMOVE */
border:1px solid; /* ADD */

3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

You have this div (containedbottom) absolutely positioned, so although
it is inside your overall div (which is static) it is out of the normal
flow and its left/right positioning properties are relative to the
extreme left/right of the viewport.

If your overall div were relatively positioned, your absolutely
positioned containedbottom div's left/right positioning properties would
be relative to the overall div.

--
Gus

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

CSS layout

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

CSS layout - 09-28-2006 , 05:56 AM

Re: CSS layout - 09-28-2006 , 02:46 PM

Re: CSS layout - 09-28-2006 , 03:36 PM

Re: CSS layout - 09-28-2006 , 04:49 PM

Re: CSS layout - 09-29-2006 , 10:39 AM