Tälläinen ihme ongelma on, enkä millään keksi miksi Firefoxi ei osaa laskea pikseleitä oikein, vai onko joku muu teksti rikkonut eheyden:
navigointi palkkini näyttää määritelmällä padding: 0px 0 0px 0; todella laihalta.
kun laitan paddingiksi 1px 0 1px 0; niin yhtäkkiä se lihavoituu jollain 30 pikselillä, mikäköhän bugi lie?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title>Roomba imurirobotit - Roomba.fi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="title_part">
</div>
<div id="navi">
<ul>
<li><a href="kauppa.php">Kauppa</a></li>
<li><a href="kauppa.php">joku</a></li>
<li><a href="kauppa.php">joku2</a></li>
<li><a href="kauppa.php">yhteys</a></li>
<li><a href="kauppa.php">tyo</a></li>
</div>
</body>
</html>
+CSS
#body
{
padding: 0px;
}
#navi ul li
{
display: inline;
list-style-type: none;
color: white;
}
#navi
{
padding: 1px 0 1px 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: green;
margin-top: 100px;
/*vertical-align: middle;*/
}
#navi a, #navi a:visited, #navi a:hover, #navi a:active
{
text-decoration: none;
}Kun määrität diville täytettä, sen sisällä olevan ul-elementin marginaali asettuu määritetyn täytteen sisäpuolelle; muuten marginaali saisi jäädä divin ulkopuolellekin. Tämän olisit voinut selvittää myös omatoimisesti Firefoxin Firebug-laajennoksella, joka osaa näyttää elementtien osien rajat.
Ota turha div pois ja käytä pelkkää ul-elementtiä (ul#navi). Lisää myös puuttuva sulkutagi </ul>.
Hei kiitti Metabolix, sulla ei näytä taidot ruostuneen :)
Voinko samassa kysyä vielä sellaista, että miksi toi li elementti ei jostain syystä hyväksy leveyttä esim. witdth: 100px. Kun laitan kehykset niin huomaan, ettei sen leveys olekaan se mikä määritetty?
Yksinkertaisesti siksi, että inline-elementille ei voi määrittää leveyttä. Voit kuitenkin vaihtaa display-arvoksi inline-block.
Vanhat IE:t eivät tue inline-blockia kuin luonnollisille inline-elementeille, joten niitä varten pitää tehdä ehdollisilla kommenteilla (tiedät kai?) oma tyylitiedosto, jossa laitetaan tilalle kaikesta huolimatta pelkkä inline.
Joo, no samapa tuo, kai riittää, että IE 7 tai 8 eteenpäin toimii. Enköhän saa noi if-lauseet aikaseksi, jos tarpeen.
Kiitos jälleen tiedosta, olet suuri apu Metabolix.
Aihe on jo aika vanha, joten et voi enää vastata siihen.