Firefox und Opera wollen nicht!

yellowspam · 13. Juni 2008

Hi@all:

Ich habe mein Webprojekt fertig, nun habe ich es getestet(Firefox,Opera,IE).

Im IE7 wird es richtig angezeigt:

IE

Im Firefox t garnichts:

Firefox

Und im Opera klappts mit dem zentrieren nicht:

Opera

Hier ist das CSS:

HTML:

#general
{
	background-color:#CBCBCB;
	text-align:center;
	height:100%;
	margin: 0;
	padding:0;
}

#Content
{
  width:450px;
  margin-top:25%;
} 
 
#Logo
{
	/*vertical-align:middle;*/
	margin-left:58px;
	/*width:100px;*/
	float:left;
}

#links
{
    margin-top:66px;
	float:left;
}

#rechts
{
	margin-top:50px;
	float:right;
}

#link_austria
{
	color:#315E85;
	text-decoration:underline;
	font-variant:normal;
	font-style:normal;
	font-family:Verdana;
	font-size:12px;
}

#link_bulgaria
{
	color:#315E85;
	text-decoration:underline;
	font-variant:normal;
	font-style:normal;
	font-family:Verdana;
	font-size:12px;
}

#link_rumenia
{
	
	color:#315E85;
	text-decoration:underline;
	font-variant:normal;
	font-style:normal;
	font-family:Verdana;
	font-size:12px;
}

#footer
{
	
	color:#315E85;
	font-variant:normal;
	font-style:normal;
	font-family:Verdana;
	font-size:10px;
}

#email
{
	color:#315E85;
	font-variant:normal;
	font-style:normal;
	font-family:Verdana;
	font-size:10px;		
}

/*--------------------Lightbox--------------------*/

#lightbox
{	
	position:absolute;/*top: 10px !important;*/left: 0; width: 100%; z-index: 100; text-align: center; vertical-align:middle; line-height: 0;
}

#lightbox img
{ 
	width: auto; height:auto;
}

#lightbox a img
{ 
	border: none;
}

#outerImageContainer
{ 
	position: relative;top:40px;background-color: #fff; width: 250px; height: 250px; margin: 0 auto;
}

#imageContainer
{ 
	padding: 10px;
}

#loading
{ 
	position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;
}

#hoverNav
{ 
	position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;
}

#imageContainer>#hoverNav
{ 
	left: 0;
}

#hoverNav a
{ 
	outline: none;
}

#prevLink, #nextLink
{ 
	width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block;
}

#prevLink
{ 
	left: 0; float: left;
}

#nextLink 
{ 
	right: 0; float: right;
}

#prevLink:hover, #prevLink:visited:hover 
{ 
	background: url(../images/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover 
{ 
	background: url(../images/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer
{ 
	font: 10px Verdana, Helvetica, sans-serif; 
	background-color: #ffffff; 
	margin: 0 auto; 
	line-height: 1.4em; 
	overflow: auto; 
	width: 100%;
	position:relative;
	top:40px; 
	left:-40px;
}

#imageData
{	
	padding:0 10px; color: #666;
}

#imageData #imageDetails
{ 
	width: 70%; float: left; text-align: left;
}
	
#imageData #caption
{ 
	/*font-weight: bold;*/
}

#imageData #numberDisplay
{ 
	display: block; clear: left; padding-bottom: 1.0em;
}			

#imageData #bottomNavClose
{ 
	width: 66px; float: right;  padding-bottom: 0.7em; outline: none;
}	 	

#overlay
{ 
	position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;
}

Und hier der HTML-Source:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
	<title>Consulting Partners</title>
	<link rel="stylesheet" type="text/css" href="CSS/main.css" />
	<script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
</head>


<body id="general"><!--  -->
<!--MAIN DIV-->
<div id="Content"> 
	<!--CONTENT-->
	<div id="links">
	        <a href="images/austria.gif" id="link_austria" rel="lightbox" title="&lt;b&gt;Österreich&lt;/b&gt;&lt;br&gt;&lt;br&gt;Stubenring 4/19&lt;br&gt;1010 Wien, AUSTRIA&lt;br&gt;&lt;a href=&quot;mailto:office@consulting-partners.com&quot; id=&quot;email&quot; /&gt;office[at]consulting-partners.at&lt;/a&gt;&lt;br&gt;&lt;br&gt;Contact person: Mag. Robert Hanreich&lt;br&gt;&lt;br&gt;">Österreich</a>
	</div>
    <div id="Logo">
        <img src="images/logo2.jpg" alt="Firmenlogo: &copy;&nbsp;consulting partners Unternehmensberatung GmbH"/><br />
    </div>
    <div id="rechts">
                <a href="images/rumenia.gif" id="link_rumenia" rel="lightbox" title="&lt;b&gt;Rumänien&lt;/b&gt;&lt;br&gt;&lt;br&gt;Oituz 25A&lt;br&gt;550337 Sibiu, ROMANIA&lt;br&gt;&lt;a href=&quot;mailto:adina.blajiu@consulting-partners.com&quot; id=&quot;email&quot;/&gt;adina.blajiu[at]consulting-partners.com&lt;/a&gt;&lt;br&gt;&lt;br&gt;Contact person: Adina Blajiu&lt;br&gt;&lt;br&gt;">Rumänien</a><br /><br />
                <a href="images/bulgaria.gif" id="link_bulgaria" rel="lightbox" title="&lt;b&gt;Bulgarien&lt;/b&gt;&lt;br&gt;&lt;br&gt;Rylsky ezera 16&lt;br&gt;1040 Sofia, BULGARIA&lt;br&gt;&lt;a href=&quot;mailto:sofia@consulting-partners.com&quot; id=&quot;email&quot; /&gt;sofia[at]consulting-partners.com&lt;/a&gt;&lt;br&gt;&lt;br&gt;Contact person: Mag. Liliana Dotzova&lt;br&gt;&lt;br&gt;">Bulgarien</a><br />
    </div>
</div >
<div id="footer">
        <br />
        &copy; 2008 Consulting Partners GmbH
</div>
</body>
</html>

Das fiese ist nämlich, dass ich das CSS und das HTML-file mit dem W3C-Validator überprüft habe und alle Errors gelöst habe...trozdem wird es nur im IE richtig angezeigt.

Was kann man dagegen tun?

Lg
Yellowspam

Maik · 13. Juni 2008

Hi,

die standardkonformen Browser zentrieren ein Blockelement nicht über die text-align:center-Eigenschaft des Elternelements.

Fazit:

Code:

#Content
{
  width:450px;
  margin:25% auto 0 auto;
}

Was den Footer betrifft, muss die Floatumgebung beendet werden:

Code:

#footer
{
        color:#315E85;
        font-variant:normal;
        font-style:normal;
        font-family:Verdana;
        font-size:10px;
        clear:both;
}

mfg Maik

Firefox und Opera wollen nicht!

yellowspam

Erfahrenes Mitglied

Maik

Neue Beiträge