I started a week ago to make a new design for my site. Afther a week of learning Css, i came up with this site:
http://www.student.tue.nl/h/r.l.w.lahaije/zooi/test2.html
The problem is that it looks good in IE, but FF makes a total mess of it. Who can help to change the code so that the site looks the samen in IE, and accepteble in FF.
Iportant code of the html file:
Css code is displayed as content on the site.
What about removin
What about removing height:10px; from
#frame, #menu, #content{
height:10px;
}
and having margin-left:150px; in #content ?
When I remove height:px;
When I remove height:px; from
#frame, #menu, #content{
height:10px;
}
The text is diplayed in the correct "boxes", and looks in both browsers the same. But the div frame, get's the same height as the div content, in stead of the div menu, which is the longest.
De div frame should have the same lenght as the longest of menu and content.
(I've altered the site, and you can see the problem in the link a gave before.)
You must clear your floats.
You must clear your floats. Follow the links there:
http://www.csscreator.com/node/5848
Problem fixed . height:10px
Problem fixed .
height:10px removed
and added:
overflow:hidden tot #frame, which solved the problem fot FF
Fo IE I also added height:1% to #frame, and removed height:100% from body
Do not use IE for your
Do not use IE for your original code test case. IE is old, buggy and non-standard. Firefox is displaying your code correctly but we can adjust for IEs quirks and bugs which you partly did above.