Jag håller på och utvecklar en sida och har nu drabbats av ett otroligt CSS-problem när man tittar på sidan i IE, css:en valideras utan problem men av någon anledning så vill IE inte visa det korrekt. Jag söker en lösning för att fixa till detta, i FF så är det inga problem. Valideringsproblemet för HTML-koden beror på att SELECTen inte ligger i ett blockelement. Ändra till Det visade det sig att det inte var problemet, det var bland annat för att jag inte använde lower case, men det och en hel del annat har jag fixat. Så CSS-problemet återstår. Nu har jag, tack vare Christoffer V, fått en lösning på mitt problem.CSS-strul i IE, men inte i FF.
<b>EDIT:</b> Nu har jag fixat så att html-koden validerar. Bara CSS-strulet kvar :/.
A:link {
color: #666666;
text-decoration: none;
background-color: transparent;
}
A:visited {
color: #666666;
text-decoration: none;
background-color: transparent;
}
A:hover {
color: #666666;
text-decoration: underline;
background-color: transparent;
}
A:active {
color: #666666;
text-decoration: none;
background-color: transparent;
}
body {
background-color: #999999;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
}
.iframe {
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 9pt;
color: #000000;
}
.Category {
background-color: #FFFFFF;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
}
.Menubox {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
margin-left: 20px;
width: 155px;
height: 350px;
padding: 5px;
float: left;
}
.Content {
position: absolute;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 9pt;
color: #000000;
margin-left: 210px;
width: 750px;
padding: 5px;
float: left;
}
.Linkbox {
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
height: 15px;
padding: 5px;
margin: -5px -5px 0px -5px;
}
.Titlebox {
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
width: 750px;
height: 15px;
padding: 5px;
float: left;
margin: -5px -5px 0px -5px;
}
<!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>hjorten.nu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="STYLESHEET" href="hdotnu.css" type="text/css" />
</head>
<body>
<img src="_img/logo_small_trans.png" width="333" height="96" alt="" />
<div class="Menubox">
<div class="Linkbox">
Home <b>·</b> About <b>·</b> FAQ
</div>
<br />
<form action="post">
<select name="cat" onclick="parent.cat.location=this.options[this.selectedIndex].value;">
<option value="blank.php">Choose category</option>
<option value="cat_nature.php">Nature</option>
<option value="cat_parties.php">Parties</option>
<option value="cat_gigs.php">Gigs</option>
<option value="cat_other.php">Other</option>
</select>
</form>
<hr />
<iframe src="blank.php" frameborder="0" width="155" height="250" name="cat"></iframe>
</div>
<div class="Content">
<div class="Titlebox"><b>Hi</b></div>
<br />
<br />
Site not open yet. Please don't spread this URL.
</div>
</body>
</html>
Sv: CSS-strul i IE, men inte i FF.
<code>
<form>
<div>
<select ...>
...
</code>Sv:CSS-strul i IE, men inte i FF.
Sv: CSS-strul i IE, men inte i FF.
Hemligheten var tydligen att IE har problem med padding/margin så man måste använda sig av denna fulfix.
A:link {
color: #666666;
text-decoration: none;
background-color: transparent;
}
A:visited {
color: #666666;
text-decoration: none;
background-color: transparent;
}
A:hover {
color: #666666;
text-decoration: underline;
background-color: transparent;
}
A:active {
color: #666666;
text-decoration: none;
background-color: transparent;
}
body {
background-color: #999999;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
}
.iframe {
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 9pt;
color: #000000;
}
.Category {
background-color: #FFFFFF;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
}
.Menubox {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
margin-left: 20px;
_margin-left: 10px;
width: 155px;
height: 350px;
padding: 5px;
float: left;
}
.Content {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 9pt;
color: #000000;
width: 750px;
padding: 5px;
float: left;
margin-left: 20px;
}
.Linkbox {
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
height: 15px;
padding: 5px;
margin: -5px -5px 0px -5px;
}
.Titlebox {
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #000000;
width: 750px;
height: 15px;
padding: 5px;
float: left;
margin: -5px -5px 0px -5px;
_margin: -5px -5px 0px -3px;
}