hmm jag tror det.. jag sitter just nu o behandalar dom koderna ni skrev tidigare och testar mig fram :D
tack!
Problem med CSS i IE.
25 svar · 933 visningar · startad av Dirre · sida 2 av 2
när man använt sig av float:left. måste man då skriva något på det som kommer "under". För det är så att det som kommer efter (under) visas inte som det ska eller kronglar. beror på vilken webbläsare.. tacksam för hjälp!
när man använt sig av float:left. måste man då skriva något på det som kommer "under".
man måste nolla marginalerna .. ja
clear:left; clear:right; eller clear:both;
tack... antar att jag ska använda mig av clear:left; för det är så att jag har 3 div-ar som det är float:left; i och det som kommer efter visas jätte konstigt.. det försvinner osv.. :/ eller det ser bra ut i IE men inte i FF... får testa mig fram då :D
Edit:
Efter jag skrev in clear:left; så vart den som ett mellanrum under den div-en som jag inte vill ha!...
Edit2:
Lyckades visst fixa det själv.!
:)
Hur går det?
Gjorde det enklast möjliga css:en för din design och cayas html...med bara float:left...utan clear
Färgade varje div med en bakgrundsfärg...
Oftast blir det fel på det man har efter en float när man inte har satt någon vidd på den.
Om du vill så kopiera in den i ett nytt dokument.
Kommentera bort den översta i css:en *{} och se skillnaden.
Bra att bestämma sig redan från början om man ska låta webläsarna bestämma sina margin och padding, eller om man själv ska ha kontrollen på det.
Enklast tycker jag det är att bestämma själv...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
body{
margin:0px;
width:100%;
color:#FFF;
background:#12335B;
font:11px Verdana,Arial,Helvetica,sans-serif;
text-align:center;
}
#wrapper{
width:564px;
margin-left:auto;
margin-right:auto;
}
#logo{
width:100%;
float:left;
background:#808080;
}
#menu{
width:100%;
float:left;
background:#000;
height:30px;
}
#news{
width:190px;
float:left;
background:#0FF;
height:auto;
}
#match{
width:190px;
float:left;
background:#9370DB;
height:auto;
}
#players{
width:180px;
padding:2px;
float:left;
background:#2A2BBE;
height:auto;
}
#players img{
float:left;
padding:4px;
width:45px;
height:30px;
}
#main{
width:100%;
float:left;
background:#008000;
text-align:left;
height:auto;
}
#main h2{
color:#0F0;
;text-align:center;
}
#main p{
margin-left:10px;
}
#botten{
width:100%;
float:left;
background:#8FBC8F;
height:30px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>#Gross Online</h1>
<h2>Fyndig slogan med relevanta sökord</h2>
</div>
<div id="menu">en meny med knapparna som bakgrund</div>
<div id="news">
<h3>Nyheter</h3>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div id="match">
<h3>Matcher</h3>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div id="players">
<h3>Spelare</h3>
<p><img src="_gfx/players_player1.png" alt="" />
<img src="_gfx/players_player2.png" alt="" />
<img src="_gfx/players_player3.png" alt="" />
<img src="_gfx/players_nopic.png" alt="" />
<img src="_gfx/players_nopic.png" alt="" />
<img src="_gfx/players_nopic.png" alt="" /></p>
</div>
<div id="main">
<h2>Välkommen till #Gross Online!</h2>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
<p>Bla bla bla</p><p>Bla bla bla</p>
<p>Bla bla bla</p><p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>
<div id="botten"></div>
</div>
</body>
</html>
jo då det har gått helt okej efter eran underbara hjälp :D
men det som stör mig är att dem olika webbläsarna läsar av pixel-värdena olika vilket leder till att det kan se lite konstigt ut i vissa läsare... :/
nu ska jag kolla genom det sista tanten posta :D