Hjälp
Jag har gjort en weblayout baserad på HTML 4.01 och CSS. Både stilmallen och HTML-koden är validerad med den validerare som finns på www.w3c.org. Kortfattat består designen av en wrapper som är centrerad på sidan. I wrappern finns en header, en meny, ett fönster och en footer. Alla är inneslutna i DIV-taggar och utseendet helt kontrollerat i en extern CSS-fil. Menyn är gjord i en iframe som ligger i meny-diven för att jag ska slippa ändra menyn för varje sida om jag vill lägga till alternativ. iframen har i sin tur en extern CSS-fil som styr dess layout.
I Firefox kan jag inte styra iframens storlek. Själva framen blir mindre än menyn trots att höjden är satt till 100% i stilmallen. Det gör att man kan skrolla menyn med musens skrollhjul. I IE blir det en vit rand under menyn, trots att det bara ska vara menyalternativen som har vit bakgrund. Själva dokumentet har blå bakgrund. I IE uppstår dock ingen skrollning.
Koden för själva menyn är väldigt enkel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="sv"> <head> <title>Meny</title> <base TARGET="_top"> <link rel="stylesheet" href="lmeny.css" type="text/css"> </head> <body> <ul> <li id="titel">Meny</li> <li><a href="definition.html">Definition</a></li> <li><a href="argument/index.html">Argument</a></li> <li><a href="blandat.html">Övrigt</a></li> <li><a href="test.html/">Test</a></li> <li><a href="kontakt/index.html">Kontakt</a></li> <li><a href="om.html">Om sidan</a></li> <li><a href="om.html#cookies">Om cookies</a></li> </ul> </body> </html>
Stilmallen likaså:
html, body {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 12Px;
background-color: transparent;
margin: 0;
text-align: left;
}
ul {
text-align: left;
margin: 1Px;
padding: 0;
border: 1Px outset black;
max-width: 500Px;
background-color: transparent;
}
ul li
{
list-style: none;
background-color: #FFF;
color: black;
border: 1Px outset black;
border-top: none;
margin: 0;
padding: 1Px;
white-space: normal;
vertical-align: center;
}
ul li#titel
{
font-weight: 900;
font-size: 120%;
border-top: outset;
}
ul li a
{
display: block;
text-decoration: none;
}
ul li a:link
{
color: #000020;
background-color: #FFF;
}
ul li a:visited
{
color: #606060;
background-color: #FFF;
}
ul li a:hover
{
color: #FFF;
background-color: #000;
}
ul li a:active
{
background-color: #000;
color: red;
}Det problem jag har uppstår även om jag tar bort all text och annan information från dokumentet som länkar till iframen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="sv"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <div id="lmeny"> <iframe src="lmeny.html" scrolling="no" frameborder="0" title="meny">Om du ser detta meddelande beror det på att din webläsare inte kan visa iFrames, eller att du har stängt av funktionen. För att se menyn som en egen fil, gå till <a href="lmeny.html">lmeny.html</a></iframe> </div> </body> </html>
Relevanta delar av stilmallen (dvs de som används av de element som finns med i ovanstående exempel):
html, body {
background-color: #EEE;
text-align: center;
font-family: Arial, sans-serif;
font-size: 100%;
}
#lmeny {
position: relative;
float: left;
width: 25%;
min-width: 150Px;
height: 50%;
min-height: 200Px;
overflow: hidden;
background-color: inherit;
margin: 0;
margin-top: 2Em;
padding: 0;
padding-bottom: 10Px;
text-align: center;
}
iframe {
position: relative;
vertical-align: top;
margin: 0;
padding: 0;
padding-bottom: 1Em;
background-color: inherit;
width: 150Px;
height: 100%;
}Jag förstår inte var felet ligger. Någon som kan hjälpa mig?
