5 svar · 631 visningar · startad av morris_the_cat
Hej jag har ett problem med divvar. Kolla denna kod i IE, jag vill få den att se likadan ut i FF. Vad gör jag för fel?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Testsida</title>
<link rel="stylesheet" type="text/css" href="test.css">
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="menycontainer">
<ul>
<li id="active">
<a href="#" id="current">Start</a></li>
<li>
<a href="#">Artist Management</a></li>
<li>
<a href="#">Music Publishing</a></li>
<li>
<a href="#">Comino News</a></li>
<li>
<a href="#">Contact Us</a></li>
<li>
<a href="#">Links</a></li>
</ul>
</div>
<img src="#">
<div id="menu">Menu</div>
<div id="main">Tjoho lkj rlkj rkj rkj rkj rkj rkj rkj rkj rkj rlkj slkj sdklj dlkj
dlkj dlkj dslkj dslkj dslkj d
dlkdslkd slk dsolk Tjo hej hoppsan jkhdjh dkjh d kdkj dkj dkj dkj djkk dkj dkj
dkjdkjdkjdkjdkjd fvkj fkj fkj fkj fkj fkj fkj fkj fkj fkj fk fkj fkj fj fkj fj
fkj fjk fj
</div>
<div id="rightcolumn">News</div>
</div>
<div id="footer"><div align="center">© Copyright bla bla</div>
</div>
</body>
</html>
Och css
body
{
/*padding: 0px;
margin: 0px;*/
font-family: Verdana;
font-size: 80%;
}
#container
{
background-color: Blue;
width: 800;
}
#menycontainer ul{ float: left; margin-left: 0; padding-left: 0; width: 800px; background: Green; font-size: 80%;}
#menycontainer li{display: inline;}
#menycontainer ul a{float: left; text-decoration: none; padding: 0.3em 2em;}
#menycontainer a:link{color: #ffffff;}
#menycontainer a:visited{color: #ffffff;}
#menycontainer a:hover{background: #CCCCFF;}
#menycontainer a#current{background: #CCCCCC; color: #000000;}
#header
{
width: 800px;
height: 120px;
padding: 5px;
background-color: Green;
color: Black;
}
#menu
{
width: 150px;
padding: 5px;
/*background-color: Gray;*/
float: left;
margin: 0px;
border: 0px;
color: Black;
}
#main
{
width: 500px;
padding: 5px;
border: 0px;
background-color: #FFFFFF;
float: left;
color: Black;
}
#rightcolumn
{
width: 150px;
padding: 5px;
/*background-color: Gray;*/
float: left;
margin: 0px;
border: 0px;
color: Black;
}
#footer
{
background-color: Blue;
width: 800px;
color: Black;
}
#image_right
{
padding: 2px;
float: right;
}
#image_left
{
padding: 2px;
float: left;
}
Tacksam för svar!
Martin
1. Posta gärna en sida med koden du kör, så blir det enklare för alla som läser tråden att se vart problemet ligger.
2. Vad är det som inte ser bra ut i båda webbläsarna? Är det ett specifikt lager som inte hamnar där det ska, är det menyn som blir knas etc.?
Nu ligger filerna här:
www.primesth.net/martin/test.html
Det som jag vill åstadkomma är det som händer i IE, nämligen att den blå containern som heter #container skall innehålla de andra boxarna utan att jag anger höjd för #container och låter innehållet styra det. Kanske inte går då jag är ganska ny på att designa med CSS.
Martin
morris_the_cat skrev:
Det som jag vill åstadkomma är det som händer i IE, nämligen att den blå containern som heter #container skall innehålla de andra boxarna utan att jag anger höjd för #container och låter innehållet styra det.
Martin
Jo, det går. Men du har fallit offer för en allvarlig bugg i MSIE. Firefox gör rätt som inte räknar med padding (och border) i bredden. Det gör att boxarna blir bredare i FF och de hamnar utanför den fasta bredd som din #container har. Då faller mao designen.
Läs mer om box model.
Om du ändrar doctypen till, tex
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
så använder IE6 samma box-modell som andra webbläsare. :)