Sat, 2004-12-11 00:24
G'day
I ahve myself a nice shiny website. Except it's not working right under IE.
I have a div that makes up a light grey centre panel. It's style is defined by:
div#contentpane
{
[b]width: 80%;[/b]
min-height: 400px;
[b]margin: 0px 10% 0px 10%;[/b]
padding: 20px;
border: solid 1px #434C50;
border-bottom: 0px;
background: #CCD1CB;
}
In Firefox/Gecko, this renders perfectly, and the central pane takes up exactly 80% of the page width. In IE, it doesn't:
As you can see there's far too much leftover space on the right. I thought the 'width' was a fairly safe bet when it comes to IE, but apparently there's some other block.
There are two other divs, one above (with the big text in) and one below (with the copyright info), with the same layout properties and same problem. There is absolutely nothing else on the page that isn't on one of these three divs, nothing to either side.
Any ideas?
Sat, 2004-12-11 03:38
#1
(Yet another) Internet Explorer layout issue!
The simplest fix would be to put a wrapper around the whole page. The present divs could then have no declared width and would default to the width of the ancestor. Make the wrapper {width: 80%; margin: 0 auto; text-align: left;}. Make body {text-align: center;}. Look at this demo. Change the width in the demo to 80% and put your entire page in the wrapper div.
cheers,
gary
Sat, 2004-12-11 16:07
#2
(Yet another) Internet Explorer layout issue!
yup, it worked.
I didn't use a wrapper, I just applied those properties to all three divs. I'm still at a loss to find out why IE needs it done this way though :?
Thanks!
Sat, 2004-12-11 17:29
#3
(Yet another) Internet Explorer layout issue!
In IE (quirks mode) this style is worked out as 80% of the remaining width after you take of the 10% margins make the width 100% to see the correct display)..
However in standards compliant mode it should render correctly.
The best bet though is to leave off the width and let the browser work it out from the margins. This way IE will display correctly in quirks mode and standards compliant mode.
Sat, 2004-12-11 18:30
#4
(Yet another) Internet Explorer layout issue!
Good point - if you specify the width, you don't need to specify the rest of the space - it works it out automatically.
Sat, 2004-12-11 18:30
#5
(Yet another) Internet Explorer layout issue!
Good point - if you specify the width, you don't need to specify the rest of the space - it works it out automatically.
Sat, 2004-12-11 18:31
#6
(Yet another) Internet Explorer layout issue!
Good point - if you specify the width, you don't need to specify the rest of the space - it works it out automatically.
Sat, 2004-12-11 18:58
#7
(Yet another) Internet Explorer layout issue!
Echo, Echo, Echo 