overflow:auto; :)
Frågan#1
Har ett span-element med overflow: scroll. Fungerar fint i IE, får en vertikal scrollbar så jag kan läsa allt i elementet. Men i Firefox får jag en horisontell scrollbar även fast den inte behövs. Hur får jag bort den?
Ta bort horisontell scrollbar?
HTML & CSSur HTML, XHTML & CSS
9 svar · 439 visningar · startad av pettsson
Prövat det också, fortfarande scroll på horisontellt och vertikalt på FF, och fortfarande inte på IE
Varför använder du ett span-element? Testa att använda ett div-element istället med en width satt på det.
Annars underlättar det om du visar lite kod eller en länk till problemet :)
mv icaaq
Så vitt jag förstått är skillnaden mellan dem att div är ett block-element och span är inline, och istället för att styla div till display: inline så kunde jag använda span. Fel?
Koden:
<span style="position: absolute; top: 22em; left: 353px; height: 12.3em; width: 247px; overflow: auto;">
Linked files:<br>
<ul style="margin-top: 2px; margin-left: 2px; padding-left: 2px; list-style-position: outside; list-style-type: none">
<?
$filesdir = opendir($dirname);
while($fname = readdir($filesdir)) {
if($fname != "." && $fname != "..")
print "<li><a href=\"$dirname/$fname\" target=\"_blank\">$fname</a></li>\n";
}
?>
</ul>
</span>
Vad den gör är alltså att loopa ut filerna i en mapp till en lista. Då denna funktion efterfrågades sent i arbetet så är det ont om plats, så därav de lite underliga proportionerna :)
Fast du får inte ha en <ul> i en <span>.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title lang="sv">Kolumner</title>
<style type="text/css">
div {
position: absolute;
top: 22em;
left: 353px;
height: 12.3em;
width: 247px;
overflow: auto;
}
ul {
margin:0;
padding:0
}
li {
display:block;
}
</style>
</head>
<body>
<div>
Linked files:<br>
<ul>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
<li><a href="#">Filen</a></li>
</ul>
</div>
</body>
</html>
Med tanke på att <span> är inline så får det inte ha någon höjd eller bredd. Om du då sätter overflow så kan väl inte webbläsaren veta när det ska bli scroll, eftersom det inte finns någon höjd eller bredd.
Aha, då har jag missuppfattat. Tackar :)
/r
Hm, det funkar dåligt även med div, även om det är rättare :l
Troxy skrev:
Med tanke på att <span> är inline så får det inte ha någon höjd eller bredd. Om du då sätter overflow så kan väl inte webbläsaren veta när det ska bli scroll, eftersom det inte finns någon höjd eller bredd.
Fast position:absolute genererar en blockbox, alltså samma som när man anger display:block och då kan man sätta höjd och bredd även på ett span-element.
pettsson skrev:
Hm, det funkar dåligt även med div, även om det är rättare
Jag vet inte om du testade mitt exempel?
Men en lista skapar alltid utrymme för varje <li>:s markör även om du sätter list-style-type:none
Om du inte vill visa listan som en lista med markörer och ökade vänstermarginaler kan du lika gärna sätta display:block på <li>.
/Red
list-style-position: inside; löser också problemet med utrymmet som tas upp av markörerna.
/Red II
Med andra ord så räcker det att du byter 'outside' till 'inside' i din kod, men jag skulle föredra lösningen med display:block.
Härligt, det funkar :) Många tack