Gå til innhold

Finn feilen i css-koden...

RulleRimfrost

Anbefalte innlegg

RulleRimfrost

RulleRimfrost

Skrevet
Skrevet

Sitter her å sliter litt med css for en meny. Jeg har en meny basert på flat liste, der IE kutter vekk toppen av knappene. Frustrerende.

Noen som kan se feilen ?

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<style type="text/css">

#topmenu {
float:right;
height:30px
}
#menulist_root_top {
font:small-caps bold 1em sans-serif;
margin:0 12px 0 0
}
#menulist_root_top li {
display:inline;
list-style-type:none;
margin:0 0 0 2px;
padding:6px 7px;
border:1px #000 solid;
background:#dfdfdf
}
#menulist_root_top a {
color:black
}
#menulist_root_top a:hover {
color:blue
}

</style>
</head>
<body>

<div id="topmenu">
<ul  id="menulist_root_top">

<li id="menuitem_1_top">
<a href="#" class="mainlevel_current_top">Link 1</a></li>

<li id="menuitem_2_top">
<a href="#" class="mainlevel_top">Link 2</a></li>

<li id="menuitem_3_top">
<a href="#" class="mainlevel_top">Link 3</a></li>

<li id="menuitem_4_top">
<a href="#" class="mainlevel_top">Link 4</a></li>
</ul>
</div>

</body>
</html>

post-3875-1179906026_thumb.jpg

Videoannonse

Videoannonse
Annonse
Teig

Teig

Skrevet
Skrevet

Er det bare IE som kutter toppen? Er du sikker på at du har angitt riktig høyde på linkene? Prøv med et par px ekstra på høyden på linkene og se om det funker.

RulleRimfrost

RulleRimfrost

Skrevet
  • Forfatter
Skrevet (endret)

Sitter på maskin standardisert med IE uten admin, men har sett at Opera fikser det, og tegner 1px border rundt hele knappen.

Uansett høyde, margin eller padding på div#topmenu så kutter IE vekk den øverste borderen rundt li-elementet...

 

Om jeg setter 0 padding og border rundt a-elementet, så tegner den ramme rundt hele, men med padding 6px 7px så kutter den toppen. Merkelig

 

Viste seg å være en "hasLayout" issue. Position:relative på ul fiksa det...

Skulle hatt faktura-adressen til MS utvikleravdelingen.

Endret av RulleRimfrost
RulleRimfrost

RulleRimfrost

Skrevet
  • Forfatter
Skrevet (endret)

Joa. Prøvde det litt, men det setter feil rekkefølge på linkene [link 3] [link 2] [link 1], og siden dette er et cms vil det forvirre brukere.

 

Det er nesten fristende å lage browsersniffer og separat css...

 

Edit:

Heh. Dette er jo gøy...

Nå må jeg skrive html-koden for listen uten mellomrom, eller så vil IE sette inn mellomrom mellom il-elementene mine.

<div id="topmenu">
<ul  id="menulist_root_top">
<li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li>
</ul>
</div>

Dette er jo håpløst.

Endret av RulleRimfrost
haugsand

haugsand

Skrevet
Skrevet

Akkurat den tolkningen er ikke nødvendigvis på trynet. Det kommer jo mellomrom mellom teksten i dette tilfellet også:

 

<span>Nummer 1</span> <span>Nummer 2</span>

haugsand

haugsand

Skrevet
Skrevet (endret)

Bare som et lite apropos: Elementer med float oppfører seg som blokkelementer, så display: block; i koden ovenfor vil være overflødig.

 

Det finnes en IE-bug som fordobler horisontal margin i den retningen elementet floates, og for å løse dette problemet, legges display: inline; til.

 

Siden elementer med float som nevnt samtidig er blokkelementer, vil ikke den siste koden ha noen innvirkning på fungerende nettlesere.

Endret av haugsand
eigan

eigan

Skrevet
Skrevet

Sant haugsand, er ikke så rik på kunnskap, driver mest med testing osv, så fungerer det, så fungerer det, har aldri tenkt på å fjerne noe :p

 

OnTopic

Prøv å heller sett border inn i a. Men da tror jeg listen må være i block (min første post(i denne tråden))

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