Проблема с ИЕ7 ИЕ6

Статус
В этой теме нельзя размещать новые ответы.

Baracuda

Постоялец
Регистрация
31 Дек 2007
Сообщения
85
Реакции
4
Недавно столкнулся с такой проблемой, сверстал часть кода, решил проверить, как оно выглядит во всех браузерах и обнаружил, что в ИЕ6 и ИЕ7 неправильно отображается часть кода. Подскажите, что именно не понимает семейство этого браузера:
HTML проблемной зоны:
HTML:
    	    <!-- start <content> -->
            <div id="content">
            	<div id="handballContainer">
                	<p id="losung">
                    	wir machen gas g&uuml;nstig
                        <span>mit <strong>energie</strong> f&uuml;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;	
}
В приложениях первый скрин, как должно быть, и два остальных как отображается в ие6 и ие7 (то, что ие6 не понимает пнг - это не страшно, интересует иммено почему кнопка уезжает вникуда и почему текст принимает непонятный стиль)
 

Вложения

  • opera.png
    opera.png
    690,9 KB · Просмотры: 9
  • ie7.png
    ie7.png
    675,3 KB · Просмотры: 10
  • 34077fa40869cc08c299ecae21f55667.png
    34077fa40869cc08c299ecae21f55667.png
    480,1 KB · Просмотры: 9
По умолчанию разные браузеры имеют различные значения для margin, padding и line-height. Обнулите их для начала добавив вот это в начало тпблицы стилей
HTML:
* {
	margin: 0px;
	padding: 0px;
}

Вот здесь
#calculateButton a
у вас применено правило display:table-cell; которое не понимает IE6 и IE7, поэтому наверняка будет отличаться вёрстка в этих браузерах. Для текста который принимает непонятный стиль размер не указан.
 
Лучше приложи полный код HTML, CSS и, желательно, с картинками - так будет проще помочь, а тот код, что ты привел, у меня и в 6м, и в 7м, и в 8м ИЕ отображается так же, как и в Файрфоксе или Опере
 
Лучше приложи полный код HTML, CSS и, желательно, с картинками - так будет проще помочь, а тот код, что ты привел, у меня и в 6м, и в 7м, и в 8м ИЕ отображается так же, как и в Файрфоксе или Опере
аналогично.
помимо FF, Opera и IE пробовал и в Safari
 
Для начало необходимо обнулить все теги, чтобы во всех браузерах они имели одинаковые значения.
Искать reset.css
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху