- Автор темы
- #1
Недавно столкнулся с такой проблемой, сверстал часть кода, решил проверить, как оно выглядит во всех браузерах и обнаружил, что в ИЕ6 и ИЕ7 неправильно отображается часть кода. Подскажите, что именно не понимает семейство этого браузера:
HTML проблемной зоны:
и ЦСС к этой части:
В приложениях первый скрин, как должно быть, и два остальных как отображается в ие6 и ие7 (то, что ие6 не понимает пнг - это не страшно, интересует иммено почему кнопка уезжает вникуда и почему текст принимает непонятный стиль)
HTML проблемной зоны:
HTML:
<!-- start <content> -->
<div id="content">
<div id="handballContainer">
<p id="losung">
wir machen gas günstig
<span>mit <strong>energie</strong> für deutschland.</span>
</p>
<p id="underLosung">
Lesen Sie hier mehr über alle
<span><strong>Ihre Vorteile als goldgas Kunde.</strong></span>
</p>
<div id="dataBox">
<h2>Tarifrechner</h2>
<h1>Ermitteln Sie Ihre Ersparnis</h1>
<p>Ihre Postleitzahl:</p>
<label id="label">12365</label>
<p>
Ihr Jahresverbrauch
<span>typische Haushalts-Verbrauchswerte</span>
</p>
<p>oder bekannten Verbrauch angeben</p>
</div>
<div id="goldLine"></div>
<div id="calculateButton"><a href="#">Jetzt rechnen</a></div>
</div>
</div>
<!-- end <content> -->
HTML:
#content {
position:absolute;
top:160px;
left:0px;
}
#handballContainer {
width:982px;
height:404px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
background:url(../img/handball.png) top no-repeat;
}
#losung {
font-weight:bold;
font-size:40px;
position:relative;
top:242px;
left:37px;
}
#losung span {
font-weight:normal;
display:block;
position:absolute;
top:40px;
left:42px;
font-size:25px;
}
#underLosung {
position:absolute;
top:324px;
left:93px;
font-size:18px;
font-weight:normal;
}
#underLosung span {
display:block;
width:300px;
left:50px;
position:absolute;
top:16px;
font-size:18px;
}
#calculateButton {
position:absolute;
bottom:26px;
right:155px;
}
#calculateButton a {
width:84px;
height:84px;
display:table-cell;
vertical-align:middle;
background:url(../img/button-inaktiv.png) no-repeat;
font:13px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
text-align:center;
text-decoration:none;
}
#calculateButton a:hover {
color:#003366;
background:url(../img/button-aktiv.png) no-repeat;
}
#goldLine {
width:978px;
height:132px;
position:absolute;
bottom:2px;
right:2px;
background:url(../img/goldLine.png) bottom no-repeat;
}
#dataBox {
width:342px;
height:383px;
position:absolute;
top:0px;
right:24px;
background:url(../img/rechner-fond.png) no-repeat;
}
#label {
display:block;
width:226px;
height:31px;
background:#ffffff;
text-align:center;
font:20px/31px Arial, Helvetica, sans-serif;
color:#003366;
font-weight:bold;
}