Inline ignores i Safari?
Jeg er i gang med at lave en hjemmeside som forløbigt kan ses på http://sebc.iysik.comBedst som jeg troede den var klar til brug, kommer kunden og siger, at den ikke vises rigtigt på sin iPhone. Pffl. Og ej heller Safari. Suk.
Den virker i IE og i Firefox (http://sebc.iysik.com/uploads/images/SEBC-firefox.png), men i Safari (http://sebc.iysik.com/uploads/images/SEBC-Safari.PNG) er den gal med navigationsbjælken. Så vidt jeg kan se, ignorer Safari "display: inline". Men hvorfor gør den det?
CSS-koden er blevet valideret (med undtagelse af nogle warnings hvad farver angår). Derudover bestræber jeg på, at jeg kun har behov for ét stykke CSS til alle browsere...
Først HTML-koden på elementerne:
<div id="header">
<img src="uploads/images/logo-2.png" alt="SEBC" /> <img src="uploads/images/billede-bar.jpg" alt="" />
<ul>
<li class="activated"><a href="http://sebc.iysik.com/">Forside</a></li>
<li class="parent"><a href="http://sebc.iysik.com/index.php?page=aktiviteter">Aktiviteter</a></li>
<li class="parent"><a href="http://sebc.iysik.com/index.php?page=fokusomraader">Fokusområder</a></li>
</ul>
</div>
Og dernæst det tilhørende stykke CSS:
[code]
#header ul {
display: block;
width: 100%;
margin-top: -5px;
background: url('uploads/images/navbar-background.png') repeat-x;
height: 40px;
text-align: left;
font-size: 10pt;
font-weight: bold;
}
#header li {
display: inline;
}
#header li a:link, #header li a:visited, #header li a:active, #header li a:hover {
display: table-cell;
padding: 0px 10px;
color: white;
background-color: transparent;
text-decoration: none;
height: 40px;
vertical-align: middle;
}
#header li.activated a {
display: table-cell;
padding: 0px 10px;
color: white;
background: url('uploads/images/navbar-active.png') repeat-x;
text-decoration: none;
height: 39px;
vertical-align: middle;
}
[/code]
#header ul {
display: block;
width: 100%;
margin-top: -5px;
background: url('uploads/images/navbar-background.png') repeat-x;
height: 40px;
text-align: left;
font-size: 10pt;
font-weight: bold;
}
#header li {
display: inline;
}
#header li a:link, #header li a:visited, #header li a:active, #header li a:hover {
display: table-cell;
padding: 0px 10px;
color: white;
background-color: transparent;
text-decoration: none;
height: 40px;
vertical-align: middle;
}
#header li.activated a {
display: table-cell;
padding: 0px 10px;
color: white;
background: url('uploads/images/navbar-active.png') repeat-x;
text-decoration: none;
height: 39px;
vertical-align: middle;
}
[/code]
Nogen eksperter? ;)
