Overflow

Jag använder koden nedan för att få lodräta streck på en sida. I IE ser det bra ut och alla streck stannar på samma ställe längst ner på sida. I firefox tar strecken slut där diven får slut på innehåll. se bild (http://www.best.nu/temp/fel.jpg)
Hur ska jag lösa det?

#container { 
	width:700px;
	background: transparent url(../first_top2.jpg) no-repeat top left; 
	border-left-color: #333333;
	border-left-width: 1px;
	border-left-style: dotted;
	border-right-color: #333333;
	border-right-width: 1px;
	border-right-style: dotted;
	height: 100%;
	overflow: visible;
	position:relative;
	margin: 0 auto;
	
}

Hmm..

Det går inte att säga utan att få se din kod är jag rädd...

1. Det kan bero på <!DOCTYPE
2. MSIE gör notoriskt fel (dvs inte som ala andra och inte enligt standard :P ) när det gäller just 100% höjd i många fall
3. Det är beroende på om det omslutande blocket har en absolut eller relativ höjd, och om den relativa höjden i så fall kan bero av en "auto" eller av en fast höjd "längst ut"
4. Det kan påverkas av ev. block inuti #container som är absolut positionerade eller utlagda med float...
5. Och det finns säkert fler små fler små illvilliga detaljer som kan spela in beroende på en mängd andra faktorer...

Så - mer kod (dvs både CSS och HTML) behövs för att vi skall kunna komma med konstruktiva förslag utan behöva gissa fel och orsaka förvirring på vägen mot lösningen ;)

Du har inte möjlighet att lägga upp sidan på nätet nånstans ett tag ? (t.ex. på "Mina filer" här på wF)

Annars är just vertikala linjer ett känt problemområde, och en vanlig lösning är att peta dit linjen med en bakgrundsbild istället på det sätt som beskrivs t.ex. här: http://www.alistapart.com/articles/fauxcolumns/

Sidan finns på http://www.best.nu/scout2 och min css fil finns på http://www.best.nu/scout2/css/first_page.css
Hoppas detta hjälper.

Hmm...

Jodå. Jag tror det ;)
*Gissningsvis* löser detta resoneman/förslag problemet (jag har inte haft möjlighet att testa - men jag tycker mig känna igen fenomenet)

#main är en float, och den ligger i detta fall "ovanpå" #container på ett sådant sätt att den inte påverkar höjden på denna alls... (känt fenomen)

Standardlösning: lägg in en "clearing-div"

<div style="clear:both">&amp;nbsp;</div>

längst ner i #container.
Du kan begränsa höjden på de tomma "clearing-diven" om du vill genom att även lägga till

font-size:1px; line-height:1px

i style... (eller via stilmallen om du hellre vill det ;)

Hjälper inte det, finns det fler möjligheter...

Det hjälper inte med att lägga in en "clearing div" då blir det ingen skillnad. Om jag lägger till

font-size:1px; line-height:1px

Så blir hela sidan förstörd så nånting händer i alla fall.