Padding Fragen IE8 v IE7
https://stackoverflow.com/questions/3557724
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe eine Reihe von früheren Beiträgen liest mit dem padding Problem zu tun ich erlebe zwischen IE8 und früheren Versionen (IE7,6). Ich habe bereits versucht, mein CSS Zurücksetzen wie bereits erwähnt, aber kein Glück. Jede Hilfe wäre sehr geschätzt. Vielen Dank im Voraus!
Das Problem ist am besten mit Screenshots dargestellt (siehe unten), aber in dem css ich angebracht habe, ich bin ziemlich sicher, dass das Problem liegt irgendwo in der Polsterung in header_left und header_center, die nicht richtig in IE6 reflektierte / 7 . Meine total Breiten der Website immer auf 980px addieren, so meine Mathe ok ist ...
IE6 oder 7 (Probleme)
IE8 (keine Probleme)
Hier ist mein HTML-Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Application Form</title>
<link href="xyx.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#999999">
<div class="wrapper">
<div class="header_separator"></div>
<div class="header_left"></div>
<div class="header_center">
<h2> Lorem ipsum dolor sit amet</h2>
<h2> consectetur adipiscing elit </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet.</p>
</div>
<div class="header_right"></div>
<div class="header_separator">
<hr align="center" color="#00B050" size="5">
</div>
<div class="body_left">
<h3> Lorem ipsum dolor:</h3>
<ul class=noBulletIndent>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet. Donec eu tellus eu augue pellentesque venenatis ac v</li>
</ul>
</div>
<div class="body_right">
<form action="insert.php" method="post">
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr height=40 valign="top">
<td width="200"><p><strong>Company Name:</strong></p></td>
<td width="430"><input name="companyname" type="text" id="companyname" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Company Website:</strong></p></td>
<td width="430"><input name="website" type="text" id="website" size="40" /></td>
</tr>
<tr height=125 valign="top">
<td width="200"><p><strong>Company Description:</strong></p></td>
<td width="430"><textarea name="description" id="description" rows="6" cols="40"></textarea></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Primary Contact Person:</strong></p></td>
<td width="430"><input name="contactperson" type="text" id="contactperson" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Contact Person Email:</strong></p></td>
<td width="430"><input name="contactemail" type="text" id="contactemail" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Contact Person Phone:</strong></p></td>
<td width="430"><input name="contactphone" type="text" id="contactphone" size="40" /></td>
</tr>
<tr>
</table>
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300">
<?php
require_once('recaptchalib.php');
$publickey = "xyz";
echo recaptcha_get_html($publickey);
?>
</td>
<td width="330" align="left" valign="bottom">
<input type="image" name="submit_acre" id="submit_acre" src="images/acre_submit.png" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Hier ist meine xyz.css:
@charset "utf-8";
/* CSS Document */
.mainbody{
margin-left: auto;
margin-right: auto;
width:980px;
word-spacing: normal;
}
.wrapper {
height: 100%;
width: 980px;
margin-right: auto;
margin-left: auto;
}
.header_separator {
background-color: #FFF;
height: 10px;
width: 980px;
float: left;
vertical-align: middle;
}
.header_left {
background-color:#FFF;
height:122px;
width:110px;
float: left;
vertical-align: middle;
padding-left: 10px;
}
.header_center {
background-color: #FFF;
height: 122px;
width: 630px;
float: left;
font-family: arial;
vertical-align: top;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
.header_right {
background-color: #FFF;
height: 122px;
width: 210px;
float: left;
vertical-align: middle;
}
.body_left{
background-color:#FFF;
height:490px;
width:300px;
float:left;
font-family: arial;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
.body_right{
background-color:#FFF;
height:490px;
width:650px;
float:left;
padding-top: 10px;
padding-left: 10px;
}
.noBulletIndent {
padding: 0px;
margin-left: 12px;
margin-top: 0px;
}
p {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 14px;
}
h2 {
margin: 0px;
padding: 0px;
font-family: arial;
}
h3 {
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 15px;
}
li {
margin: 0px;
padding: 0px;
font-size: 14px;
margin-left: 4px;
}
Lösung
Ist das wirklich Ihre komplette HTML? Wenn ja, sind Sie im Quirks-Modus ohne Doctype. Denken Sie auch daran, dass IE6 nicht wie IE7 funktioniert, das funktioniert nicht wie IE8, die nicht funktionieren wie IE9. (Viel Glück für uns alle!)
Andere Tipps
Zunächst einmal ohne Doctype im Quirks-Modus ausgeführt werden.
Zweitens, ich bin nicht sicher, was das Problem ist ... ist es die Polsterung oberhalb und unterhalb dem HR, der bricht die richtigen grauen Balken nach oben? Wenn ja, kann das mit einem schnellen Reset von HR festgelegt werden.
hr {
padding:0px;
margin:0px;
}
würde ich eine overflow-x:hidden; auf das Element gesetzt, dass Unebenheiten in der Seitenleiste auf der rechten Seite, wie Ihr Inhalt div oder was auch immer es, um sicherzustellen, nicht mehr als whatevermany Pixel Sie zugeordnet, da IE6 / IE7 ermöglichen ein Element der überschreiten Breite.
Ein jsfiddle würde visuell helfen zu sehen, wie auch das Problem, wenn das es nicht tun.
