[CSS] Firefox pakt de divs niet goed - Softwareontwikkeling

donderdag 10 november 2005 19:41

Acties:

Verwijderd

Topicstarter

Hai,
ik ben bezig met een nieuw design voor mijn site, maar kom tegen een probleempje aan. Ik heb een div, waarin alle andere div's gaan. Maar in Firefox pakt ie dit niet goed. Je kan het verschil goed zien als je naar http://www.elderscrolls.nl gaat in IE en dan in FF. Zoals je dan ziet, pakt ie in FF de achterliggende div niet goed. Het is een beetje lastig uit te leggen, maar ik hoop dat jullie het snappen als je naar de pagina gaat.

De source van de pagina ziet er zo uit:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="http://www.elderscrolls.nl/templates/1/style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="360nieuws.nl " />
<title>360nieuws.nl </title>
</head>
<body>
<div id="box">
[img]"http://www.elderscrolls.nl/images/header.jpg"[/img]
<div id="menu"></div>
<div id="include"></div>
</div>
</body>

</html>

En de css zo:

code:

body {
background-color:#F0F0F0;
background-image:url(http://www.360nieuws.nl/images/bg.jpg);
background-repeat:repeat-x;
font-family:Tahoma;
margin:0px;}

#box {
width:762px;
background-color:#F9F9F9;
margin:0px auto;
height:auto;
border-left:1px solid #ECECE6;
border-right:1px solid #ECECE6; }

#header {
border-bottom:1px solid #ECECE6;
border-right:1px solid #ECECE6;
border-left:1px solid #ECECE6;
height:100px;
width:760px; }

#menu {
width:150px;
background-color:#E3E3E3;
height:668px;
float:left; }

#include {
width:606px;
background:#E3E3E3;
margin-left:5px;
height:668px;
float:left }

Ik hoop dat iemand mij kan helpen hiermee.

EDIT: spelfoutje in de titel, kan niet meer veranderen, sorry

[ Voor 13% gewijzigd door Verwijderd op 10-11-2005 19:42 ]

donderdag 10 november 2005 19:44

Acties:

Zoefff

❤ 

Zowel je #menu als #include zijn floatend, daardoor word de #box niet vanzelf opgerekt. Als je #include gewoon normaal maakt zou het wel moeten werken

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

donderdag 10 november 2005 19:46

Acties:

Mercarra

Nu gaat iemand vast roepen dat het niet zo hoort, maar zo heb ik het opgelost:

code:

1
2
3

div
{box-sizing: border-box;
-moz-box-sizing: border-box;}

Canon EOS 6D / Samyang 14mm f/2.8 / 17-40mm f/4.0 / 35mm f/1.4 / 50mm f/1.4 / 85mm f/1.8 / 70-200mm f/4 IS mercarra.nl

donderdag 10 november 2005 19:46

Acties:

ram.con

non-profit ram

I'm sorry, maar ddddirefox? even een titeledit plz. Was helemaal van streek dat die mooie naam 'firefox
' zo mishandeld was...

on topic: ben het met moderator FG eens, hoe kom je ooit aan die floating?

donderdag 10 november 2005 19:47

Acties:

Verwijderd

Topicstarter

Heb ik gedaan, maar dan plakt ie de #include over de #menu heen. Als ik de #box floatent maak, dan pakt ie em wel goed, maar gaat het geheel naar de linkerkant, terwijl ik het natuurlijk in het midden wil hebben.

donderdag 10 november 2005 19:58

Acties:

Zoefff

❤ 

Dan moet je de margin van #include even groot maken als de breedte van #menu.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

donderdag 10 november 2005 20:06

Acties:

Verwijderd

Topicstarter

Gedaan, maar nu stopt ie de #include onder het menu. De css ziet er nu zo uit:

code:

body {
background-color:#F0F0F0;
background-image:url(http://www.360nieuws.nl/images/bg.jpg);
background-repeat:repeat-x;
font-family:Tahoma;
margin:0px;}

#box {
width:762px;
background-color:#F9F9F9;
margin:0px auto;
height:auto;
border-left:1px solid #ECECE6;
border-right:1px solid #ECECE6; }

#header {
border-bottom:1px solid #ECECE6;
border-right:1px solid #ECECE6;
border-left:1px solid #ECECE6;
height:100px;
width:760px; }

#menu {
width:150px;
background-color:#E3E3E3;
height:668px; }

#include {
width:606px;
background:#E3E3E3;
margin-left:150px;
height:668px; }

Wat kan ik hieraan doen. (sorry voor de vele vragen, ben nog maar kort met css bezig)

donderdag 10 november 2005 20:12

Acties:

Zoefff

❤ 

Dan zou ik maar eens wat tutorials e.d. gaan lezen, problemen als deze zijn namelijk al _vaak_ voorbij gekomen, en er zijn enorm veel sites met standaardvoorbeelde en templates, zie bijvoorbeeld http://www.thenoodleincid...als/box_lesson/boxes.html .

Lees ook nog eens wat over floats bijvoorbeeld, je #menu moet natuurlijk wél floatend zijn, maar #include niet.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

donderdag 10 november 2005 20:16

Acties:

Verwijderd

Topicstarter

ok, menu floatend gemaakt, werkt nu perfect. Bedankt voor de hulp. Zal zeker nog wat tutorials opzoeken, dacht er wat te makkelijk over