IE 7 hat probleme mit margin und padding 0
Jan
- css
Hallo,
ich habe mit dem IE 7 ein problem die Rändder des Bodys zu entfernen.
Folgender Sachstand:
Ich habe eine Seite bei der das Layout komplett mit Tabellen gelöst ist.
Somit möchte ich im Body keine Ränder haben!
komischerweise funktioniert das im IE 7 auch enn ich auf aktuallisieren gehe. Nur wenn ich dann wieder einen Link auf der Seite anklicke, habe ich rund herum wieder einen ca 10px großen rand. WARUM?
hier ein Teil meiner CSS:
#Wrapper {
width: 100%;
min-width: 760px;
padding: 0px;
}
html, body {
margin: 0px;
padding: 0px;
border: none;
font-family: Arial;
background-color: #FFFFFF;
height: 100%;
}
und ein Teil meines heads:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--IE 7 quirks mode please-->
<!--[if gte IE 7]> <br style="display:none"/> <![endif]-->
<head>
<title>...</title>
<meta name="description" content="text/html; charset=iso-8859-1" />
<link rel="StyleSheet" href="./includes/xy.css" type="text/css">
</head>
vielen Dank schon einmal für die Hilfe
Hi Jan,
ob mit deinem HTML Code was nicht stimmt, können wir ja leider nicht beurteilen ;-)
Hierzu
html, body {
margin: 0px;
padding: 0px;
border: none;
font-family: Arial;
background-color: #FFFFFF;
height: 100%;}
lässt sich sagen, dass du margin: 0;, padding:0; und border:0 none; schreiben könntest. Mit height:100%; wirst du dir im FF übrigens u.U. Probleme einhandeln.
Gruß
Antipitch
Danke für die schnelle Antwort,
leider hat das auch nichts gebracht.
Sowohl der html als auch der body tag bekommen keine weiteren Parameter außerhalb der css.
Was mich ja so ein bissel stutzig macht ist die Tatsache, daß es ja wenn ich "F5" drücke so angezeigt wird wie ich es will! nur wenn ich die seite wechsle (ist im übringen php, mit ner festen index wo ich nur die includes ändere, die rahmendaten sind also IMMER identisch) macht er mir den Rahmen :-(.
Hhm,
ohne die IE7 Weiche im head macht er das auch, nehm ich an (warum benutzt du die eigentlich)?
Müsstest du wirklich mal deinen Code posten (Browser -> Quelltext, kein PHP)...
Die browserweiche benutze ich, da er mir sonst probleme bei Seiten macht, welche nicht den ganzen browser ausfüllen würden.
hier nun mal der Source wie er beim Browser ankommt:
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--IE 7 quirks mode please-->
<!--[if gte IE 7]> <br style="display:none"/> <![endif]-->
<head>
<titleMyTitle</title>
<meta name="description" content="text/html; charset=iso-8859-1" />
<link rel="StyleSheet" href="./includes/xyz.css" type="text/css">
<script type="text/javascript">
function OpenWindow(Address, width, height) {
MyWindow = window.open(Address, "SecondWindow", "width="+width+",height="+height+",left=100,top=200");
MyWindow.focus();
}
function Confirmation(Text) {
Check = window.confirm(Text);
return Check;
}
</script>
</head>
<body>
<table class="main" cellpadding="5" cellspacing="0" height=100% width="100%">
<tr >
<td class="head_boarder" colspan="3" height="5">
</td>
</tr>
<tr >
<td class="head_logo" colspan="2" align="center" valign="middle" width="252" height="95">
<a href="http://www.xyz.de" target="_blank"><img src="images/logo.gif" alt="" title="Logo" width="252" height="95" border="0" /></a>
</td>
<td class="head" valign="middle" >
<img src="images/text_logo.gif" alt="" title="" width="247" height="70" border="0" />
</td>
</tr>
<tr >
<td class="head_boarder" colspan="3" height="32">
</td>
</tr>
<tr>
<td class="menu" width="252" align="right" valign="top" height="100%">
</td>
<td class="menu" width="10" height="100%">
</td>
<td class="main" valign="top" height="100%">
<b>Welcome: root
</b><br><br>
<b>Messages in Database:</b> 3<br>
<b>Last Update:</b> 260613ZOCT2007<br>
<b>Update by User:</b> root<br>
</td>
</tr>
<tr>
<td class="footer" colspan="3">
<div class="footer" align="center">
© 2007 Company XYZ<br>
E-Mail <a class="footer" href="mailto:mail@me.org">mail@me.org</a>
Phone +49 (0)123
</div> </td>
</tr>
</table>
<div id="fixed">
<table width="150" hieght="100%">
<tr>
<td>
<font class='menu1'><br>Usermanagement</font>
</td>
</tr>
</tr>
<td class="menu1">
<a class="menu" href="index.php?page=usermngt">Useroverview</a>
</td>
</tr>
</tr>
<td class="menu1">
<a class='menu' href='./index.php?logout=1'>Logout</a>
</td>
</tr>
</table> </div>
</body>
</html>
Sorry bei der lesbarkeit! aber mir ist wichtiger das ich ihn im editor lesen kann als im Browser ;)
Hi Jan,
hab mal kurz ne Testseite draus gebastelt. Kein Rand in irgendeinem IE. Da ich deine css Angaben da nicht drin habe (bis auf body), liegt der Fehler vermutlich dort. Müsstest du auch nochmal posten, dann sollte sich der Fehler finden lassen...
PS:
Die <tr> solltest du alle direkt wieder schließen (anstatt <tr >) und ganz unten ist'n Fehler:
<table width="150" hieght="100%">
^^
Oh, der Fehler ist mir noch garnicht aufgefallen ;)
hier nun die css (ist noch nicht sortiert):
Habs nochma mit demm FF und IE6 getestet, keine probleme !
#Wrapper {
width: 100%;
min-width: 760px;
padding: 0px;
}
html, body {
margin: 0;
padding: 0;
border: 0 none;
font-family: Arial;
background-color: #FFFFFF;
height: 100%;
}
table.main {
font-family: Arial;
font-size: small;
border-spacing: 0px;
border-color: #000000 ;
border: 1px;
border-style: solid;
width: 100%;
height: 100%;
}
td.head {
border-spacing: 0px;
background-color: #D5DBE5;
border: 0px;
}
td.head_logo {
border-spacing: 0px;
background-color: #FFFFFF;
border: 0px;
}
td.head_boarder {
border-spacing: 0px;
background-color: #2B477F;
border: 0px;
}
td.footer {
border-spacing: 0px;
background-color: #2B477F ;
border: 0px;
}
td.menu {
border-spacing: 0px;
border-right: 0px;
background-color: #D5DBE5;
height: 100%;
}
td.menu1 {
background-color: #D5DBE5;
height: 100%;
}
td.maintblhead {
background-color: #2B477F;
border-bottom: 1px;
border-bottom-color: #2B477F ;
border-bottom-style: solid;
border-spacing: 0px;
font-family: Arial;
color: #FFFFFF;
text-decoration: none;
font-style: italic;
font-weight: bold;
}
table.maintbl {
border: 1px;
border-color: #2B477F ;
border-style: solid;
border-spacing: 0px;
font-size: x-small;
}
td.border {
border-bottom: 1px;
border-bottom-color: #2B477F ;
border-bottom-style: solid;
border-spacing: 0px;
}
.footer {
font-family: Arial;
font-size: x-small;
}
a.footer:link, a.footer:visited, a.footer:active, a.footer:hover {
font-family: Arial;
font-size: x-small;
color: #FFFFFF;
text-decoration: none;
font-style: italic;
}
.menu1 {
font-family: Arial;
color: #2B477F;
text-decoration: none;
font-style: italic;
text-decoration: underline;
font-weight: bold;
}
a.menu:link, a.menu:visited, a.menu:active {
font-family: Arial;
color: #2B477F;
text-decoration: none;
font-weight: normal;
}
a.menu:hover {
font-family: Arial;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
font-weight: normal;
}
td.menu1:hover {
background-color: #FFFFFF;
}
a:link, a:visited, a:active {
font-family: Arial;
color: #2B477F;
text-decoration: none;
font-weight: normal;
}
a:hover {
font-family: Arial;
color: #FFFFFF;
text-decoration: none;
background-color: #2B477F;
font-weight: normal;
}
#fixed {
position: absolute;
top: 150px;
left: 10px;
}
html>body #fixed {
position: fixed;
}