Gå til innhold

Float problem med CSS i IE [Løst]

Canute

Anbefalte innlegg

Canute

Canute

Skrevet
Skrevet (endret)

Heisann.

Holder på med en side, på siden har jeg en del menyer på venstre side. Jeg har gjort det slik at du kan "minimisere" og "maksimisere" dem for at de ikke skal ta for stor plass. Ble veldig fornøyd med resultatet i firefox som jeg bruker til daglig. Åpnet det i Opera, nesten helt perfekt. Til slutt åpnet jeg det i IE - uh oh, mye gale. Fått fikset på alt utenom dette med menyen.

 

post-29646-1150759781_thumb.jpg

 

 

Htmlen.

<div id="toplists">
<div class="toplist">
<a href="index.php?t=off"><img src="kryss.gif" class="kryss"></a>
<h1>Toplist</h1>
<p><a href="index.php?t=ringnes">Ringnes</a></p>
(...)
</div>
</div>

 

Css

#toplists {
float: right;
}

.toplist {
width: 90px;
border: 1px dashed black; 
margin-bottom:10px;
}

.toplist h1 {
padding: 2px;
padding-bottom: 0px;
font-size: 14px;
font-stretch: narrower;
font-weight: bold;
background-color: #BCD2E6;
width: 100%;
margin-bottom: -1px;
border-bottom: 1px dashed black;
}

.kryss {
float: right;
padding: 4px;
border: 0px;
}

Endret av Canute
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
-morten

-morten

Skrevet
Skrevet (endret)

Heh. Kopierte alt inn i en html-fil for å se på saken, men her ser det riktig ut i IE, og feil i Opera, og en mellomting i FF.

 

Edit: Win2K, IE6, Opera 8.54, FF 1.5.0.4

Opera 9b ble nesten riktig.

Endret av -morten
Lenke til kommentar
Canute

Canute

Skrevet
  • Forfatter
Skrevet (endret)
Heh. Kopierte alt inn i en html-fil for å se på saken, men her ser det riktig ut i IE, og feil i Opera, og en mellomting i FF.

 

Edit: Win2K, IE6, Opera 8.54, FF 1.5.0.4

Opera 9b ble nesten riktig.

6342880[/snapback]

Hm, WinXP her da.

 

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

body {
background-color: white;
color: #326487;
font: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#contentwrap, #bildewrap {
vertical-align: top;
position: absolute;
top: 159px;
left: 10px;
padding: 5px;
border: 1px solid #627EB7;
width: 800px;
background-color: #E2EBF4;
}

#navlist {
position: absolute;
top: 120px;
left: 40px;
font-size: 20px;
}

#navlist
{
padding: 5px 0;
margin-left: 0;
border-bottom: 1px solid #627EB7;
font: bold 14px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px;
margin-left: 3px;
border: 1px solid #627EB7;
border-bottom: none;
background: #BCD2E6;/*#E2EBF4;*/
text-decoration: none;
}

#navlist li a:link { color: #326487; }
#navlist li a:visited { color: #326487; }

#navlist li a:hover, #navlist #current a
{
color: #000;
border-color: #227;
background: #70A1CA;
}
.kryss {
float: right;
padding: 4px;
border: 0px;
}
h1 {
font-size: 15pt;
font-weight: lighter;
margin: 0;
margin-bottom: 1px;
}
p {
margin: 0px;
}	

p.typ {
font-weight: 600;
}

#toplists {
float: right;
}
.toplist {
width: 90px;
border: 1px dashed black; 
margin-bottom:10px;
}
.toplist h1 {
padding: 2px;
padding-bottom: 0px;
font-size: 14px;
font-stretch: narrower;
font-weight: bold;
background-color: #BCD2E6;
width: 100%;
margin-bottom: -1px;
border-bottom: 1px dashed black;

}
.toplist p {
font-size:14px;
padding-left: 5px;
}
.toplist p a {
color: #326487;
text-decoration: none;
}
.toplist p a:hover {
color: black;
text-decoration: none;
}

</style><title>blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>


<div id="navlist"><ul>
<li id="current"><a href="index.php"><span>Home</span></a></li>
<li ><a href="index.php?side=login"><span>Log in</span></a></li>
<li ><a href="index.php?side=reg"><span>Register</span></a></li>
<li ><a href="index.php?side=about"><span>About</span></a></li>
</ul>
</div>
<div id="contentwrap">	

<div id="toplists">
<div class="toplist">
<a href="index.php?t=off"><img src="kryss.gif" class="kryss"></a>
<h1>Toplist</h1>
<p><a href="index.php?t=ringnes">Ringnes</a></p>
<p><a href="index.php?t=tuborg">Tuborg</a></p>
<p><a href="index.php?t=carlsberg">Carlsberg</a></p>
</div>
</div>

</div>
</body>
</html>

 

Sånn, prøv å ta den inn i browseren.

post-29646-1150762734_thumb.gif

Endret av Canute
Lenke til kommentar
Canute

Canute

Skrevet
  • Forfatter
Skrevet
Da ble det likt som deg ja.

Hadde ikke med noe doctype i fila mi, så den ble jo da rendra i quirksmode. Tenkte ikke på det..

 

Men løsningen er å fjerne width: 100%; for .toplist h1. Da ble det helt riktig i alle tre :)

6347350[/snapback]

Aha, den hadde jeg gått glipp av.

 

Evig takknemlig :D

Lenke til kommentar

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