[HTML/CSS] Menu wordt niet goed weergegeven in Firefox - Softwareontwikkeling

zondag 18 juni 2006 19:21

Acties:

Topicstarter

Hallo,

Ik heb een website gebouwd (nouja alleen de lay-out nog een beetje en een newssysteempje geinclude), met een aantal DIVS voor de verdeling. Nu ziet de site er in IE er perfect uit zoals ik het bedoel, alleen komt in Firefox de DIV waarin de menu links staan half in de DIV er onder te staan.

Een paar voorbeeldjes:

Internet Explorer:
Afbeeldingslocatie: http://www.bomans.speedxs.nl/img/site_ie.jpg

Afbeeldingslocatie: http://www.bomans.speedxs.nl/img/site_ie.jpg

Firefox:

Afbeeldingslocatie: http://www.bomans.speedxs.nl/img/site_ff.jpg

index.php:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<link rel='stylesheet' type='text/css' href='data/style.css'>

<head>
        <title>www.noepzor.nl</title>
</head>
    <body>
        <script src="data/rounded.js" type="text/javascript"></script>
        <div id="container">
            <div class="top" align="center">
                [img]"img/header.gif"[/img]
            </div>
            
            <div class="menu">
                <h2><a href="index.php">.Home</a> <a href="pc.html">.Mijn PC</a></h2>
            </div>  
            <script type="text/javascript">
            Rounded('menu', 15, 15);
            </script>
            <div class="mainarea">
                <p>
                <h1>Laatste nieuws.. </h1>
                </p>
                <br><br>
                <table border="0" width="600" align="center"><tr><td>
                <?PHP
                $number=5;
                include("beheer/show_news.php");
                ?>
                </td></tr></table>
            </div>
            <script type="text/javascript">
            Rounded('mainarea', 15, 15);
            </script>
            <div class="footer">
            <p><a href="http://www.drome.nl/" target="_blank">[img]"http://www2.drome.nl/d13/banners/d13-banner.jpg"[/img]</a></p>
            <p>© by NoepZor 2006 All rights reserved.</p>
            </div>
            <script type="text/javascript">
            Rounded('footer', 15, 15);
            </script>
        </div>
    </body>
</html>

CSS stylesheet:

code:

/* Algemene document settings */
* {
    margin : 0;
    padding : 0;
}

body {
    font : normal 62.5%/1.2 "Trebuchet MS", serif;
    color : #333333;
    background-image: url(../img/background_grass.jpg);
    background-color: #52761f;
}

/* Text opmaak */
p {
    margin : 5px;
}
h1 {
font-size: 2em;
margin: 5px;
}
h2 {
font-size: 1.6em;
margin: 5px;
}
h3 {
font-size: 1.4em;
color: #333333;
}
h4 {
font-size:0.8em;
color: #FF6600;
font-style:italic;
}
table {
margin:10px;
}

/* Opmaak links */
a:link {
    color: #333333;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #333333;
}
a:hover {
    text-decoration: none;
    color: #FF6600;
}
a:active {
    text-decoration: none;
    color: #333333;
}

/* Container en de definitie van de secties */
#container {
    margin : 20px auto;
    margin-top : 30px;
    margin-bottom: 30px;
    width : 800px;
    font-size : 1.3em;
}

.top {
    float : left;
    width : 780px;
    height : 120px;
    margin : 5px;
}
.menu {
    float : left;
    width : 780px;
    height : 30px;
    margin : 5px;
    clear : both;
}
.mainarea {
    float : left;
    width : 780px;
    margin : 5px;
    clear : both;
}
.footer {
    float : left;
    width : 780px;
    margin : 5px;
    clear : both;
    text-align:center;
}
    
/* Background colors secties */
.menu {
    background-color : #FFCC00;
}
.mainarea {
    background-color : #FFCC66;
}
.footer {
    background-color : #FFCC00;
}

heeft iemand een idee waaraan dit kan liggen..? Ik heb al goed gekeken maar zou niet weten wat ik fout doe en waarover Firefox struikelt. IE geeft de pagina namelijk wel goed weer.

Alvast bedankt

De wijzen komen uit het Oosten!

maandag 19 juni 2006 00:23

Acties:

crisp

Devver

Pixelated

Waarom float je al je secties?

Intentionally left blank

maandag 19 juni 2006 00:28

Acties:

disjfa

be

crisp schreef op maandag 19 juni 2006 @ 00:23:
Waarom float je al je secties?

Zowizo is wat deze meneer zegt al handig.

Maar je menu zet je op een max hoogte van 30 pixels. En je menu is hover dan dat. Waarschijnlijk ligt gaar je probleem.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 19 juni 2006 09:53

Acties:

NoepZor

Topicstarter

Ik heb de floats verwijderd (effe nagelezen wat het precies deed en is me duidelijk dat het hier geen nut heeft.)
tevens heb ik de height attribuut van het menu verwijderd en nu geeft hij het wel goed weer! Ik was daar zelf nog niet op gekomen. Danku

De wijzen komen uit het Oosten!