✔ CSS Position Problem (IE/Firefox)

[mardusi]

Hallo,

hoffe finden relativ schnell ne Lösung.

Wollte mein Header gerade richtig schön aufbauen und sehe jetzt der IE mal wieder zu blöde ist das ganze zu interpretieren .

Aber schaut selbst auf den Shots

Hab euch mal mein komplettes CSS eingefügt

html, body{ 
 margin:0; 
 padding:0; 
 text-align:center;
 background-image: url(http://beta.downtownraiderz.de/img/carbon_bg.gif); 
} 
 
#pagewidth{ 
 width:850px;
 background-color:#222;  
 text-align:left;  
 margin-left:auto; 
 margin-right:auto; 
 border-left: 1px solid #000; 
 border-right: 1px solid #000;
} 
 
#header{
position:relative;
left:0px; top:0px; width:850px; height:269px;
background-image: url(img/banners/banner_member.png);
 /*width:100%;*/
} 
 
#leftcol{
 width:175px; 
 float:left; 
 position:relative;
   }
 
#twocols{
 width:675px; 
 float:right; 
 position:relative; 
  }
 
#rightcol{
 width:175px; 
 float:right; 
 position:relative; 
 }
 
#maincol{background-color: #FFFFFF;  
 float: left; 
 display:inline; 
 position: relative; 
 background-color:#222; 
 width:500px; 
 }
 
#footer{
 height:25px; 
 background-image: url(http://beta.downtownraiderz.de/img/bottom.jpg);
 background-color:#FFFFFF; 
 border-bottom: 1px solid #000;
 clear:both;
 } 
 
#sponsorbox1{
width:245px;
height:150px;
float:left;
border: 1px dashed #555;
background-color: #292929;
}

#sponsorbox2{
width:245px;
height:150px;
float:right;
border: 1px dashed #555;
background-color: #292929;
}

#textbox{
width: 479px;
margin-top: 10px;
padding: 5px 10px 5px 10px;
float:left;
border: 1px dashed #555;
background-color: #292929;
}

#ticker{
background-image: url(img/ticker.png);
position:relative;
left:420px; top:108px; width:430px; height:25px;
line-height:200%;
}

.tickertext{
color: #FFFFFF;
padding-left:20px;
font-size: 10px;
}

#logo{
background-image: url(img/dtr_logo.png);
position:relative;
left:60px; top:60px; width:459px; height:85px;
}

/* Newsskript*/
#newsbox{
width:450px;
background-color: #333;
border-left: 1px solid #222;
border-right: 1px solid #222;
}

#newsheader{
width:300px;
height:25px;
background-image: url(img/news_header.png);
background-repeat: no-repeat;

}

.newsheader{
width:300px;
padding-left: 10px;
padding-top:8px;
font-size: 14px;
}

.newscat{
width:150px;
height:25px;
text-align:right;
}

#newsbottom{
width:450px;
height:25px;
text-align: right;
background-image: url(img/news_bottom.png);
background-repeat: no-repeat; 
}

.newsbottom{
font-size: 10px;
color: whote;
padding-bottom:5px;
padding-right:10px;
}

#newscontent{
width:450px;
background-color: #333;
padding-left: 10px;
padding-right: 10px;
padding-top:10px;
padding-bottom:10px;
}

 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}


/* Style */
.headline{
font-family: verdana;
font-size:11px;
font-weight: bold;
color: red;
}

div, ul, li{
font-family: verdana;
font-size:11px;
font-weight:normal;
color: white;
list-style-type: none;
}

ul, li{
margin: 0px 0px 0px 15px;
padding: 0px;
}

ul
{
margin-top: 5px;
}

p, a, a:active, a:link, a:visited, a:hover {
font-family: verdana;
font-size:11px;
font-weight:normal;
color: white;
margin:0px;
padding:2px 0px 2px 0px;
text-decoration:none;
}

h1{
font-family: verdana;
font-size:12px;
font-weight:bold;
color: white;
padding:2px 0px 2px 10px;
margin:0px;
margin-bottom: 10px;
border: 1px solid #000;
background-color: #333;
}

h2{
background-color:#333333;
border:1px solid #000000;
color:white;
font-family:verdana;
font-size:11px;
font-weight:bold;
margin-top: 5px;
margin-left: 10px;
padding:2px 0 2px 10px;
width:450px;
}

h3{
background-color:#333333;
border:1px solid #000000;
color:white;
font-family:verdana;
font-size:11px;
font-weight:bold;
margin: 0px;
padding:0px;
width:479px;
}

input,select,textarea{
background-color: #333;
border: 1px solid #000;
font-family: verdana;
font-size:11px;
font-weight:normal;
width: 250px;
color: white;
}

a:hover
{
color:red;
}

.image{
border: 1px solid #000;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}

.image:hover{
filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity:1.0;
}

	<div id="header">
		<div id="logo"></div>
		<div id="ticker" ><span class="tickertext">Hier werden Informationen ausgegeben bzgl. der Seite</span</div>
	</div>

 

[Maik]

Hi,

ich kann mit deinem Auszug aus dem HTML-Code keinen Darstellungsunterschied in den genannten Browsern reproduzieren.

mfg Maik

 

[mardusi]

Sorry .. hab jetzt mal alles eingefügt und die tabellen mal rausgenommen das man nur div sieht sozusagen

<body>
<div id="pagewidth" >
	<div id="header">
		<div id="logo"></div>
		<div id="ticker" ><span class="tickertext">Hier werden Informationen ausgegeben bzgl. der Seite</span</div>
	</div>
			<div id="wrapper" class="clearfix" > 
		<div id="twocols" class="clearfix"> 
			<div id="maincol" >
				<div id="sponsorbox1" ></div>
				<div id="sponsorbox2" ></div>
				<div id="textbox" >
				</div>
			</div>
			<div id="rightcol" ></div>
		</div> 
			<div id="leftcol" ><div>
</div>
	<div id="footer" >
	</div>
	</div>
</body>

 

[Maik]

Schließ mal den </span>-Tag ordnungsgemäß mit der >-Klammer, und das CSS-Positionsproblem löst sich im IE in Luft auf.

mfg Maik

 

[mardusi]

wie blöde man sein kann am abend


danke für schnelle hilfe