webForumDet fria alternativet

Inkonsekvent css-fel

3 svar · 474 visningar · startad av nakoz

nakozMedlem sedan dec. 1999653 inlägg
#1

Hej!

Jag är ingen jättefena på positionering med css men till slut tråcklat mig fram till en rätt okej sida som SÅNÄR fungerar bra.

Ena gången (Se bifogad fil SS_01) när man precis kommit in på en av undersidorna så visas "bottom"-diven mitt i texten.
En enkel reload/F5, gör dock att den hoppar ner till sin tilltänkta plats (således SS_02).

Nedan följer upplägget på sidan och jag vet inte om det direkt syns något som kan ha med detta att göra?

<html lang="sv" style="overflow: scroll;">
<head>
	<title>titel</title>
	<meta Content-Type: text/html; charset=utf-8>
	<link href="mincss.css" rel="stylesheet" type="text/css">

	<!--[if lt IE 7]>
	<style type="text/css">
	#container {height:100%}
	</style>
	<![endif]-->
</head>
<body>

<div id="content">

	<div id="topCont">
		<div id="top1"><img src="img/bg_top.jpg" border="0" /></div>
		<div id="top2"><img src="img/bg_menu.jpg" border="0" /></div>

		<div id="topSok" style="display: none;">Sök</div>

		<div id="meny">
			<div class="menu" style="text-transform: uppercase;">
				Menylänk1
				Menylänk2
			</div>
		</div>
	</div>

	<div id="main">

		<div id="menyleft">
			Menyleft1
			Menyleft2
		</div>

		<div id="textinnehall">
			<div class="rub">Rubrik</div>
			<div class="indrag">Brödtext</div>
		</div>
		
		<div id="bottom" valign="bottom"><img src="img/bg_bottom.gif" border="0" /></div>
	</div>

	<div id="footer">FOOTER</div>
</div>

</body>
</html>

Css:en är en röra tyvärr, men bifogar den också för referenser till texterna.

Har mig veterligen inte varit med om liknande tidigare och felet uppkommer i IE 7, inte i Firefox.

Skulle uppskatta lite vägledning :)

ejickMedlem sedan mars 2001895 inlägg
#2

Kan du inte klistra in koden istället?

nakozMedlem sedan dec. 1999653 inlägg
#3

Oredigerad:

<!--
a:link  		{
				text-decoration: none; 
				color: #83d02a;
				}

a:active 	{
				text-decoration: none; 
				color: #83d02a;
				}

a:visited 	{
				text-decoration: none; 
				}

a:hover 		{
				text-decoration: underline; 
				color: #83d02a;
				}

html,body
				{
				background-image: url('img/bg.gif'); 
				background-repeat: repeat-x; 
				background-color: white;

				height: 100%; 					/* IE6: treaded as min-height*/

				text-align: center;
				margin: 0px auto;
				padding: 0px;
				border: 0px;			

				font-family: trebuchet ms, lucida sans unicode;
				font-size: 12px;
				color: #333333; 
				} 

td
				{
				font-family: trebuchet ms, lucida sans unicode;
				font-size: 11px;
				color: #333333; 
				} 

#content
				{
				position: relative;
				padding: 0px;
				margin: 0px auto;
				width: 100%;
				height: 100%; 					/* IE6: treaded as min-height*/
		 		text-align: center;
				}

#topCont
				{
				position: relative;
				width: 846px;
				background-color: white;
		 		text-align: left;
				margin: 0px auto;
				padding: 0px;
				}

#textleft
				{
				float: left; 
				width: 209px;
				margin: 4px 30px 22px 74px;
				padding: 0px;
				text-align: left;
				font-family: trebuchet ms, lucida sans unicode;
				font-size: 14px;
				line-height: 22px;
				color: #83d02a;
				}	

#textfull
				{
				float: left;  
				background-color: white;
				width: 703px;
				margin: 0px 24px 17px 69px;
				padding: 0px;
				font-family: trebuchet ms, lucida sans unicode;
				font-size: 11px;
				color: black;
				}	

#textinnehall
				{
				float: left;
				padding: 0px;
				margin: 0px 0px 17px 0px;
				width: 459px;
				font-family: trebuchet ms, lucida sans unicode;
				font-size: 11px;
				color: black;
				}

#top1			{
				position: relative;
				height: 183px;
				margin: 0px auto;
				padding: 0px;
				}

#top2			{
				position: relative;
				height: 61px;
				margin: 0px auto;
				padding: 0px;
				}

form 			{margin: 0px; padding: 0px;}

#topAlt 	 	{
				position: absolute;
				padding-left: 48px;	
				top: 12px;
				width: 400px;
				text-align: left;
				color: white;
				margin: 0px auto;
				}

#topSok 	 	{
				position: absolute;
				top: 10px;
				right: 48px;
				margin-left: 50px;
				padding: 0px;
				color: #ffffff;
				margin: 0px auto;
				}

.textimg
				{
				margin: -3px 0px 0px -5px;
				}

#meny
				{
				position: absolute;
				padding-left: 12px;
				top: 194px;
				text-align: center;
				font-family: trebuchet ms, lucida sans;
				width: 100%;
				font-weight: bold;
				font-size: 13px;
				color: #ffffff;
				padding: 0px;
				margin: 0px auto;
				}	

#menyleft
				{
				float: left; 
				width: 209px;
				margin: 4px 30px 22px 74px;
				padding: 0px;
				text-align: left;
				font-family: trebuchet ms, lucida sans unicode;
				font-weight: bold;
				font-size: 14px;
				line-height: 22px;
				color: #83d02a;
				}	

.menyleft
				{
				position: absolute;
				padding-left: 20px;
				padding-top: 12px;
				text-align: left;
				font-family: trebuchet ms, lucida sans unicode;
				font-weight: bold;
				font-size: 14px;
				line-height: 22px;
				color: #83d02a;
				}	

.menu a  	{
				text-decoration: none; 
				color: #ffffff;
				}

.menu a:hover 	{
				text-decoration: none; 
				color: #01B502;
				}

#main			{
				position: relative;
				margin: 0px auto;
				min-height: 600px;
				background-image: url('img/bg_main.gif'); 
				background-repeat: no-repeat; 
				width: 846px;
		 		text-align: left;
				color: #333333; 
				}

#textCont
				{
				position: relative;
				clear: both;
				z-index: 1;
				width: 740px; 
				font-family: trebuchet ms, lucida sans unicode;
				font-size: 11px;
				margin-left: 53px;
				color: black;
				}

#flashmainL	{
				float: left;
				padding: 0px;
				margin: 0px 24px 17px 69px;
				background-color: #dddddd;
				border: 1px solid #dddddd;
				width: 490px;
				height: 257px;
				}

#flashlitenR	{
				float: left; 
				padding: 0px;
				margin: 0px 0px 17px 0px;
				background-color: white;
				border: 1px solid #dddddd;
				width: 233px;
				height: 257px;
				}

#flashmainR	{
				float: left;
				margin: 0px 0px 17px 0px;
				padding: 0px;
				background-color: white;
				border: 0px solid #dddddd;
				width: 490px;
				height: 257px;
				}

#flashlitenL	{
				float: left; 
				padding: 0px;
				margin: 0px 24px 17px 69px;
				background-color: white;
				border: 1px solid #dddddd;
				width: 233px;
				height: 257px;
				}

#startrutaL	{
				float: left; 
				padding: 0px;
				margin: 0px 24px 0px 69px;
				width: 220px;
				height: 275px;
				text-align: left;
				color: black;
				}

#startrutaR	{
				float: left; 
				padding: 0px;
				margin: 0px 24px 0px 0px;
				width: 220px;
				height: 275px;
				text-align: left;
				color: black;
				}

#lasmer		{
				position: relative;
				width: 130px;
				height: 14px;
				text-align: right;
				margin-right: 0px;
				margin-left: 80px;
				margin-top: 0px;
				}

#text-content	{
				float: left;
				margin: 7px 0px 17px 0px;
				padding: 0px;
				background-color: white;
				border: 0px solid #dddddd;
				width: 510px;
				}

#text-menu	{
				float: left; 
				padding: 0px;
				margin: 7px 24px 17px 36px;
				background-color: white;
				border: 0px solid #dddddd;
				width: 213px;
				}

.rub 			{
				padding: 5px 0px 2px 5px;
				margin: 0px;
				font-family: trebuchet ms, lucida sans unicode;
				font-weight: none;
				font-size: 18px;
				color: #83d02a;
				}

.underrubrik 			{
				padding: 2px 0px 0px 0px;
				margin: 0px;
				font-family: trebuchet ms, lucida sans unicode;
				font-weight: bold;
				font-size: 12px;
				color: #83d02a;
				}

.citat 			{
				width: 96%;
				text-align: center;
				padding: 2px 0px 2px 0px;
				margin: 0px;
				font-family: trebuchet ms, lucida sans unicode;
				font-weight: bold;
				font-style: italic;
				font-size: 13px;
				color: #83d02a;
				}

.svartrubrik 			{
				padding: 2px 0px 2px 0px;
				margin: 0px;
				font-family: trebuchet ms, lucida sans unicode;
				font-weight: bold;
				font-size: 12px;
				color: #333;
				}

.rubText 	{
				padding: 5px 0px 11px 0px;
				margin: 0px;
				font-family: trebuchet ms, lucida sans unicode;
				font-weight: none;
				font-size: 18px;
				color: #83d02a;
				}

.indrag		{
				padding: 3px 0px 0px 5px;
				margin: 0px;
				}

#bottom
				{
				position: absolute;
				bottom: 0px;
				clear: both;
				width: 100%;
				text-align: center;
				font-family: trebuchet ms, lucida sans unicode;
				font-size: 11px;
				color: #333;
				padding: 0px 0px 0px 0px;
				margin: 0px auto;
				}	

#footer
				{
				position: relative;
				clear: both;
				width: 750px;
				text-align: center;
				padding: 0px;
				margin: 6px auto;
				}
#footer td
				{
				font-family: trebuchet ms, lucida sans unicode;
				font-size: 11px;
				color: #808080;
				}

input
				{
				font-family: tahoma;
				font-size: 11px;
				border-style: solid;
				border-width: 1px;
				border-color: #a80000;
				color: black;
				background-color: white;
				}

textarea, select
				{
				font-family: tahoma;
				font-size: 11px;
				border-style: solid;
				border-width: 1px;
				border-color: #CCC;
				color: black;
				background-color: white;
				}

-->
nakozMedlem sedan dec. 1999653 inlägg
#4

My bad...
Jag tänkte att de borde ha något med strukturen att göra, men tji fick jag.
Idag uppmärksammade jag sambandet att det bara blev fel på sidor som hade en eller fler bilder i texten.

Bilderna var i sin tur kopplade till classen .textimg och där fanns inte specat bildernas höjd och bredd (då de låg i divven .indrag). När jag i css'en angav höjd och bredd för .textimg så förstod äntligen sidan att den var slut när den faktiskt var slut.

Problemet var således fel formulerat och därav möjligen uteblivna svar.
Tack ändå!

137 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)