Divy rozjeżdzają się po dodaniu border pod IE8.

19 listopada 2013

Witam. Mam problem z divami pod explorerem po dodaniu bordera. Może ktoś miał z czymś takim do czynienia i będzie wiedział jak to ogarnąć bo mi zaczyna już cierpliwości brakować. Ale po kolei:

HTML:

<body>
<div id="main">
    <div id="baner">baner</div>
    <div id="menugora">menugóra</div>
    <div id="menulewa">menulewa</div>
    <div id="ramka">ramka</div>
</div>
</body>

CSS:

body{
    background-color: #E6E6E6;
    text-align: center;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-family:sans-serif;
    color: red;
    }
    
div#main {
background-color: #FFFFFF;
position: relative;
width: 800px;
margin: auto;
height: 600px;
}

div#baner{
background-color: #609837;
width: 800px;
height: 200px;
position: relative;
}

div#menugora{
background-color: #123456;
width: 800px;
height: 50px;
position: relative;
}

div#menulewa{
background-color: #654321;
width: 150px;
height: 200px;
display: block-inline;
float: left;
position: relative;
}

div#ramka{
background-color: #345098;
width: 650px;
height: 200px;
position: relative;
display: block-inline;
float: left;
}

Strona wyświetla się tak i jest wszystko ok:

[attachment=27658:strona ok.png]

Następnie do #main chcę dodać obramowanie o grubości 2px, linia ciągła, czarna. Więc do diva dodaję border (czerwonym zaznaczyłem zmianę) Div wygląda następująco:

div#main {
background-color: #FFFFFF;
position: relative;
width: 800px;
margin: auto;
height: 600px;
border: 2px solid #000000;
}

I we wszystkich przeglądarkach jest ok, oczywiście IE daje ciała bo strona wygląda tak:

[attachment=27659:strona1.png]

Wiem że model boxa różni się w tym cholernym Explorerze. Więc zacząłem kombinować z szerokością div#ramka. I jest dziwna sytuacja, przy szerokości 647px ramka nie "dotyka" prawej kreski, zostaje tak jeszcze ok 2px białego, jak zmienię szerokość na 648px; to wszystko się rozsypuje tak jak po dodaniu bordera. Ma ktoś pomysł na to? Z góry wielkie dzięki za pomoc. Pozdrawiam

20 listopada 2013

nieelegancko, ale IE czasami zmusza do takich rzeczy:

<div id="content">
    <div id="menulewa">menulewa</div>
    <div id="ramka">ramka</div>
</div>

w CSS:

#content {width:800px;}

20 listopada 2013

Super, działa, temat do zamknięcia. Wielkie dzięki.

Zaloguj się

Divy rozjeżdzają się po dodaniu border pod IE8.

Maximus83

Gość

Maximus83

Wciąż szukasz rozwiązania problemu? Napisz teraz na forum!

Strona główna

Powiadomienie o plikach cookie