23 svar · 701 visningar · startad av yrvaken2
Hej!
Jag har nu länge försökt läsa och lösa detta problem men lyckas inte. Kan någon hjälpa mig tro?
Jag har en mittendel som på sidan med en backgrundsbild som repiterar sig i y-led som går 100% på sidan. Det funkar bra både i ie och ff.
Dock blir det problem i ff när sidan blir mer än 100% så man måste scrolla ner. Då slutar den att repitera backgrundsbilden i ff. Dock funkar det fortfarande fint i ie.
html,body {
height: 100%;
}
#huvud {
min-height: 100%; /* detta är för Firefox */
height: 100%;
background: url("Bilder/huvud_mit.png") repeat-y;
}
#huvud[id] {
height: auto;
}
En lösning kan vara
[red]
#huvud {
min-height: 100%; /* detta är för Firefox */
_height: 100%;
background: url("Bilder/huvud_mit.png") repeat-y;
}
[/red]
Men jag vet inte om det är den bästa llösningen .....
Välkommen till wF anyway :)
mv icaaq
Tackar!
Nej det hjälpte tyvärr inte så mycket!
Jag har redan läst det där och det är så jag gör. Det funkar ju bra tills sidan råkar bli större än fönstret och jag måste scrolla.
Hmm...
... eller också kan man ta till någon av de här lite mer omständliga varianterna om det bara är MSIE man vill fulkoda för (funkar även för andra hack än just 100%höjdproblematiken):
<style type="text/css">
html,body {
height: 100%;
}
#huvud {
min-height: 100%; /* denna är för alla utom MSIE */
background: url("Bilder/huvud_mit.png") repeat-y;
}
</style>
<!--[if IE]>
<style type="text/css">
#huvud {height:100%} /* detta är ett separat hack för MSIE */
</style>
<![endif]-->
eller alternativt (om du inte vill ha CSS-koden liggande i ditt HTML-dokument)
<link rel="stylesheet" type="text/css" href="stilar_fur_alle.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="stilhack_fur_msie.css">
<![endif]-->
där du lägger all CSS för "vettiga" webbläsare i "stilar_fur_alle" och sedan smackar på de skillnader/hacks/fulkodningar som behövs för att få till utseendet även i MSIE i "stilhack_fur_msie.css" ;)
jarvklo: det funkar redan bra i ie, det är firefox det krånglar i när sidan blir så lång att man måste scrolla, tack ändå.
zcorpan: att sätta in backgrounden i html tagen funkar inte så bra!
yrvaken2 skrev:
jarvklo: det funkar redan bra i ie, det är firefox det krånglar i när sidan blir så lång att man måste scrolla, tack ändå.
Det förstod jag - och det brukar kunna bli så när man både sätter height och min-height så att FF kan se dem - vilket inte bör hända om du t.ex. flyttar height: för #huvud till en villkorlig kommentar och tar bort den ur det som FF kan se eller gör som icaaq föreslog ;)
Annars kan du ju har råkat ut för att någon annan stil för ett omgivande element kan ha "ärvts med" så att den påverkar, så jag instämmer med icaaq.. Show us all the code dude !
Hmm...
Ja det blir som du skrev - och det är det nog ingen som tvivlar på...
Men vill du ha hjälp med koden (och inget av de föreslagna trixen hjälper) måste du tillhandahålla mer koddetaljer för att vi skall kunna kunna hjälpa till ;)
Det du råkat ut för är inget ovanligt - men det kan ha flera orsaker och det är omöjligt att gissa utan att se vad du gjort kodmässigt ;)
okej :) jag ska fixa koden!
hmtlkoden:
<div id="centrera">
<!--LOGON-->
<div id="logo"></div>
<!--FLASH MENY-->
<div id="meny">
</div>
<div id="huvudtop"></div>
<div id="huvud">
<!--HÖGERRUTAN-->
<div id="hoger">
<div class="hoger">
<? visaUtbildningar(); ?>
</div>
<div class="topobot"></div>
</div>
<!--VÄNSTERRUTAN-->
<div id="vanster">
<? visaNyheter(); ?>
</div>
</div>
<div id="huvudbot"></div>
<!--BOTTENRUTAN-->
<div id="botten">
<span id="nav"><a href="">Feedback</a> | <a href="">Sitemap</a> | <a href="">Kontakta</a> | <a href="Admin/admin.php">Administration</a></span>
</div>
</div>
CSS koden:
html,body {
height: 100%;
}
body {
background: url("Bilder/bg.png") repeat;
margin: 0;
padding: 0;
color: #333;
font: 10pt Verdana, Tahoma;
text-align: center; /* Behövs för Ie */
}
#centrera {
width: 780px;
height: 100%;
padding: 0;
margin: auto;
text-align: left;
}
/* TOPPEN AV SIDAN */
#logo, #meny {
margin: 0;
padding: 0;
}
#logo {
height: 125px;
background: url("Bilder/logo.jpg") no-repeat;
}
#meny {
height: 51px;
width: 780px;
}
/* HUVUD RUTAN */
#huvud, #huvudtop, #huvudbot {
margin: 0;
padding: 0;
}
#huvudtop {
width: 780px;
height: 10px;
background: url("Bilder/huvud_top.png") no-repeat bottom;
}
#huvudbot {
clear: both;
width: 780px;
height: 10px;
background: url("Bilder/huvud_bot.png") no-repeat top;
}
#huvud {
min-height: 100%; /* detta är för Firefox */
background: url("Bilder/huvud_mit.png") repeat-y;
}
/* Botten */
#botten {
clear: both;
height: 35px;
margin: 0;
padding: 10px 15px;
background: url("Bilder/botbild.png") no-repeat ;
}
ser ut som om du behöver en clearfix till huvudrutan. Testa att sätta overflow:auto på #huvud, eller testa det som finns på http://www.positioniseverything.net/easyclearing.html
/ m a r t i n
overflow: kommer nog inte funka så bra då får jag ju en scroll mitt på sidan och det vill jag inte ha..
Ska ta en titt på det där md clearfix.
Tack!
Hmm...
Vad händer om du provar att använda "min-height-till-FF-och-height-till-MSIE"-tricket på #centrera (istället för att bara begränsa den till just 100%) ?
testade det nu och det hjälpte tyvärr inte heller..
OK - Då är det, som jag ser det , antagligen bara en länk till sidan som kan hjälpa oss att hjälpa dig ;)
