IE gooit paragraaf naar beneden - Softwareontwikkeling

zaterdag 22 september 2007 17:25

Acties:

Topicstarter

Ik ben een nieuwe structuur begonnen voor een site, maar IE kan op de een of andere manier niet goed hier mee omgaan.

reset.css:

code:

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;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
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: "" "";
}

test.css:

code:

BODY {
/* Dit plaatst de standaardlettergrootte op 10px, dus em * 10 = px. Makkelijk mee te rekenen */
    font-size: 62.5%;
}

DIV#master {
    width: 100em;
    height: 1em;
}

P { margin: 0.5em; }

.left { float: left; }
.right { float: right; }

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10
{ margin: 0; padding: 0; overflow: hidden; }

.box1 { width: 10em; }
.box2 { width: 20em; }
.box3 { width: 30em; }
.box4 { width: 40em; }
.box5 { width: 50em; }
.box6 { width: 60em; }
.box7 { width: 70em; }
.box8 { width: 80em; }
.box9 { width: 90em; }
.box10{ width: 100em; }

test.html:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>CSS opzet</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
<div id="master">
    <div class="box10"><p>box10</p></div>
    <div class="box2 left"><p>box3 left</p></div>
    <div class="box2 right"><p>box3 right</p></div>
    <div class="box6 right"><p>box6 right</p>
        <div class="box3 left">
            <p>box6 left/box3 right:</p>
        </div>
        <div class="box3 right">
            <p>box6 left/box3 right</p>
        </div>
    </div>
</div>
</body>
</html>

Het probleem is dat het box6 element er niet tussen past, althans niet in IE6, wel in FF. Ik heb overflow: hidden, word-wrap: break-word; geprobeerd, maar heb geen oplossing kunnen vinden. Als je de zoom methode van IE gebruikt, past het zo nu en dan wel, maar meestal niet.

Vond dit met google: http://www.positionisever...orer/expandingboxbug.html maar bood helaas geen uitkomst. Weet iemand een oplossing voor dit probleem?

Bvd

zaterdag 22 september 2007 17:41

Acties:

Deikke

Topicstarter

Ben er zojuist achter gekomen dat wanneer ik:

BODY {
/* Dit plaatst de standaardlettergrootte op 10px, dus em * 10 = px. Makkelijk mee te rekenen */
font-size: 62.5%;
}

naar:

BODY {
/* Dit plaatst de standaardlettergrootte op 10px, dus em * 10 = px. Makkelijk mee te rekenen */
font-size: 10px;
}

verander, het probleem over is. Maar nu is het resize karakter in IE weg (werkt nog wel in andere browsers). Ik denk aan een verkeerde float afronding oid bij het doen van 62.5%.

Reageer