litt trøbbel med CSS

Smeltelim · 18. september 2004

Jeg driver å tester litt med CSS og har støtt på et problem.

jeg skal ha en DIV ned på venstre side av skjermen, denne skal være 20px bred.

på denne skal det være noen linker (DIV's), disse skal ligge litt inne i den linjen og stikke litt utenfor som vist på bildet under.

dette bildet er tatt i FireFox.

Når jeg åpner siden i IE så blir det en helt annen sak.

hvordan kan jeg få det til å bli sånn som det er i FireFox i IE?

her er en Link til siden.....

her er koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style>
body {  background-color: #000;
 font-family: verdana;
 font-size: 14px;
 margin-top: 10px;
 margin-left: 0px;}

#linje {	background-color: #223131;
 border-color: #638485;
 border-width: 2px;
 border-style: solid;
 border-left: none;
 position: relative;
 left: 0px;
 height: 200px;
 width: 20px;
 padding-top: 5px;}

.knapp a, knapp a:visited
    {  background-color: #223131;
 color: #7F8385;
 border-color: #638485;
 border-width: 2px;
 border-style: solid;
 width: 100px;
 height: 20px;
 position: relative;
 float: left;
 visibility: visible;
 display: block;
 text-decoration: none;
 font-weight: bold;
 text-align: right;
 margin-top: 5px;
 margin-left: 5px;
 padding-right: 2px;}

.knapp a:hover, knapp a:active
    {  color: #11C7CA;
 background-color: #364E56;
 text-decoration: none;}
</style>
</head>
<body>


<div id="linje">
<div class="knapp">
 <a href="#1">Link1</a>
</div>
<div class="knapp">
 <a href="#1">Link2</a>
</div>
<div class="knapp">
 <a href="#1">Link3</a>
</div>
</div>


</body>
</html>

dette er bare testing, jeg har ikke planer om å bruke det som en meny på en side, så jeg trenger ikke kommentarer om hvor stygt det er, dårlige farger osv.

IRRupt · 18. september 2004

Det du må gøre er å sette dette i body:

body { 
margin: 0px;
padding: 0px;
}

Så må du tilpasse hver enkelt div med tanke på padding og margin i etterkant. Jeg hadde samme problemet som deg: i FF ble alt vist korrekt, mens IE rotet til alt sammen.

EDIT: Skriveleif

Endret 18. september 2004 av IRRupt

Loomy · 18. september 2004

Det du må gøre er å sette dette i body:
body { 
margin: 0px;
padding: 0px;
}
Så må du tilpasse hver enkelt div med tanke på padding og margin i etterkant. Jeg hadde samme problemet som deg: i FF ble alt vist korrekt, mens IE rotet til alt sammen.

EDIT: Skriveleif

Sikker på det ikke er

* {
margin:0;
padding:0;
}

du mener?

Ser ikke noen grunn til at body'ens margin eller padding skal skape problemer for denne situasjonen :hmm:

Smeltelim · 18. september 2004

Nå er jeg ikke helt med her.

Jeg setter

 
margin: 0px;
padding: 0px;

inn i body, da flytter det seg helt inntill venstre side og toppen.

men jeg skjønner ikke hva jeg skal sette som padding og margin for at IE skal slutte og endre bredden til "linje" diven. :blush:

IRRupt · 18. september 2004

Var nok litt for kjapp :love:

Vil ikke det å ha et bakgrunnsbilde i #linje istendfor bakgrunnsfarge løse problemet?

Smeltelim · 18. september 2004

fikk ordna det med et bakgrunnsbilde :w00t:

rart jeg ikke tenkte på det selv :hmm:

men det føles litt som "juks" å løse det sånn..........

Equerm · 19. september 2004

fikk ordna det med et bakgrunnsbilde
rart jeg ikke tenkte på det selv

men det føles litt som "juks" å løse det sånn..........

Det er juks

Men så lenge det fungerer som det skal og ikke er helt på jordet så er det vel bra

Logg inn

litt trøbbel med CSS

Anbefalte innlegg

Smeltelim

Videoannonse

IRRupt

Loomy

Smeltelim

IRRupt

Smeltelim

Equerm

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer