problem in FF (solved)

[fsuyker]

www.mediastudio.nl/index3.html

The "content" div seems to be placed below the "menu" div, where it supposed to be at the same height.

How can I fix this?

(problem only occurs in FF, not in IE)

[maxvee8]

div#content {width:600px;}

take the float:left out like the code see what happens!

P.S

div#content {width:600px; float: left}
div#content {margin-bottom:15px}
div#content {background: #000000}
div#content {margin-top:30px}

that code can be reduced to:

div#content {width:600px; margin-bottom:15px; background: #000000; margin-top:30px;}

you only need to reference an element once.

[effpeetee]

You have many Div's of the same name. Why not put all the selectors in one of them. Also Courier New needs to be quoted,

""Courier New" as do all typeface names with spaces.

-moz-opacity: 0.5; is not at present recognised by css


This css seems to work for me. It's probably not perfect.

Frank


*{
margin: 0;
padding: 0;
}

body,html {height:100%
background: url("../images/back.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

h1, h2, p{
margin: 0 10px;
}

h1{
font-size: 200%;
color: #329bc0;
font-family: "Courier New";
}

h2{
font-size: 150%;
color: #329bc0;
font-family: "Courier New";
}

p{
padding-bottom: 1em;
color: #FFFFFF;
font-family: "Courier New";
}

h2{
padding-top: 0.3em;
}

a:link, a:visited{
font-family: "Courier New";
color: #FFFFFF;
text-decoration: none;
background-image: url("images/menu-bg.png");
}

a:hover, a:active{
color: #329bc0;
text-decoration: none;
background-color: #e5e5e5;
}

div#container{
width: 980px;
margin: 0 auto;
text-align: left;
}

div#wrapper {
padding: 5px;
}

div#content {
background: #000000;
width: 600px;
float: left;
margin-bottom: 15px;
margin-top: 30px;
}

div#content-clients {
width: 700px;
float: left;
margin-bottom: 15px;
margin-top: 30px;
}

div#news {
width: 600px;
float: left;
margin-bottom: 25px;
background: #000000;
}

div#nav {
float: right;
width: 140px;
margin-top: 120px;
}
}

div#nav p{
padding-left: 5px;
padding-bottom: 25px;
}

div#nav h1{
font-size: 150%;
color: #329bc0;
}


div#logo-rechts {
float: right;
width: 140px;
padding-bottom: 10px;
padding: 10px;
}

div#media {
float: left;
width: 600px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: 1em;
}

li {
padding-left: 1.3em;
}

.opaciteit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.opaciteit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

[fsuyker]

removing the float worked.

ps I will reduce the references to an element to 1.

tnx!

[Apostropartheid]

Btw, Ffx started supporting just plain opacity ages ago: -moz-opacity isn't required.