Olika tolkning i IE och Firefox CSS

JompanMedlem sedan juli 200739 inlägg

9 apr. 2011 09:08#1

Kan någon se vad som gör att min sida tolkas olika mellan webbläsarna.
I Forefox lägger sig sidan innesluten av border till vänster, men i Explorer ligger huvud och fot över hela skärmen, medan resten lägger sig i vänsterläge.

/* känn igen html5-element */
header,footer,nav,content,article,section,aside,figure,figcaption{display:block;}

html {
	font-size: 12px;
	line-height: 150%; 
	font-family: verdana;
    background-image: url('../img/bakgrund.gif'); 
	background-repeat: repeat;
	} 
	
body { 
    padding: 0;
	margin: 15px;
    width: 900px;
    background: #DEEDFD;
    border: 2px solid #660066;
	}

#sidhuvud	{
	height: 80px;
	margin-top: 0;
	margin-left: 15px;
	margin-right: 15px;
	padding: 10px 10px 0 10px;
	background-color: #C5E0FB;
	margin-bottom: 15px;
} 

#container {
	margin-top: 25px;
	background: #E5F3FF; 
}

#col1 {
	margin-top: 0;
	float: left;
	width: 150px; 
}

#col2 {
	width: 510px; 
	float: left; 
	margin-top: 0;
	margin-left: 1px;
	padding-right: 50px; 
	padding-left: 25px;
	border-left: 0 solid #000000; 
	min-height: 450px;	
}

#col3 {
	width: 140px; 
	float: left; 
	border-left: 0px solid #000000; 
}

#kolumnbox1 {
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
	float: left;
	width: 125px;
	border: 2px solid #c2c2c2;
	background-color: #CCE6B3;
	margin-bottom: 20px;
	padding: 10px;
}

#kolumnbox2 {
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
	right:175px;
	width: 125px;
	border: 2px solid #c2c2c2;
	background-color: #C5E0FB;
	margin-bottom: 20px;
	padding: 10px;
	clear: left;
}
		
#kolumnbox3 {
	right:175px;
	width: 125px;
	padding: 10px;
	clear: left;
}
	
h1	{
	font-size: 14px;
	font-weight: bold;
}

h2	{
	font-size: 13px;
	font-weight: bold;
	font-variant: small-caps;
	letter-spacing: 0.5px;
}

h2.summa	{
	font-size: 13px;
	font-weight: bold;
	font-variant: small-caps;
	color: #990099;
	letter-spacing: 0.5px;
}

h2.arkiv	{
	font-size: 13px;
	font-weight: bold;
	font-variant: small-caps;
	color: #009900;
	letter-spacing: 0.5px;
}

h3	{
	font-size: 12px;
	font-weight: bold;
}	

hr 	{
	color: #ffcc99;
}	

p	{
	font-family: verdana;
	font-size: 12px;
	color: #000000;
}

a 	{
	text-decoration:none;
	outline:0;
} 

a:link	{
	color: #0033ff;
}
	
a:visited	{
	color: #0033ff;
}
	
a:hover	{
	color: #009900;
}	
	
a:active {
	color: #0033ff;
}

table {
	width: 95%;
	line-height: 140%;
}	

td	{
	vertical-align: top;
	font: verdana 12px;
	padding: 10px;
}	

table.summa {
	width: 95%;
}	

td.summa	{
	font: verdana 14px;
	font-weight: bold;
	background: #fff;
	padding: 5px;
	border: 1px solid;
	text-align: center;
}	

		
#sidfot {
	height: 10px;
	padding: 1px 0 30px 0;
	background:#CCE6B3;
	margin-right: 1px;
	margin-bottom: 0;
	margin-left: 1px;
}

#sidfot p {
	font-weight: bold;
	text-align: center;
	font-size: 10px;
	margin-left: 1px;
}
	
.clear {
	clear: both;
}

.left {float: left;}
.right {float: right;}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }

/* End */

/* clearer fix */
div#content {overflow:auto;}

Tacksam för hjälp.

// Jompan

doridoriMedlem sedan juni 2006244 inlägg

9 apr. 2011 13:29#2

det blir enklare om du postar HTML-koden också, eller allra helt en länk till sidan.

vilken version av IE gäller detta?

JompanMedlem sedan juli 200739 inlägg

9 apr. 2011 14:46#3

Sidan kommer här:

http://www.vskg.nu/awe

Jag har IE8.

// Jompan

w333!Medlem sedan jan. 200826 inlägg

12 apr. 2011 19:51#4

Du har några icke-skrivbara tecken i början av filen som gör att IE8 går upp i "Quirks mode".

... och som http://validator.w3.org säger när man validerar din sida - det handlar antagligen om en s.k. "BOM" - "Byte order mark" - som lagts dit av din texteditor (och som alltså inte hör hemma där)

Rensa alltså bort alla (osynliga) tecken framför din <!doctype html> (i en annan texteditor än den du använder normalt) så funkar det som du vill sedan även i IE8 ;)