[CSS] float werkt niet goed in firefox - Softwareontwikkeling

dinsdag 15 augustus 2006 21:59

Acties:

Verwijderd

Topicstarter

hallo,
ik ben bezig een website aan het hermaken in php, in de eerste fase moet het er uitzien zoals op www.chiroharo.be/info.htm

nu heb ik dat gemaakt met als resultaat
www.chiroharo.be/test2.php

in IE ziet het er bijna goed uit. behalve het feit dat de het linkse menudeel eig. automatisch zou moeten de hoogte krijgen van het rechterdeel.
Maar in firefox blijkt mijn float precies niet te werken.

Willen jullie er even naar kijken?

code:

/* CSS Document */
 
    margin: 0; 
    padding: 0; 
} 

body 
{ 
  
} 

#container 
{ 
    margin: 0 auto;
    background-image:url("images/backlinetest.png");
    background-repeat:repeat-y; !important;
    background-color: none !important;
    width: 795px;  
} 
#top 
{ 
    height: 50px; 
    background: #666666; 
    width: 795px; 
} 
#left 
{ 
    float: left; 
    width: 316px; 
    height:400px; 
} 

#right 
{ 
width: 470px; 
background:#3366CC;
}

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<body>
<div id="container">
    <div id="top"></div> 
    <div id="left"><?php include("menu.html"); ?></div> 
    <div id="right"><?PHP include("//var/www/html/cutenews/show_news.php"); ?></div> 
</div>
</body>

</html>

dinsdag 15 augustus 2006 22:02

Acties:

faabman

Je moet #right ook een float geven...

Waarschijnlijk bedoel je met "gelijke hoogte" een visueel effect, daarvoor kun je op faux columns googlen...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

dinsdag 15 augustus 2006 22:14

Acties:

BasieP

faabman schreef op dinsdag 15 augustus 2006 @ 22:02:
Je moet #right ook een float geven...

Waarschijnlijk bedoel je met "gelijke hoogte" een visueel effect, daarvoor kun je op faux columns googlen...

hier zijn geen faux collumns voor nodig.

verder heb je wel gelijk, #right moet ook floating zijn. en even voor alle goede orde:
IE doet het niet goed, FF juist wel

This message was sent on 100% recyclable electrons.

dinsdag 15 augustus 2006 22:32

Acties:

Verwijderd

Topicstarter

dit veranderd in CSS en nu werkt het blijkbaar goed.

code:

#right 
{ 
 float: left; 
width: 470px; 
background:#3366CC;
}

wat die automatische height betreft eig is het de achtergrond die niet goed werkt in FF (al durf ik dat niet beweren

Iemand hiervoor een oplossing?

[ Voor 5% gewijzigd door Verwijderd op 15-08-2006 22:48 ]

woensdag 16 augustus 2006 10:01

Acties:

Boelie-Boelie

Wellicht gaat het oplossen wat makkelijker als je één van de twee doctypes, twee head-gedeelten en overbodige html- en body-elementen weghaalt... En probeer eens een overflow:hidden op de #container. Een menu kun je ook eenvoudiger maken, zie bijv. het Listutorial.

Cogito ergo dubito

woensdag 16 augustus 2006 10:09

Acties:

moozzuzz

JavaScript:

/* CSS Document */
 
    margin: 0; 
    padding: 0; 
}

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
...
</head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<body>

Waarom wil iedereen trouwens persé die xhtml-hype volgen

zonder zelfs maar de gewone html-regels te volgen?