Wasserdichtes css für alle Browser?

~red~ · 28. Nov. 2005

Wasserdichtes css ?

Hallo!

Habe mal wieder eine Frage bezüglich eines css-Problemes

Da ich nicht alle bugs und Browser hacks kenne geschweige denn berücksiten kann, ohne garantiert
einige zu vergessen.

Ist es möglich ein css zu konstruieren das auf allen Browser funzt oder wie kann ich jeden Brwoser der neueren Generation bedienen.

Ich dachte da an (Safari, IE, Opera, firefox für Mac und gleiches Spiel für den PC)

Momentan schaut das css so aus!

Code:

body { 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px; 
background-color:#666666;  
}
h1 {font-size:16px;color:#000000;margin-bottom:0px;}
h2 {font-size:14px;color:#000000;}
h3 {font-size:12px;color:#000000;}
p {margin-top:0px;margin-bottom:0px;}
code {font-size:14px;color:#0000ff;}
a:link
{ 
  text-decoration:none;
  color:#fff;
  font-size:9px;
  display: block;  
  padding: 0px 0 0px 0px;
}
a:active, a:hover, a:visited 
{ 
  text-decoration:none;
  font-weight:bold;
  color:#fff;
  display: block;  
  padding: 0px 0 0px 0px;
}
#SiteBox {
  width:727px;
  height:628px;
  margin:0px;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}
#NavBox {
  width:199px;
  height:626px;
  float:left;
  margin:0px;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}
#NavBox a {
  text-decoration:none;
  font-weight:bold;
  color:#fff;
  font-size:12px;
  display: block;  
  padding: 5px 0 5px 10px;
  background: #000066;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
#NavBox a:hover.menu { 
  color: #006;
  background: #fff;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
#NavBox a:active.menu{
  color: #006;
  background: #ccc;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
#PicBox {
  width:524px;
  border-right:2px solid #fff;
  height:100px;
  float:right;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}
#ContBox {
  width:524px;
  border-right:2px solid #fff;
  height:520px;
  float:left;
  background: #ccc;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  border-bottom:2px solid #fff;
}
#ScrollBox {
  width:500px;
  height:420px; 
  padding: 10px 5px 10px 10px;
  overflow:auto;
  border-top:1px dashed #fff;
}
#MemberBox a{
  width:500px;
  height:420px; 
  padding: 10px 5px 10px 10px;
  border-top:1px dashed #fff;
}
#ScrollBox a {
  text-decoration:none;
  color:#fff;
  font-size:9px;
}
#ScrollBox a:hover { 
  text-decoration:none;
  color:#fff;
  font-size:9px;
}
#ScrollBox a:active {
  text-decoration:none;
  color:#fff;
  font-size:9px;
}
.menu2{
  text-decoration:none;
  font-weight:bold;
  color:#000066;
  font-size:12px;
  display: block;
  padding: 5px 0 5px 10px;
  background: #fff;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
.submenu{
  text-decoration:none;
  font-weight:bold;
  color:#fff;
  font-size:12px;
  display: block; 
  padding: 5px 0 5px 10px;
  background: #709acc;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
#NavBox a.submenu {
  text-decoration:none;
  font-weight:bold;
  color:#fff;
  font-size:12px;
  display: block; 
  padding: 5px 0 5px 10px;
  background: #acacac;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
#NavBox a:hover.submenu { 
  color: #000066;
  background: #ccc;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
#NavBox a:active.submenu {
  color: #000066;
  background: #888888;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
.title {
   	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	padding:10px 5px 10px 10px;
	margin-bottom: 6px;
}
.Formmail_button {
	background: #31106E;
	border: 1px solid #fff;
	color:  #fff ;
	font-size: 9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	cursor: hand;
	}
.Formmail_input { 
	float:left;
	background: #fff;
	color : #c0005f; 
	border: 1px solid #666666;
	font-family : Verdana, Arial, Helvetica, sans-serif; 
	font-size : 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal; 
	cursor: hand;
  }
.Formmail_input_readonly{
	float:left;
	background: #fff;
	color : #009; 
	border: 1px solid #666666;
	font-family : Verdana, Arial, Helvetica, sans-serif; 
	font-size : 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal; 
	cursor: hand;
}
.text_form {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: none;
	cursor: arrow;
	color: #000;
	}
.text_content { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	padding:0px 10px 0px 10px;
	margin-bottom: 6px;
	color: #000; 
	}
.text_listing {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: none;
	color: #fff;
  
	}
.lupeimg {
	clear:left;
	padding:0px 2px 0px 2px;
	margin-top: 0px;
	cursor: hand;
}
.news_header{
  display: block;
  padding: 0px 0px 0px 0px;
  background: #000066;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
.news_datum{
text-align:right;
font-size:11px;
color:#fff;
font-weight:bold;
}
.news_autor{
text-align:left;
font-size:13px;
color:#fff;
font-weight:bold;
}
.news_content{
font-size:11px;
color:#000033;
background: #fff;
}
.profil_form {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: none;
	color: #000;
	}
.withe_stripe { 
	background-color:#ffffff; 
	border-spacing:1px;
}

Die Sitebox ist wahrscheinlich überflüssig da ich eine Möglichkeit mit einer Tabell gefunden habe um die drei Divs nebeneinander darzustellen.

Der HTML schaut momentan gekürtzt so aus:

Code:

<body>
<table width="720" border="0" cellspacing="0" cellpadding="0" height="540">
	<tr>
	<td valign="top"> 
  <div id="left">
  <div class="menucontainer">
   <a class="menu" href="#">    NEWS</a>
   <a class="menu" href="#">    MEIN PROFIL</a>
   <a class="menu" href="#">    MEMBER</a>
   <a class="menu" href="#">    NOCH EIN LINK</a>
   <a class="menu" href="#">    UND NOCH EINER</a>
  </div>
  </div></td>
	<td valign="top">
  <div id="content" style="margin-top:0px;"><div id="title">
    <img src="../img/header_01.jpg" style="float:right;width:520px;height:100px;margin-left:0px;" />
  </div>
  <h2 style="margin-top:10px;">Eine grosse Schrift</h2>
 <h2>Die Titelleiste</h2>
</div>
	</td>
	</tr>
	</table>
	</body>
</html>

Leider ist nach einigen Versuchen kein zufriedenstellendes Ergebniss bezüglich der weißen Ränder und ihrer Passigkeit zueinander festzustellen. Was im IE funktioniert lässt im Firefox eine Lücke von etwa 1px bis 2px.
Bzw bleibt ohne die Tabelle in einen Div-Container gelegt nicht an seiner Stelle.

Über ne Hilfe wäre ich schon mal recht Dankbar da mir dieses ewige versuchen noch den letzten Nerv raubt.

THX ~red~

dkdenz · 29. Nov. 2005

Ein 'wasserdichtes CSS' bekommt man dann, wenn man keine abgehobenen Extras einbaut.
Leider ist die Kompatibilität bei den versch. Browsern noch nicht vorhanden.
Hacks brauchst Du keine.
Ich würde erstmal für FireFox und Opera schreiben, denn wenn es dort entsprechend aussieht,
dann ist's auch korrekt.
Wenn der IE um's Verrecken nicht mitmachen will,
dann bekommt der ein eigenes CSS mittels einer CSS-Browserweiche angeboten.
Wenn Du die Snippets in eine Datei packen könntest oder einen Link zur Seite anbötest,
könnte Dir effektiver geholfen werden,
denn das 'Snippet-Zusammenfügen-Und-Lokal-Speichern' ist zeitaufwendig und nervend.
( http://forum.jswelt.de/showthread.php?t=26808 )

Wasserdichtes css für alle Browser?

~red~

New member

dkdenz

New member