Hi all,
First of all please excuseme if my english is not perfect.
I'm new to this list (and even to CSS layout techniques...)
I've a simple (I hope) question about some strange behaviour I encountered using netscape (6.2).
Her's the link wher you can see a test page:
<!-- m --><a class="postlink" href="http://www25.brinkster.com/marcoberti/mindif/">http://www25.brinkster.com/marcoberti/mindif/</a><!-- m -->
I'm testing this page both in IE6 and, as said, NN6.2, but in NN the central div (named "contenuti") seems not to respect the "float:left" property, in fact it starts at the right position, but it doesn't keep it's X axis (as IE does) so it's contents spam under the previous div (the black one). I wonder how to keep the "contenuti" div left side blocked.
Hope the question is clear...
Here's the important part of the CSS I'm developing, so you may understand better wher's the problem.
BODY{
margin:0px;
padding:0px;
background-color: #FFFFFF;
font-family: Verdana, Arial, sans_serif;
font-size: 70%;
}
#testata {
height: 60px;
background-image: url(images/testata2.gif);
border: 1px solid #333333;
padding:10px;
}
#menu {
background-color: #51D103;
padding:5px 5px 5px 20px;
border: 1px solid #666666;
}
#bussola {
color:#CCCCCC;
padding:5px 5px 5px 30px;
background-color: #000000;
}
#sfondo{
/* This one contains both #navigazione and #contenuti, so that I could succeed in keeping all the "navigazione" coloumn in black*/
background-color: #000000;
float:left;
}
#navigazione {
width:165;
background-color: #000000;
float:left;
color: #cccccc;
padding:0px 5px 5px 5px;
}
#contenuti {
padding:10px 5px 10px 10px;
width:400px;
color:#333333;
background-color: #FFFFFF;
}
#news {
padding:10px 5px 10px 5px;
background-color: #FFFFFF;
}
#footer {
clear:left;
padding:3px;
background-color: #51D103;
}The reason you page works in IE is becuse IE/Win is massibly buggy with floats.
You problem starts here
#sfondo{
coloumn in black*/
background-color: #000000;
float:left;
}
You are not alowed to float an object without providing a width for it (unless it's eg an image that has it's own "built in" width).
Then you have stuff like
#navigazione {
width:165;
165 what? Bottles of beer on the wall?
You need to provide a unit with (almost) all your values in CSS.
Also, to get your desired effect of columns you need to float both #navigazione and #contenuti
Ie try with this
#sfondo{
background-color: #000000;
float:left;
width:590px;
}
#navigazione {
width:165px;
background-color: #000000;
float:left;
color: #cccccc;
padding:0px 5px 5px 5px;
}
#contenuti {
padding:10px 5px 10px 10px;
width:400px;
float:left;
color:#333333;
background-color: #FFFFFF;
}
BTW, you are also missing a meta tag for charencoding. Add eg something like this to your <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">Thank you very much Stefan, I'll try it and let you know if there will be problems.
Marco
First of all please excuseme if my english is not perfect.
I'm new to this list (and even to CSS layout techniques...)
I've a simple (I hope) question about some strange behaviour I encountered using netscape (6.2).
Her's the link wher you can see a test page:
<!-- m --><a class="postlink" href="http://www25.brinkster.com/marcoberti/mindif/">http://www25.brinkster.com/marcoberti/mindif/</a><!-- m -->
I'm testing this page both in IE6 and, as said, NN6.2, but in NN the central div (named "contenuti") seems not to respect the "float:left" property, in fact it starts at the right position, but it doesn't keep it's X axis (as IE does) so it's contents spam under the previous div (the black one). I wonder how to keep the "contenuti" div left side blocked.
Hope the question is clear...
Here's the important part of the CSS I'm developing, so you may understand better wher's the problem.
BODY{
margin:0px;
padding:0px;
background-color: #FFFFFF;
font-family: Verdana, Arial, sans_serif;
font-size: 70%;
}
#testata {
height: 60px;
background-image: url(images/testata2.gif);
border: 1px solid #333333;
padding:10px;
}
#menu {
background-color: #51D103;
padding:5px 5px 5px 20px;
border: 1px solid #666666;
}
#bussola {
color:#CCCCCC;
padding:5px 5px 5px 30px;
background-color: #000000;
}
#sfondo{
/* This one contains both #navigazione and #contenuti, so that I could succeed in keeping all the "navigazione" coloumn in black*/
background-color: #000000;
float:left;
}
#navigazione {
width:165;
background-color: #000000;
float:left;
color: #cccccc;
padding:0px 5px 5px 5px;
}
#contenuti {
padding:10px 5px 10px 10px;
width:400px;
color:#333333;
background-color: #FFFFFF;
}
#news {
padding:10px 5px 10px 5px;
background-color: #FFFFFF;
}
#footer {
clear:left;
padding:3px;
background-color: #51D103;
}The reason you page works in IE is becuse IE/Win is massibly buggy with floats.
You problem starts here
#sfondo{
coloumn in black*/
background-color: #000000;
float:left;
}
You are not alowed to float an object without providing a width for it (unless it's eg an image that has it's own "built in" width).
Then you have stuff like
#navigazione {
width:165;
165 what? Bottles of beer on the wall?
You need to provide a unit with (almost) all your values in CSS.
Also, to get your desired effect of columns you need to float both #navigazione and #contenuti
Ie try with this
#sfondo{
background-color: #000000;
float:left;
width:590px;
}
#navigazione {
width:165px;
background-color: #000000;
float:left;
color: #cccccc;
padding:0px 5px 5px 5px;
}
#contenuti {
padding:10px 5px 10px 10px;
width:400px;
float:left;
color:#333333;
background-color: #FFFFFF;
}
BTW, you are also missing a meta tag for charencoding. Add eg something like this to your <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">Thank you very much Stefan, I'll try it and let you know if there will be problems.
Marco