Site wird in Opera falsch dargestellt

Status
Nicht offen für weitere Antworten.
C

CiTor

Mitglied
Hi Leute,
also ich hab da n kleines Problem mit meiner neuen Website. Für diese Seite möchte ich viel mehr auf CSS-Style sheets bauen. Die Website wird eigentlich auf IE und den Mozillabrowsern perfekt dargestellt nur happerts mit Opera unglaublich. Kann mir vielleicht jemand dabei helfen was genau der Grund dafür ist, dass Opera die Site so total verschieden darstellt? Ist es nun überhaupt weise style-sheets in diesem Ausmasse zu gebrauchen?

Also hier einmal die Files zum ansehen:

http://www.styledotmedia.com/pics/Unbenannt-2.gif - so sollte es eigentlich dargestellt werden

http://www.styledotmedia.com/pics/Unbenannt-1.gif - so wird es im Opera-Browser dargestellt

nun der Code:

-das HTML-File

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<link href="css/styles2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div align="center">
  <table border="0" cellspacing="0" cellpadding="0" class="spacer">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" class="bannercell">
    <tr>
      <td>
	  	  <div align="left" valign="top">
		  <div class="bannercelltexttitle">welcome to styledotmedia.com</div>
	      <div class="bannercelltexttitle2">where future meets reality.</div>
		  <div class="bannerlogo"></div>
		  </div>
	  </td>
    </tr>
  </table>
  <table border="0" cellpadding="0" cellspacing="0" class="globalmenucell">
    <tr>
      <td><div class="globalmenutext">styledotmedia | webdesign | desktop publishing | desktop design </div></td>
    </tr>
  </table>
  <table border="0" cellpadding="0" cellspacing="0" class="localmenucell">
    <tr>
      <td><div class="localmenutext">news | special | team | ideology </div></td>
    </tr>
  </table>
  <table border="0" cellspacing="0" cellpadding="0" class="bodylook">
    <tr>
      <td class="bodyramen">testchen </td>
    </tr>
  </table>
</div>
</body>
</html>

- Das CSS-File
Code: 
/*WEBSITE HEAD*/
.spacer {
	height: 10px;
	width: 700px;
}
.bannercell {
	background-color: #FF9900;
	height: 200px;
	width: 700px;
	border-top: 10px solid #FFFFFF;
	border-right: 10px solid #FFFFFF;
	border-bottom: 10px none #FFFFFF;
	border-left: 10px solid #FFFFFF;
}
.bannercelltexttitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	font-variant: normal;
	text-transform: uppercase;
	text-align: left;
	color: #FFFFFF;
	position: relative;
	top: -45px;
	left: 15px;
	width: 400px;
}
.bannercelltexttitle2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	text-align: left;
	color: #FFFFFF;
	position: relative;
	top: -35px;
	left: 15px;
	width: 400px;
}
.bannerlogo {
	background-image: url(../bilder/logo.gif);
	position: relative;
	top: 45px;
	height: 30px;
	width: 60px;
	left: 15px;
}
/*GLOBAL MENU*/
.globalmenucell {
	height: 17px;
	width: 680px;
	border-top-width: 1px;
	border-right-width: 10px;
	border-bottom-width: 1px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	background-color: #7D9EC9;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	color: #000000;
	text-align: left;
}
.globalmenutext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	color: #000000;
	text-indent: 15px;
}

/*LOCAL MENU*/

.localmenucell {
	height: 16px;
	width: 680px;
	border-right-width: 10px;
	border-bottom-width: 1px;
	border-left-width: 10px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	background-color: #A8C2E4;
	text-align: left;
}
.localmenutext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	color: #000000;
	text-indent: 15px;
}

/*BODY*/

.bodylook {
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 10px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	background-color: #FFFFFF;
	width: 700px;
	margin-right: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
}
.bodyramen {
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
}

- als funktionierende website könnt ihr euch das ganze mit IE und Mozilla ansehen: http://www.styledotmedia.com/index2.htm

wäre cool, wenn mir da jemand helfen könnte!

Gruss CiT

//Anmerkung: Ich hoffe, dass ich den Richtigen Forenbereich erwischt habe. Aber ich glaube, da es ein primäres Problem mit CSS zu sein scheint, sollte es stimmen :)
 
ich hab noch was interessantes gefunden. Zwar sei mein CSS-Code Eigentlich praktisch mit allen Browsern Kompatibel :( irgendwo liegt aber trotzdem ein Problem, dass Opera 7.0 solche Mühe macht.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück