26 svar · 1 078 visningar · startad av Nipon
Hej hej!
Har lite undringar angående firefox.
För mig verkar det som om det ständigt blir en bottom-marginal på typ 5px när man infogar en bild...
Dessutom verkar det som om bläddringslisten alltid läggs "utanför" när man infogar en box med "overflow: auto". Alltså widht + bredden på listen, liksom...
Stämmer det här eller har jag fått hjärnsläpp? Har sökt här i forumet men hittade inget om det.
Hmmm!
Vad gäller dina bilder som du lägger in kan du ange padding och margin på dem.
img
{
margin: 0px;
padding: 0px;
}
Vad är det för box du infogar och som du sätter overflow: auto på?
Varför skulle man behöva sätta padding till 0 på en bild? btw, det är onödigt att skriva px efter nollorna eftersom noll alltid är noll oavsett enhet.
Det är alltid bra praxis att vara koncekvent :)
Tack för svar!
Jora! Visst kan man göra som du föreslår soderlund! Det har jag gjort oxå och det löser ju problemet. Men som sagt. Egentligen ska man väl inte behöva det...
Så vitt jag vet används "overflow" för att ange vad som händer med ett element när innehållet tar större plats än arean så att säga. Då kan man vad jag känner till ange: auto, scroll, hidden eller visible...
Jag brukar använda det när jag vill att lite mer text ska få plats på ett avgränsat område. Jag brukar skapa en klass eller id och använda "div".
Om jag fattar ditt problem med bilden rätt så borde inte margin:0 lösa problemet...är du säker?
Jag skulle ha satt vertical-align: bottom på bilden eftersom standard värdet är 'basline' vilket är strax ovanför nederkanten på elementet det ligger i.
http://www.autisticcuckoo.net/arkiv.php?id=2005/01/13/block-mot-inline-3
Att scrollisten läggs utanför din <div> låter inte heller riktigt. Kan du visa lite kod?
Okej! Ber tusenmillioner gånger om ursäkt för frågor om fel som inte finns... Frågan om bilder var lite ogenomtänkt och snabbskrivet... Det läggs inte alls till någon botten-marginal - helt fel av mig. Trodde att det fixat sig med margin & padding - men inte! Problemet jag hade låg lite längre upp... En j-la tabell. Sorry! Tack för länken zcorpan!
Angående boxen och scrollisten:
.box
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 12px;
height: 116px;
width: 300px;
overflow: auto;
padding: 3px;
border: 5px solid #CCCCCC;
}
och
<div class="box">
<p>Text</p>
</div>
Hmm! Hittade inget innehåll i din mapp där zcorpan... En illustrativ bild men... otherwise nada!
Dessutom verkar det som om bläddringslisten alltid läggs "utanför" när man infogar en box med "overflow: auto". Alltså widht + bredden på listen, liksom...
Min skärmdump illustrerade att bläddringslisten är innanför boxen och bredden tar inte hänsyn till bläddringslisten. Eller har jag missuppfattat något?
Nädå ingen missuppfattning! Men jag var ute efter skillnader i olika webläsare.
Har kollat lite och omformulerar frågan... Problemet har liksom inte med overflow att göra som jag i min enfald trodde.
Alltså:
Om man har en box med bredd på låt oss säga 150px, så ser det fint och likadant ut i "alla" webläsare. Men om man får för sig att man vill ha "padding" och en "border" på den där boxen... Då lägger firefox och netscape det utanför de 150 pixlarna medan de i IE och opera hamnar innanför.
Nåt måste va det rätta... Vad är standard? Och är det nån som vet om det går att komma runt?
TACK zcorpan! Fungerar PERFEKT!
Har kollat i IE, Fireox & Netscape!
Så här gjorde jag:
html>body .box
{
width:150px;
}
.box
{
height: 150px;
width: 150px;
background-color: #cccccc;
border: 20px solid;
padding: 30px;
width: 250px;
voice-family: "\"}\"";
voice-family:inherit;
overflow: auto;
}
och på sidan:
<div class="box">
---- Innehåll ----
</div>
"width: 250px" är alltså bredden på boxen plus padding och border åt båda hållen!
Phu! Fixat! Toppen! Tack!
:)
Fast det verkar inte stämma riktigt. Jag skulle göra såhär istället:
<!-- Nånting före doctypen ser till att IE6 körs i tolerant läge,
vilket gör att den använder den felaktiga boxmodellen. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Test</title>
<style type="text/css">
.box
{
height: 150px;
width: 150px;
background-color: #cccccc;
border: 20px solid;
padding: 30px;
overflow: auto;
}
</style>
<!--[if IE]><style type="text/css">
.box {width: 250px; height: 250px;}
</style><![endif]-->
<div class="box"><p>Test</p></div>
Okej... Så kan man ju oxå göra!
Såhär:
Om man använder korrekt DOCTYPE så uppstår enligt min erfarenhet inte det här problemet...
Alltså:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
eller
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
MEN... Nu skulle jag av fånig orsak ( :r vill ha en IE scrollbar ) vilja använda den här:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
och då blir det så här dumt...
Koden jag skrev tidigare fungerar - men inte i Opera vid närmare koll ( Har lite problem med omladdning av sidor där! Sorry!)
Din kod, zcorpan, fungerar lika bra och är enlkare tycker jag - men inte heller den i opera...
Och visst är det så att IE-scrollkod inte funkar med de lite mer korrekta DOCarna?
Huh? Vilken version av Opera kör du? Det funkar för mig.
Med "IE scrollbar", menar du att du vill färga bläddringslisten? Gör såhär:
html, body {
/* färga bläddringslisterna för IE */
}
Så fungerar det både när IE är i tolerant läge och standardläge. (Notera att i mitt exempel går IE i tolerant läge pga. kommentaren ovanför doctypen.)
Problemet med boxmodellen uppstår i IE5 oavsett vilken doctype du använder, så det är lika bra att ta hänsyn till det. :)
Tack för all hjälp!
Jo, jag hängde med på det där med kommentaren innan DOCTYPE'n!
Jag har Opera (gratisvarianten) Version: 7.54 Build: 3865.
Det där med "html, body" kände jag till men jag ville ha scrolllisten i själva boxen och fick inte det att funka. Men... När jag skrev in en scrollkod i bodyn - så funkade det helt plötsligt i boxen oxå - och det gick bra att ha andra färger med... Skumt!
Summa summarum: nedanstående kod ser likadan ut i Firefox, Netscape, IE6 och min opera i alla fall. Phu!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>test</title>
<style type="text/css">
<!--
html, body { scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF; }
div.box
{
height: 150px;
width: 150px;
background-color: #cccccc;
border: 20px solid #000000;
padding: 30px;
overflow: auto;
scrollbar-face-color: #cccccc;
scrollbar-highlight-color: #cccccc;
scrollbar-shadow-color: #cccccc;
scrollbar-3dlight-color: #cccccc;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #cccccc;
scrollbar-darkshadow-color: #cccccc;
}
-->
</style>
</head>
<body>
<div class="box">
--- Innehåll ---
</div>
</body>
</html>
En sista fråga (hoppas jag)! Zcorpan, fixar ditt lilla hack så att det funkar i IE5?
:)
<!--[if lt IE 6]><style type="text/css">
.box {width: 250px; height: 250px;}
</style><![endif]-->
Tack! Men ursäkta en imbicill stackare...
En ALLRA sista fråga: Nu använder jag en extern stilmall. Hur gör man då... Funkar det att skriva bara din kod i "head" och resten i mallen...? :l