Can anyone explain why the code below produces the following results:
Mozilla: the inner box completely fills the outer box.
IE6: the inner box is flushed left, and has a margin of 40px from the right of the outer box.
How can I overcome this?
Regards,
Alan
/***********CSS************/
div.outerBox {
border:1px solid red;
width:400px;
}
div.innerBox {
border:10px solid blue;
padding:10px;
width:360px;
}
/***********HTML************/
<div class="outerBox">
<div class="innerBox">
</div>
</div>I dont know if this is it but it may the box model problem because mozilla will add the padding to the width also try searching google for box model hack you'll def find info there i used to have a good link but i lost my bookmarks sorry.the simple explanation is that IE subtracts padding/margins etc from the width, whilst Moz adds padding/margins to the width.
What do you want it to look like, then we can suggest how to improve it.Stop hacking and use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) and read up on 'standards' v 'quirks' mode (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/#quirks">http://www.w3.org/International/article ... ml/#quirks</a><!-- m -->)Thanks to all. Fang's suggestion worked.
I was using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This had been inserted by my editor, TopStyle Pro 3.10
I changed to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Regards,
AlanIn case anyone comes here off of a search, here's the box model hack Sharkey was referring to, in it's 'official' source... <http://www.tantek.com/CSS/Examples/boxmodelhack.html>
Mozilla: the inner box completely fills the outer box.
IE6: the inner box is flushed left, and has a margin of 40px from the right of the outer box.
How can I overcome this?
Regards,
Alan
/***********CSS************/
div.outerBox {
border:1px solid red;
width:400px;
}
div.innerBox {
border:10px solid blue;
padding:10px;
width:360px;
}
/***********HTML************/
<div class="outerBox">
<div class="innerBox">
</div>
</div>I dont know if this is it but it may the box model problem because mozilla will add the padding to the width also try searching google for box model hack you'll def find info there i used to have a good link but i lost my bookmarks sorry.the simple explanation is that IE subtracts padding/margins etc from the width, whilst Moz adds padding/margins to the width.
What do you want it to look like, then we can suggest how to improve it.Stop hacking and use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) and read up on 'standards' v 'quirks' mode (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/#quirks">http://www.w3.org/International/article ... ml/#quirks</a><!-- m -->)Thanks to all. Fang's suggestion worked.
I was using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This had been inserted by my editor, TopStyle Pro 3.10
I changed to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Regards,
AlanIn case anyone comes here off of a search, here's the box model hack Sharkey was referring to, in it's 'official' source... <http://www.tantek.com/CSS/Examples/boxmodelhack.html>