Avatar billede 44fire44 Nybegynder
27. januar 2006 - 09:20 Der er 8 kommentarer og
1 løsning

Hjælp til at få design til at virke i Firefox

Hej fellow experts.

Jeg har lavet et design til CSS og DIVs som ser ud som det skal i IE, men det driller noget i Firefox - og jeg skal prøve at forklare problemet:

http://www.get-ready.dk/test/index.html

Her er designet - og det ser jo fint nok ud - i IE
- problemet er at min "footer" lægger sig lige under mit topbanner i Firefox, istedet for nedenunder min content-boks

1: Hvordan fortæller jeg min footer at den skal være nederst - efter min contentboks

2: Hvordan får jeg mine sidemenuer til at følges med min contentboks, således at jeg undgår de akave design?

På forhånd tak
Kenneth
Avatar billede 44fire44 Nybegynder
27. januar 2006 - 09:27 #1
jeg poster lige koden:

index.html:

<!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">
<link rel="stylesheet" type="text/css" href="inc/style.css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
</head>
<body>

<div class="maindesign">
    <div class="header">
        &nbsp;
    </div>
    <div class="menuleft">
        <br />
        <span class="h1">Menu</span>
        <br />
        &nbsp;&nbsp;<img src="dot.jpg">&nbsp;&nbsp;Menu1<br />
        &nbsp;&nbsp;<img src="dot.jpg">&nbsp;&nbsp;Menu1<br />
        &nbsp;&nbsp;<img src="dot.jpg">&nbsp;&nbsp;Menu1<br />
        &nbsp;&nbsp;<img src="dot.jpg">&nbsp;&nbsp;Menu1<br />
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
    </div>
    <div class="main">
        Main
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>       
    </div>
    <div class="menuright">
        <br />
        <span class="h1">Menu</span>
        <br />
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
        <P>&nbsp;</P>
    </div>
    <div class="footer">
        &nbsp;
    </div>
</div>
</body>
</html>

-----------
style.css
-----------

/* CSS Document */

body {
background-color: #b1ae72;
}

div.maindesign {
width: 800px;
background-color:#FFFFFF;
vertical-align:top;
margin: auto;
border-color:#660000;
border: dashed 1px;
}

div.header {
width: 800px;
height: 120px;
background-image: url('logo.jpg');
background-repeat: no-repeat;
border-color:#660000;
border-bottom:dashed 1px;
}

div.menuright{
width: 150px;
float: right;
background-color:#FFFFFF;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:9px;
}

div.main{
width: 498px;
background-color:#FFFFFF;
float: left;
border-right:#660000 dashed 1px;
border-left:#660000 dashed 1px;
}

div.menuleft{
width: 150px;
float: left;
background-color:#FFFFFF;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:9px;
}

div.footer{
width: 800px;
height: 70px;
background-image: url('footer.png');
background-repeat: no-repeat;
border-color:#660000;
border-top: dashed 1px;
margin: auto;
vertical-align: bottom;
}

span.h1{
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
background-color:#660000;
padding-right:102px;
}
Avatar billede 44fire44 Nybegynder
27. januar 2006 - 12:43 #2
og hvis jeg tilføjer: "position: absolute;" til min footer, så forsvinder footeren i IE, men dukker op øverst, OVEN på de 3 content-bokse i Firefox... :S
Avatar billede roenving Novice
27. januar 2006 - 14:09 #3
-- prøv at sætte

bottom:0px;

-- id i footer-reglen !-)

-- for floats skal ligge udenfor det almindelige dokument-flow, og bør derfor ikke skubbe noget andet, som IE åbenbart gør alligevel !o]

-- prøv at gå ind i FireFox' DOM-inspector og find elementet, så kan du se forklaringen, når du klikker på det element, der skulle skubbe footeren ned !-)
Avatar billede 44fire44 Nybegynder
27. januar 2006 - 15:22 #4
okay, jamen hvis jeg saetter "bottom:0px;" ind, saa virker det fint, hvis jeg altsaa stadig har "position: absolute;" paa = og det vil sige at den stadig ikke vises i IE

Istedet for at jeg har mine floats som jeg har dem nu, hvad vil du saa foreslaa at jeg goer?

Og hvor finder jeg Firefox's DOM-inspector? :P
Avatar billede 44fire44 Nybegynder
27. januar 2006 - 15:49 #5
og "bottom:0px; gør jo bare at min Footer er 0px fra statusbaren i min browser, og ikke lige under de 3 floating DIVs, som den skal være...
Avatar billede roenving Novice
27. januar 2006 - 17:03 #6
Det absolut letteste er at sætte de tre ting ved siden af hinanden ind som celler i en tabel-række !o]

-- derved kan du benytte dig af to specielle tabel-egenskaber, nemlig det at flere elementer, som egentlig er block-level kan stå ved siden af hinanden, og at få synkroniseret højden på ellers uafhængige elementer (det er nemlig en helt unik evne, tr-elementet har !-)

-- og DOM-inspectoren findes i FireFox under Funktioner (eller med Ctrl+Shift+i !-)
Avatar billede 44fire44 Nybegynder
27. januar 2006 - 17:38 #7
Okay, godt ord igen ;)

det er så rettet her:

http://get-ready.dk/test/

men nu får jeg så bare det andet problem, er at baren, hvor der er påskrevet "MENU" med den røde baggrund, ikke går helt ud til borderen som før - hvordan retter jeg dette?
Avatar billede 44fire44 Nybegynder
27. januar 2006 - 22:04 #8
nice - nu har jeg selv løst problemet!

med min gamle DIV side, skal jeg have tilføje:

clear: both;

under div.footer :D - og så virker det 100% som det skal :D
Avatar billede 44fire44 Nybegynder
20. februar 2006 - 22:00 #9
lukker ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester