Vad har jag gjort fel? (XHTML + CSS)

http://frexuz.dyndns.org/frex/?p=portfolio
Varför slutar "sidan", men innehållet fortsätter när scrollar ner?

Default.asp - http://www.aspsidan.se/code/default.asp?c=3911
style.css - http://www.aspsidan.se/code/default.asp?c=3912
(portolio.asp - http://www.aspsidan.se/code/default.asp?c=3913)

Tjenare.

Testa att att lägga en

[red]
<div style="clear: both; line-height:1px; height:0; margin:0;">&amp;nbsp;</div>
[/red]

innan du avslutar #page

mv icaaq

Eller om du ska kika in klassikern

http://www.alistapart.com/articles/fauxcolumns

mv icaaq

din div fungerade inte.. och fauxcolumns fårstår jag inte helt, min #content div slutar ju ända å¨ett konstigt sätt

Hmm...

Prova att sätta

min-height: 100%;

på #content (dvs ta bort den height: 100% du har nu och kör min-height istället) så fixar du problemet i Mozilla, sedan lägger du till

<!--[if IE]>
<style type="text/css">
#content {height:100%}
</style>
<![endif]-->

på raden under din <style>-tagg på alla dina webbsidor ;)

jarvklo skrev:

Hmm...

Prova att sätta

min-height: 100%;

på #content (dvs ta bort den height: 100% du har nu och kör min-height istället) så fixar du problemet i Mozilla, sedan lägger du till

<!--[if IE]>
<style type="text/css">
#content {height:100%}
</style>
<![endif]-->

på raden under din <style>-tagg på alla dina webbsidor ;)

Tror inte det funkar eftersom då borde sidan fungera i IE nu och det gör den inte.

jarvklo skrev:

<!--[if IE]>
<style type="text/css">
#content {height:100%}
</style>
<![endif]-->

på raden under din <style>-tagg på alla dina webbsidor ;)

Jag läste i någon annan tråd att man kunde skriva

* html #content {height: 100%}

i css-filen.

Är det bättre/sämre/likvärdig/får annan effekt än det du skrev, jarvklo?

hypatia skrev:

jarvklo skrev:

<!--[if IE]>
<style type="text/css">
#content {height:100%}
</style>
<![endif]-->

på raden under din <style>-tagg på alla dina webbsidor ;)

Jag läste i någon annan tråd att man kunde skriva

* html #content {height: 100%}

i css-filen.

Är det bättre/sämre/likvärdig/får annan effekt än det du skrev, jarvklo?

http://www.dithered.com/css_filters/css_only/star_html.html

blev samma resultat med din kod jarvklo

alltså när innehållet i #page blir så mycket att man måste scrolla, så "skärs" färgen av på #content, jag fattar inte

hypatia skrev:

Är det bättre/sämre/likvärdig/får annan effekt än det du skrev, jarvklo?

Skillnaden är att "Star html Selector Bug" - koden funkar pga just att den löser ut en bugg i MSIE (och kanske tillochmed att MSIE felhanterar kod på ett visst sätt), medan koden med villkorliga kommentarer är en "ordinarie funktion" i MSIE som utför en dokumenterad och planerad funktion i MSIE ;)

Med tanke på att MS enligt uppgift planerar att släppa en uppdaterad MSIE till sommaren (som ingen än så länge vet något om) kan man kanske anta att det finns risk för att en del "CSS-hacks" som stödjer sig på buggar i MSIE6 slutar fungera pga att buggarna blir rättade... Medan kod som lutar sig på dokumenterade beteenden (och standard) kan antas ha större "chans" att fungera även i MSIE7 - men, som sagt, det är ingen utom MS som *vet* vad som kommer att hända med alla "CSS hacks" som bygger på MSIE-buggar ;)

>>Frexuz - Ajdå... vi får väl kolla din kod lite noggrannare då ;)

Aha! Tack jarvklo! :D
Men man kanske kan hoppas på att den uppdaterade MSIE även kan följa standarden lite mer och till och med "förstå" min-height? ;)

Frexuz, testa att göra samma sak som jarvklo skrev, fast på #page.

inget nytt händer :(

Hmm....

Den direkta orsaken är att du har position:absolute på #page...

Ett block som ligger med position:absolute "lyfts upp" utanför det block den ligger i (dvs den blir ett nytt "lager" som ligger "ovanpå" #content).

Men tar jag bara bort position:absolute, så sticker andra delar av sidan iväg åt olika håll...

Se över dina positioneringar lite! En del av dem behövs kanske inte alls...

okej, jag får väl testa lite nya ideér. tack

ändrade:

#page {
	width: 430px;
	margin-left: 145px;
	padding-top: 135px;
	position: absolute;
	}

till:

#page {
	width: 430px;
	padding-left: 145px;
	padding-top: 135px;
	margin-right: 10px;
	float: right;
	}

sen lade jag <div id="left"> EFTER <div id="page"> istället, så nu fungerar det. (egentligen vet jag inte exakt hur, satt och testade bara)

Inte i FireFox ;)

Testa mitt förslag högst upp i denna tråd för att få det att funka....

mv icaaq

installerade opera,firefox,netscape och märkte det samma :)

ditt förslag funkar för opera,firefox,netscape , men blir helt fel i IE :(

#clear {
	clear: both;
	line-height:0px;
	height:0;
	margin:0;
	}

	<!--[if IE]>
	<style type="text/css">
	#content {
		height:100%
		}
	#page {
		width: 430px;
		padding-top: 135px;
		margin-right: 8px;
		float: right;
		}
	#clear {
		position: absolute;
		}
	</style>
	<![endif]-->

och så satte jag denan divven efter #LEFT, som är efter #PAGE
<div id="clear">& nbsp;<div>

det fungerar iaf , vad tror du om denna lösningen?

Whatever works - as long as it validates ;)

Kort sagt - är du bara nöjd själv så är det en bra lösning !