Jump to content
  • 0

Баг с плавающим блоком в IE 6,7


nefarious
 Share

Question

Собственно, проблема.

Сверстал макет. В IE 8 и отличных от IE браузерах (FF, Chrome, Opera) блок с текстом обтекает блок с картинкой.

вот так:

a01d3a89364c.jpg

В IE 6/7 же блок с текстом смещается вниз:

05ed0974de9b.jpg

ХТМЛ код:

<div id=mainframe> 
<div id=corner>
<img class="ugol_right" src="ugol_right_small.gif" alt="" />
</div>
<div id=content>
<p>This is a tool for finding friends in real life. </p>

<!-- бла-бла-бла-->

</div>

CSS код:

* {
margin: 0;
padding: 0;
border: 0;
}
html, body {height: 100%;}
body{
background: #fff;
color: #333;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#container {overflow: auto;
padding-bottom: 50px;
min-height: 100%;
width: 1024px;
min-width:1024px;
margin: 0 150% auto 3%;
}

#mainframe
{float:left; width: 716px;
}
#corner
{float:left; width:80px;
}
#corner_left
{clear:both;
float:right;}
#content
{min-height: 144px;
width: 716px;
border: 1px solid #cbcbcb;
padding: 6% 0 4% 0;
font-family: verdana, arial, sans-serif;}
#content p
{text-indent: 0%;
font-size: 12px;
padding: 3px 100px 3px 100px;
}

Задать hasLayout тут вроде бы нецелесообразно, так как layout у этих элементов уже есть.

Подскажите, пожалуйста, в чём может быть баг.

Только не предлагайте отключить поддержку IE7)

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Код, конечно, бардачный... Создается впечатление, что куски писались разными людьми.

Ну хотябы не надо обнулять бордеры для всего, будут проблемы с кнопками. Обнулите только для img и table.

id почему не в кавычках? При некоторых доктайпах реакция броузера на это может быть негативной. Ширину не к месту порой указываете.

От блока corner можно избавиться, задав его свойства вложенной картинке. Но это, конечно, если в нем нет еще контента, который вы удалили.

Уберите отсюда width, тогда и в ИЕ будет все ок. Этот блок и так растянется на всю доступную ширину:

#content
{min-height: 144px;
width: 716px;
border: 1px solid #cbcbcb;
padding: 6% 0 4% 0;
font-family: verdana, arial, sans-serif;
}

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

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • 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