Avatar billede passiflora Juniormester
12. april 2007 - 01:29 Der er 17 kommentarer og
1 løsning

Hvorfor placeres min menu forkert i firefox

Hejsa.

Nu har jeg så startet på css. Har bygget lidt.

Ser fint ud i IE ...

Men placeringen er helt håbløs i FF

Jeg har placeret min menu såleds

div.menu  {
    background-image: url('images/baggrund/transhvid.gif');
    width: 395px;
    height: 25px;
    position:absolute;  top: 135 px; left: 50%; margin-left: -5px;
}

Kan det fikses så det virke både her og der ... og måske i ie7
Avatar billede roenving Novice
12. april 2007 - 01:35 #1
Hrm, jeg kan komme til at tænke på 27 forskellige grunde til at det vises forskelligt ...

-- bedst er det, hvis du kan lægge et link, så er det jo nemmere at gennemskue nogle sammenhænge ...

-- men i hvert fald skal du vise hvad der står før dit html-tag, samt hvad de elementer, der omkranser din menu-div er indstillet til !-)
Avatar billede passiflora Juniormester
12. april 2007 - 01:38 #2
Bare du ikke griner ...

Før mit html tag ... hmm ... der skal altså stå noget ... hmm
Avatar billede roenving Novice
12. april 2007 - 01:47 #3
De to første linjer i et html-dokument skal se nogenlunde sådan ud:

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

-- uden doctype er det slet ikke et html-dokument anno 1996 ...
Avatar billede passiflora Juniormester
12. april 2007 - 01:55 #4
ikke bedre ...

Jeg leger på www.spejderi.dk/jp
Avatar billede roenving Novice
12. april 2007 - 02:07 #5
Så er de da blevet ens ...

-- fortsæt derfra, for så har du jo altså fat i noget, der giver nogenlunde rimelige resultater i de forskellige browsere ...

-- men hints, jeg lige umiddelbart kan give:

Skal du positionere noget, tilsiger css-rekommendationerne, at de skal forholde sig til det nærmest omgivende _positionerede_ element, dvs. skal du sætte noget et specielt sted inde i et andet, skal det omkransende element være positioneret, f.eks. med position:relative; !-)

-- et godt redskab er at bruge DOM-inspector i Opera eller FireFox eller at hente Dev Toolbar til IE: http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en !o]

Ved at bruge denne DOM-explorer bliver man hurtigt meget klogere på, hvad, der sker hvor !-)
Avatar billede passiflora Juniormester
12. april 2007 - 02:12 #6
Bleven ens ... øh ...
Avatar billede roenving Novice
12. april 2007 - 02:20 #7
I alle mine browsere vises de ens ...

Tjah, så kastede jeg den igennem IE5, og der vistes den, som du sikkert ønsker, den skal vises, men jeg tror ikke, der er så mange IE5'ere uden for udviklingslandene, så det er vel aldeles uinteressant ...
Avatar billede passiflora Juniormester
12. april 2007 - 02:20 #8
Mht. Positioneringen så skal jeg betragte menuens placering udfra body'en ...

Kunne ikke lige installerer DOM inspectoren ...

Prøve i morgen
Avatar billede passiflora Juniormester
12. april 2007 - 02:21 #9
Alle min firefox viser stadig det grimme ...
Avatar billede passiflora Juniormester
12. april 2007 - 02:22 #10
Du må gerne sende et svar ...

Har fået nok for de 30 point ...
Avatar billede roenving Novice
12. april 2007 - 02:23 #11
Nej, menuen må ikke placeres ud fra bodyen, for den fylder jo bredden (og er måske af andre grunde ikke på plads i højden !-), så den skal placeres ud fra det element, der centreres i browseren ...
Avatar billede passiflora Juniormester
12. april 2007 - 02:28 #12
Øh ... Men baggrundsbilledet er jo netop body'en som er centreret ...
Avatar billede roenving Novice
12. april 2007 - 03:03 #13
Måske kan du få nogle ideer fra dette:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eksempel på positionering i moderne browsere</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body
{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;overflow:hidden;}
#site
{width:960px;margin:0 auto;position:relative;height:100%;background-color:#dd0;}
.menu
{width:500px;float:right;height:36px;background-color:#ccc;padding:4px;}
.menu a,
.menu a:link,
.menu a:visited
{}
.menu a:hover,
.menu a:active
{}
#content
{position:relative;background-color:red;height:auto;min-height:200px;color:white;}
#rightbox
{float:right;width:180px;height:300px;border:1px solid #333;background-color:green;padding:10px;z-index:15;}
.clearDiv{clear:both;line-height:0;font-size:0;}
</style>
<!-- På grund af IE 6- måde at beregne højder i elementer, er det nødvendigt at indsætte denne kode, som kun IE understøøtter -->
<!--[if lt IE 7]>
<style type="text/css">
#content{height:200px;}
</style>
<![endif]-->
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<div id="site">
  <div class="menu">
    Her indsættes menuen
  </div>
  <div class="clearDiv">&nbsp;</div>
  <div id="content">
    <div id="rightbox">Et specielt stykke indhold, som skal placeres i højre side</div>
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.   
    Og her placeres indholdet, som meget gerne må indeholde en hulens masse, uanset hvor stor rightboksen egentlig er.
    <br><br>
    <span style="color:#222;font-style:italic;font-weight:900;">Det er godt nok utroligt, at der kommer en 'flod' i ovenstående, men sådan går det nogle gange<br><br>
    En 'flod' er en stribe af mellemrum, som sammen tegner en streg i et typografisk billede</span>
    <br><br><br><br><br><br><br><br><br>
    Bunden af indholdet
</div>
  <div class="clearDiv">&nbsp;</div> 
</div>
</body>

</html>
Avatar billede passiflora Juniormester
12. april 2007 - 11:08 #14
Jo, det dæmre så småt ... Skal lige have mit gamle hoved tunet ind ...

Må hjem og lege.

Jeg kan ikke rigtig gennemskue hvorledes jeg får placeret f.eks. menuen præcist, hvor jeg gerne vil have det ...
Avatar billede passiflora Juniormester
13. april 2007 - 00:00 #15
Og jeg mangler lige et svar ... selvom det ikke var her lyset lyste ...
Avatar billede roenving Novice
13. april 2007 - 00:25 #16
Oki '-)

-- tilføjelsen i det andet spørgsmål hjalp forhåbentlig til at finde noget at tænde med !-)
Avatar billede passiflora Juniormester
13. april 2007 - 09:04 #17
Og jo ... fandt ud hvad jeg gjorde forkert, har fået det rettet, til noget som ser ens ud. Og det var jo målet.

Næste step må være at lave noget pænt .. :)

Tak for hjælpen
Avatar billede roenving Novice
13. april 2007 - 14:41 #18
¡Muy bueno!

-- og tak for point ;~}
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