Gå til innhold

litt trøbbel med CSS

Smeltelim

Av Smeltelim
i Programmering og webutvikling

Anbefalte innlegg

Smeltelim

Smeltelim

Skrevet
Skrevet

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.

 

ff.jpg dette bildet er tatt i FireFox.

 

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

 

ie.jpg

 

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.

Videoannonse

Videoannonse
Annonse
IRRupt

IRRupt

Skrevet
Skrevet (endret)

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 av IRRupt
Loomy

Loomy

Skrevet
Skrevet
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

Smeltelim

Skrevet
  • Forfatter
Skrevet

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:

Equerm

Equerm

Skrevet
Skrevet
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..........

Det er juks :p

 

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

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...