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

Тема в разделе "Веб-дизайн", создана пользователем Baracuda, 30 окт 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    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 не понимает пнг - это не страшно, интересует иммено почему кнопка уезжает вникуда и почему текст принимает непонятный стиль)
     

    Вложения:

  2. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    607
    Симпатии:
    474
    По умолчанию разные браузеры имеют различные значения для margin, padding и line-height. Обнулите их для начала добавив вот это в начало тпблицы стилей
    HTML:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    Вот здесь
    #calculateButton a
    у вас применено правило display:table-cell; которое не понимает IE6 и IE7, поэтому наверняка будет отличаться вёрстка в этих браузерах. Для текста который принимает непонятный стиль размер не указан.
     
  3. KyaH

    KyaH Создатель

    Регистр.:
    13 сен 2010
    Сообщения:
    15
    Симпатии:
    1
    Лучше приложи полный код HTML, CSS и, желательно, с картинками - так будет проще помочь, а тот код, что ты привел, у меня и в 6м, и в 7м, и в 8м ИЕ отображается так же, как и в Файрфоксе или Опере
     
  4. WhiteWolf

    WhiteWolf Создатель

    Регистр.:
    29 май 2006
    Сообщения:
    17
    Симпатии:
    0
    аналогично.
    помимо FF, Opera и IE пробовал и в Safari
     
  5. Hitchsd

    Hitchsd Писатель

    Регистр.:
    30 мар 2008
    Сообщения:
    4
    Симпатии:
    0
    Для начало необходимо обнулить все теги, чтобы во всех браузерах они имели одинаковые значения.
    Искать reset.css
     
  6. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    вот пример css reseta

    Код:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    }
    :focus {
    	outline: 0;
    }
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    }
    ol, ul {
    	list-style: none;
    }
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" "";
    }
    
     
Статус темы:
Закрыта.