Css Problem mit IE 6.0
Tamer Kavlak
- css
0 nag0 Tamer Kavlak0 nag
Hallo Zusammen
Unten habe eine Html Seite und ein darin verwendetes Stylesheet angehaengt. Die Html Seite zeigt ein grundgerüst, dass ich mehrfach verwende. Mit <div class="positionContainer"> versuche ich innerhald eines TD rundherum ein margin von 10px zu setzen. Mozilla und Netscape setllen es wie erwartet dar, IE 6.0 hat Probleme damit. Auf der rechten Seite macht er keinen margin und schneidet den Inhalt der Tabelle ab.
Ein Screenshot ist ev. hier ersichtlich (irgendwie hatte yahooetwas Muehe, ich in nicht sicher, ob der Ordner wirklich public ist):
http://f2.pg.briefcase.yahoo.com/tamer_kavlak
unter images nach nn_vs_ie.jpg Ausschau halten
Hat Jemand eine Idee/Tip worin das Problem liegen koennte
Vielen Dank
Tamer
--- start html ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body topmargin="0">
<br>
<form name="test" method="post" action="foo?">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%">
<tr>
<td class="containerGroupBoxContentGrey">
<!-- start box with margins -->
<div class="positionContainer">
<table border="0" cellspacing="0" cellpadding="2" style="width:100%">
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='1'>
<tr>
<td colspan='2' align='left'><b>Underlying Vehicle :</b>
XY Share
</td>
</tr>
<tr>
<td colspan='2' align='left'><b>Distribution Rule:</b>
BLABLA
</td>
</tr>
<tr>
<td align='left'><b>ISIN :</b>
123456 </td>
<td align='left'><b>Trading Location :</b>
NASDAQ </td>
</tr>
<tr>
<td align='left'><b>Current Market Price:</b>
100.80 USD
</td>
<td>
<b>As of :</b>
22.Feb.2005 15:54:04 GMT
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width='100%' border='1' cellspacing='1' cellpadding='2'>
<tr>
<td align='left' colspan='7'>1. EOR</td>
</tr>
<tr>
<th align='center' valign='middle'>Plan</th>
<th align='center' valign='middle'>Participation<br>ID</th>
<th align='center' valign='middle'>Least<br>Expiration<br>Date</th>
<th align='center' valign='middle'>Vehicle<br>Currency</th>
<th align='center' valign='middle'>Vehicle</th>
<th align='center' valign='middle'>Available</th>
<th align='center' valign='middle'>Current<br>Qty<br>Actionable</th>
</tr>
<tr>
<td align="left" >X</td>
<td align="left" >Y</td>
<td align="left" >01.Apr.2012</td>
<td align="left" >USD</td>
<td align="left" >TEST</td>
<td align ="center" >??</td>
<td align ="right" >5,820</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- end box with margins -->
</td>
<td class="containerGroupBoxShadow"><img src="images/spacer.gif" style="width:1px" /></td>
</tr>
<tr>
<td colspan="2" class="containerGroupBoxShadow"><img src="images/spacer.gif" style="height:1px" /></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="buttonBox">
<input type="submit" value="Transact on the group above">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
--- end html ---
--- start stylesheet 'styles.css' ---
.containerGroupBoxShadow { background-color: #CCCCCC; }
.buttonBox { margin: 10px 10px 10px 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; }
.positionContainer { margin:10px 10px 10px 10px; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px; }
.containerGroupBoxContentGrey { background-color: #EEEEEE; vertical-align: top; }
--- end styleysheet ---
Hallo,
Hat Jemand eine Idee/Tip worin das Problem liegen koennte
Mach es genau umgekehrt.
Gibt nicht dem <div> einen Außenabstand (margin), sondern der Zelle einen Innenabstand (padding) von 10px
.positionContainer {}
.containerGroupBoxContentGrey { background-color: #EEEEEE; vertical-align: top; padding:10px;}
Gruß NAG
Hallo,
Hat Jemand eine Idee/Tip worin das Problem liegen koennte
Mach es genau umgekehrt.
Gibt nicht dem <div> einen Außenabstand (margin), sondern der Zelle einen Innenabstand (padding) von 10px.positionContainer {}
.containerGroupBoxContentGrey { background-color: #EEEEEE; vertical-align: top; padding:10px;}Gruß NAG
Danke NAG,
Ich inzwischen rausgefunden, dass der DOCTYPE Probleme verursacht. Wenn ich ihn aendere zB. auf:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
dann ist das Problem geloest, dafuer spinnt Mozilla und Explorer bekommt andere Probleme, uaaaahhhhhh :-)
Dein Loesungsvorschlag scheint mir momenatn die Schmerzloseste zu sein.
Gruss
Tamer
Hallo,
Ich inzwischen rausgefunden, dass der DOCTYPE Probleme verursacht. Wenn ich ihn aendere zB. auf:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">dann ist das Problem geloest, dafuer spinnt Mozilla und Explorer bekommt andere Probleme, uaaaahhhhhh :-)
dieses Phänomen hat auch einen Namen:
"Doctype Switch"
ich weiss ja nicht, wie sehr du dich mit deiner Webseite auseinandersetzen willst. aber wenn es ein wenig mehr sein soll, dann wirst du früher oder später damit in kontakt kommen. infos findest du übrigens hier:
http://www.google.de/search?hl=de&q=doctype+switch&btnG=Google-Suche&meta=
mfg NAG
dieses Phänomen hat auch einen Namen:
"Doctype Switch"ich weiss ja nicht, wie sehr du dich mit deiner Webseite auseinandersetzen willst. aber wenn es ein wenig mehr sein soll, dann wirst du früher oder später damit in kontakt kommen. infos findest du übrigens hier:
http://www.google.de/search?hl=de&q=doctype+switch&btnG=Google-Suche&meta=mfg NAG
Nochmals Danke
Das war genau das Stichwort, das mir auf der Fehlersuche gefehlt hatte. Da die Seite mehr als nur hobbymaessiges ist, komme ich nicht um die ganze Problematik drumherum. Jetzt weiss ich aber wenigstens das Problem.
Gruss
Tamer