Jump to content
  • 0

Верстка под IE 6


Hol1killer
 Share

Question

Добрый день друзья, закасчик попросил верстку с IE6, ну в тз не было про это, во всех браузерах отобрается нормально и IE 8+ , в 7-ой версии не проверял=)

нужно сверстать под IE6, хочу подключить отдельный файл с помощью условных комментариев, но не смог написать.=(

макет фиксированный 2 колонки, сайт _http://okno-m.ru/

впринципе проблема тока одна которую не могу решить это блок с контентом переносится на новую строку...


@import url("reset.css");
@import url("slider.css");
@import url("drop_down.css");
@import url("contact.css");



body {
font: 9pt/1.4 Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
color: #000;
background: -webkit-linear-gradient(top, #fbfcfe,#09F, #fbfcfe);
background: -moz-linear-gradient(top, #fbfcfe,#09F, #fbfcfe);
background: -o-linear-gradient(top, #fbfcfe,#09F, #fbfcfe);

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
padding-right: 15px;
padding-left: 5px;
padding-top:12px;
color: #CC9900;
font-size: 16px;
}
p {
margin:10px;
padding:5px;
}
a img {
border: none;
}
a {
text-decoration:none;
color:#000;
}

a:hover {color: #ff8e00;}

.container {
width: 1000px;
background: #FFF;
margin: 0 auto;
}

.header-box {
width:1000px;
height:265px;
background:url(../header/header.jpg) no-repeat center;
}
.fl {
float:left;
}
.fr {
float:right;
}

.right-block {
width:220px;
padding:5px;
margin:5px;
margin-left:-30px;
}
.content_box {
margin:0px 0px 10px -15px;
}
.content_box p {
padding:5px;
}


.prof {
margin-bottom:10px;
}
.prof span {
color:#F00;
}
.prof tr td {
padding:5px;
text-align:center;
}
.prof tr td img {
border:1px #999 dashed;
}
.prof tr td img:hover {
background:#FF8000;
}

.pol_st {
margin-bottom:10px;
}
.pol_st img {
padding:2px;
margin-top:7px;
border:1px #999 inset;
}

.content {
float:left;
text-align:justify;
width:735px;
padding:0px 10px 10px 10px;
line-height:1.5em;
}
.content p>span {
color: #CC9900;
font-weight:bold;
}
.content p>span>em {
color:red;
}
.content a>span {
color:#F39;
}



.list_house {
padding:15px;
}
.list_house li {
padding:3px;
}
.list_house li:hover a {
text-decoration:underline;
color:#FF8000;
}
.block {
font-weight:bold;
padding:5px;
margin-top: 12px;
text-align:center;
}
.block a:hover img {
background:#FFF;
opacity:0.7;
moz-opacity:0.7;
-khtml-opacity:0.7;
}
.footer {
clear:both;
border-top:1px #CC9900 dotted;
padding: 5px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.cl_f {
clear:both;
}

.titl {
padding:10px;
font:18px/5pt Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
border-bottom:1px #00F dotted;
color: #00F;
}
.xlebnie_kr {
margin:-10px 0 0 5px;
}
.xlebnie_kr a {
color:#000;
text-decoration:underline;
font-size: 10px;
}
.xlebnie_kr a:hover {
font-style:italic;
color:#FF8000;
}
.prise {
background:url(../excel.jpg) no-repeat left;
float:right;
margin:10px 30px 0 0;
font-weight:bold;
}
.prise a {
padding-left:30px;
color:#000;
}

для CSS 3 использую PIE вроде работает, заранее спасибо!

Edited by Hol1killer
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

А где HTML?

И такие вещи надо на jsfiddle.net выкладывать, чтобы сходум ожно было поправить!

И нагородили Вы там... :dash:

Из того что в глаза бросилось. Наверняка margin-ы с floatam-и (зачем они там повсюду? у меню верхнего зачем? у контента?) законфликтовали, но проверять нет возможности.

.block table p a{display:block;}

- это первое! Если не поможет:

.content{overflow:hidden;}

- это второе! будет съезжать уменьшайте ширину этого блока, хотя там запас ещё приличный до конфликта с margin-ами...

Блин, первое не поможет.

В таблице, в тэге <a> после <img> поставьте <br /> или ещё лучше текст ссылки оберните тэгами <p></p>, которые у Вас зачем-то снаружи всей ссылки.

Т.е.:

<div class="block">
<table>
<tr>
<td>
<a href="#" style="display:block;">
<img src="#" />
<p>......</p>
</a>
</td>

......

Edited by Nanto
Link to comment
Share on other sites

  • 0

А где HTML?

И такие вещи надо на jsfiddle.net выкладывать, чтобы сходум ожно было поправить!

И нагородили Вы там... :dash:

Из того что в глаза бросилось. Наверняка margin-ы с floatam-и (зачем они там повсюду? у меню верхнего зачем? у контента?) законфликтовали, но проверять нет возможности.

.block table p a{display:block;}

- это первое! Если не поможет:

.content{overflow:hidden;}

- это второе! будет съезжать уменьшайте ширину этого блока, хотя там запас ещё приличный до конфликта с margin-ами...

Блин, первое не поможет.

В таблице, в тэге <a> после <img> поставьте <br /> или ещё лучше текст ссылки оберните тэгами <p></p>, которые у Вас зачем-то снаружи всей ссылки.

Т.е.:

<div class="block">
<table>
<tr>
<td>
<a href="#" style="display:block;">
<img src="#" />
<p>......</p>
</a>
</td>

......

насчет html дал ссылку=) сори мог выложить на jsfiddle.net. Насчет флота да, контент я сам не заметил даже не помню что он там был, в верхнем меню float:left обязателен что бы ссылки обтекались слева + там выпадающее меню, насчет таблицы спасибо я ступил=) текст обернул не заметил=)

Все равно в IE 6 блок с контентом падает вниз

насчет ширины там запаска есть 30px даже больше, я уменьшал и блок с контентом и на 100px все равно блок с контентом падает вниз никак не могу понять из за чего!

Edited by Hol1killer
Link to comment
Share on other sites

  • 0

Внутрь <a> нельзя запихивать <p>. ИЕ6 такого не поймет.

<ul id="top_nav"> для чего обернут в <div>? Зачем этому диву поставили float?

У <div class="content"> уберите float и поставьте ovefrlow: hidden;

спс, верстку не я делал, это уже убрал не знаю че там это делает , и у контента флоат тоже убрал overflow добавил уже =) да а насчет p вы правы строчный элемент обернут в блочный это вообще не правильно=) это не по стандартам=) вроде решил проблему там проблема с блочной моделью была не заметил сразу =) всем спасибо=)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy