Notifikationer

Markér alle som læst Log ud

aquafisken Nybegynder

13. september 2006 - 00:12 Der er 10 kommentarer og
1 løsning

firefox vs. explorer problem

Jeg er ved at lave en enkelt skabelon hvor siden bliver bygget op i ene CSS. Bedst som jeg får lavet CSS'en "rigtig" så den passer til explorer så passer den ikke i firefox.
Siden: http://www.x-itin.dk/skabelon/leftmenu_logotopleft.html
CSS koden: står øverst i html dokumentet.
Sådan som den står nu vises den rigtigt i explorer, hvor det der hedder menu mangler i firefox.
Hvad kan jeg gøre for at få det til at virke i begge browsere?

Synes godt om

mclemens Nybegynder

13. september 2006 - 00:38 #1

#menu {
background-color: #4477AA;
left:0px;
margin-top: 0px;
width: 150px;
height: 100%;
border: #000000;
position: absolute;
}

Synes godt om

gider_ikke_mere Nybegynder

13. september 2006 - 00:57 #2

<!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>
<title>Titel i head</title>
<style>

html,body {
margin: 0px;
padding: 0px;
height: 100%;
}

.logo {
background-color: #AA4944;
border: #000000;
height: 150px;
width: 150px;
margin-top: 0px;
margin-left: 0px;
position: relative;
}

.banner {
background-color: #44AA9D;
border: #000000;
height: 150px;
margin-left: 150px;
margin-top: -150px;
position: relative;
}

.menu {
background-color: #4477AA;
left:0px;
margin-top: 0px;
width: 150px;
height: 100%;
border: #000000;
position: absolute;
}

.content {
background-color: #44AA49;
border: #000000;
margin-left: 150px;
margin-top: 0px;
height: 100%;
position: relative;
}

.bottom {
background-color: #AA44A9;
border: #000000;
height: 33px;
width: 100%;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
}
</style>
</head>
<body>

<div id="logo" class="logo">Logo</div>
<div id="banner" class="banner">Banner - kan placeres her eller andet indhold</div>
<div id="menu" class="menu">Menuen - placeres her</div>
<div id="content" class="content">Content - indhold på siden placeres her</div>

<div id="bottom" class="bottom">Bund - placeres tit ©</div>

</body>
</html>

Synes godt om

gider_ikke_mere Nybegynder

13. september 2006 - 00:59 #3

Virker (ser ens ud) i IE6, IE7 og Firefox.

Synes godt om

mclemens Nybegynder

13. september 2006 - 01:06 #4

Den i 13/09-2006 00:38:24 virker også ... dog
bør <class></class> fjernes fra dokumentet..
class tildelinger til elementerne er ikke
nødvendigt - fejlen var som sagt i #menu

margin-left: -150px;

rettet til:

left:0px;

Synes godt om

gider_ikke_mere Nybegynder

13. september 2006 - 01:25 #5

Har jeg glemt nogen?

Synes godt om

mclemens Nybegynder

13. september 2006 - 01:34 #6

Hvad mener du?

... Når jeg snakker om ...
[ Den i 13/09-2006 00:38:24 virker også ... dog
bør <class></class> fjernes fra dokumentet.. ]
Så mener jeg at fejlen i fremvisningen skyldes
at rettelsen var margin-left: -150px til left:0px;

... og at <class></class> i det oprindelige document
ikke bør stå der - dem har du fjernet i dit eksempel
og lavet rettelsen af #menu css'en som nævnt ...

- Du har dog oprettet class defineringer på alle
elementer samtidig ... og det er som sagt ikke nødvendigt
id definering eller class definering er nok i dette tilfælde
... jeg ville nok selv bruge id i dette tilfælde ligesom i det
oprindelige dokument ... Mvh, Clemme :)

...

...

<!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>
<title>Titel i head</title>
<style>

html,body {
margin: 0px;
padding: 0px;
height: 100%;
}

#logo {
background-color: #AA4944;
border: #000000;
height: 150px;
width: 150px;
margin-top: 0px;
margin-left: 0px;
position: relative;
}

#banner {
background-color: #44AA9D;
border: #000000;
height: 150px;
margin-left: 150px;
margin-top: -150px;
position: relative;
}

#menu {
background-color: #4477AA;
left: 0px;
margin-top: 0px;
width: 150px;
height: 100%;
border: #000000;
position: absolute;
}

#content {
background-color: #44AA49;
border: #000000;
margin-left: 150px;
margin-top: 0px;
height: 100%;
position: relative;
}

#bottom {
background-color: #AA44A9;
border: #000000;
height: 33px;
width: 100%;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
}
</style>
</head>
<body>

<div id="logo">Logo</div>
<div id="banner">Banner - kan placeres her eller andet indhold</div>
<div id="menu">Menuen - placeres her</div>
<div id="content">Content - indhold på siden placeres her</div>

<div id="bottom">Bund - placeres tit ©</div>

</body>
</html>

Synes godt om

olebole Juniormester

13. september 2006 - 11:42 #7

Synes godt om

aquafisken Nybegynder

13. september 2006 - 22:03 #8

fantastisk, troede nok det ikke var noget stort der skulle ændres :)
Men hvad er forholdet mellem margin-left og left? Placere "left" bare objektet mod venstre uden at ligge mærke til de andre boxe?

Synes godt om

aquafisken Nybegynder

13. september 2006 - 22:05 #9

siden jeg havde skrevet <class> i koden var fordi jeg var igang med at sætte style på teksten, men tog det af igen for at få boxene til at virke ordenligt.

Synes godt om

mclemens Nybegynder

13. september 2006 - 22:33 #10

left placerer objectet i forhold til sin relative placering (hvis den placeres via. position:relative;) eller i forhold til første øvre element der er placeret relativt ...
margin-left sætter en negativ margin på elementet (rykker elementet mod venstre)...

... Umiddelbart må IE og FF have placeret elementet forskelligt ved position:absolute;
Hvis vi tester dette eksempel kan vi se forskellen ...

<!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>
<title>Titel i head</title>
<style type="text/css">

html,body {
margin: 0px;
padding: 0px;
height: 100%;
}

#logo {
background-color: #AA4944;
border: #000000;
height: 150px;
width: 150px;
margin-top: 0px;
margin-left: 0px;
position: relative;
}

#banner {
background-color: #44AA9D;
border: #000000;
height: 150px;
margin-left: 150px;
margin-top: -150px;
position: relative;
}

#menu {
background-color: #4477AA;

z-index:9;

margin-top: 0px;
width: 150px;
height: 100%;
border: #000000;
position: absolute;

}

#content {
background-color: #44AA49;
border: #000000;
margin-left: 150px;
margin-top: 0px;
height: 100%;
position: relative;
}

#bottom {
background-color: #AA44A9;
border: #000000;
height: 33px;
width: 100%;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
}
</style>
</head>
<body>

<div id="logo">Logo</div>
<div id="banner">Banner - kan placeres her eller andet indhold</div>
<div id="menu">Menuen - placeres her</div>
<div id="content">Content - indhold på siden placeres her</div>

<div id="bottom">Bund - placeres tit ©</div>

</body>
</html>

... I det tilfælde her placerer firefox så elementet til venstre og IE 150 px inde ... det var derfor at den left:0px; hjalp så begge placerede den absolute div ved venstre kant ... Forskellen til renderingen er umiddelbart at banner er placeret via. relative så det reserverer de 150px i plads ved renderingen i IE, men ikke i FF...

Tak for point :)

Synes godt om

aquafisken Nybegynder

13. september 2006 - 22:36 #11

ok, tak for forklaringen mclemens.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS