Przychodze do was z kolejnym problemem, chodzi o pewnie już obgadany tysiące razy temat lecz dla mnie nadal niezrozumiały - box model i jego zła implementacja. W CSS'ie potrafię stworzyć bardzo dużo ciekawych rzeczy, ale to zawsze spędzało mi sen z powiek. Próbowałem, próbowałem i nic. Oto problem: http://www.jedination.neostrada.pl/css/
XHTML:
- Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body xml:lang="pl">
<div id="cont">
<div id="l1">
<div>
Lorem ipsum vita dolor sit amet.
</div>
</div>
<div id="l2">
<ul>
<li><a href="/omg1/">Centrowanie strony</a></li>
<li><a href="/omg2/">Box Model</a></li>
<li><a href="/omg3/">kenny</a></li>
<li><a href="/omg4/">zomo</a></li>
<li><a href="/omg5/">ormo</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
- Kod: Zaznacz cały
body {
margin: 30px 0 0 0;
padding: 0;
text-align: center;
}
#cont {
width: 750px;
margin: 0 auto;
text-align: left;
font:10pt Tahoma;
}
#l1 {
width: 470px;
float: left;
padding: 15px;
}
#l2 {
width: 220px;
float: left;
padding: 15px;
}
#cont #l2 ul {
margin: 0;
padding: 0;
list-style: none;
}
#cont #l2 ul li {
line-height: 20px;
background: url(bull.gif) #FFFFFF no-repeat;
background-position: 0 50%;
}
#cont #l2 ul li a {
padding-left: 20px;
font: 10pt "Trebuchet MS";
text-decoration: none;
color: black;
}
Czy możecie mi powiedzieć jak zrobić dobry css aby w IE oraz inteligentniejszych przeglądarkach strona wyglądała jednakowo? Generalnie nie toleruje hacków, ale jeśli już muszę ...