Wed, 2004-05-19 20:27
I made a quite simple layout which works well in IE and Opera but goes berzerk in Firefox and Safari. Screenshot. IE does it perfectly (IE people may click this link). What can be wrong? Below is the CSS for the page, since my server doesn't allow downloading of CSS files.
body {
background: #FADFA9;
font-family: 'Verdana', Verdana, sans;
font-size: 62.5%;
}
#zooizetter { /*container*/
margin-left: auto;
margin-right: auto;
width: 750px;
}
#vlag { /*banner*/
width: 750px;
height: 100px;
background: url(logo_top.jpg) no-repeat top left;
}
#bovenstukje { /*headermenu*/
margin-top: 5px;
margin-bottom: 5px;
width: 744px;
padding: 3px;
font-size: 1.3em;
text-align: center;
background: #FEBA49;
border: 1px solid #7E5B22;
color: #824000;
}
#vasthebber { /*placer for menu and content*/
width: 750px;
background: #FEBA49 url(contback.gif) repeat-y;
border: 1px solid #7E5B22;
}
#linklijst { /*menu*/
width: 144px;
height: 100%;
padding: 3px;
float: left;
font-size: 1.2em;
color: #603D00;
}
#linklijst ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
margin-top: 0;
text-indent: -1em;
}
#linklijst a {
color: #8C5900;
text-decoration: none;
}
#linklijst a:hover {
color: #533500;
text-decoration: none;
}
#binnenkant { /*content*/
width: 584px;
padding: 3px;
float: right;
font-size: 1.1em;
color: #603D00;
}
#binnenkant a {
color: #824000;
text-decoration: none;
border: 1px solid #FEBA49;
}
#binnenkant a:hover {
color: #582B00;
text-decoration: none;
background: #FDB53D;
border: 1px solid #EFAB3A;
}
#onderstukje { /*footer*/
margin-top: 5px;
width: 744px;
padding: 3px;
background: #FEBA49;
border: 1px solid #7E5B22;
font-size: 1em;
color: #824000;
}
Wed, 2004-05-19 21:22
#1
IE Horror: FF and Safari tear it down
Hi
You don't appear to have 'contained' the floating div's. For a div that floats, put another div before the closing </div>:
<div class="clear"> </div>
and the css is:
.clear{
clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
height:1px;
overflow:hidden;
margin-bottom:-1px;
}
* html .clear{display:none} /*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/Not all div's need the fix, so experiment!
Tony, from these forums, posted a pseudo element fix, but I have some sites where that doesn't work, so I'm sticking to the tried and tested method above.
Another problem you may come across is incorrect height or top-margin calculations, by Mozilla and Opera. So, place an object like a hr below a div and apply a top-margin. In IE it drops obligingly, in Mozilla it doesn't. That's because Moz and Opera need a bottom border on the div (but hide it from IE using the * html selector). Opera often gets table heights wrong too, maybe the same reason. Put it in a div and apply a bottom border of the same color as the background to fix.
Trevor
Wed, 2004-05-19 21:36
#2
IE Horror: FF and Safari tear it down
Nope, we're still trying, your method won't work, as can be seen here. The problem lies with the floats, but your method doesn't seem to work. Last resort: peeking in other codes (ala has the same layout, but flipped horizontally). If anyone knows the solution, please help us.
EDIT
It's fixed.