IE problem: width 100% inside padded div - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

IE problem: width 100% inside padded div

xoid

3:19 pm on Apr 6, 2007 (gmt 0)

10+ Year Member

Below is some test code which I want to be showing exactly same in IE6 and FF. I was only be able to tune this removing DOCTYPE declaration (i.e. forcing IE6 to work in quirks mode) and adding '-moz-box-sizing: padding-box;' to the div style (i.e. forcing FF using old "IE quirks" box model to make sure IE6 and FF render same size div box).
Otherwise (in standard mode) IE will add vertical scrollbar _over_ but not aside textarea content. FF works smart in both box models.
Is there any way to avoid using quirks mode and still have smart rendering in both IE6 and FF generating exactly same view?

Thanks.

<html>

<head><style type="text/css"> <!--

body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

div#fixed {
width: 800px;
height: 400px;
padding: 10px;
overflow-x: hidden;
overflow-y: scroll;
background-color: #D5FFD5;
-moz-box-sizing: padding-box;
}

textarea {
width: 100%;
height: 5em;
overflow: auto;
font-size: 16px;
}

--> </style></head>

<body>
<div id="fixed">
<form>
<textarea>
line one
line two
line three
</textarea>
</form>
</div>
</body>
</html>

xoid

3:28 pm on Apr 9, 2007 (gmt 0)

10+ Year Member

Thanks to person who did reply me with the links to 3 articles about 'hasLayout' internal IE property.

It really helped me...

[edited by: SuzyUK at 4:17 pm (utc) on April 9, 2007]
[edit reason] tidying - TOS#24 [/edit]

xoid

4:30 pm on Apr 9, 2007 (gmt 0)

10+ Year Member

The final problem solution was adding one more div around textarea element:

<div class="hasLayout"><textarea>
line one
line two
line three
</textarea></div>

with the following style:

div.hasLayout {
zoom: 1;
}

Then I was able to set modern doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
and remove mozilla property from the div#fixed: /* -moz-box-sizing: padding-box; */

To make IE vs FF difference even less I also added "padding: 0px;" to the textarea style, but essential fix was adding div with "hasLayout" set to "true".

Thanks.

SuzyUK

4:36 pm on Apr 9, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi xoid and Welcome to WebmasterWorld!

glad if you saw those links and they helped, (see your inbox for more info)

We have a couple of threads here on hasLayout [webmasterworld.com] too, which include the IE source and reference to Ingo Chao's article too (two of the links in the original post) - admittedly I did not think that this was a hasLayout issue, I thought it was plain ol' Box Model BUT it appears I was wrong so forgive me :o

did you find a solution?

Suzy

SuzyUK

4:53 pm on Apr 9, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

ahh.. cross posting

Thanks for posting your solution, xoid

another one to remember, should've realised that overflow would be another contributor to IE's counting problems!

- would it also work by setting hasLayout to true on the existing <form> element rather than adding a new div?

xoid

5:04 pm on Apr 9, 2007 (gmt 0)

10+ Year Member

Yes, you're right.
form element also could be used as a target for vaccination!
I've tested - it worked.