7 replies [Last post]
F*SH
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

(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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

F*SH
Offline
Regular
Last seen: 13 years 8 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

(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!

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 30 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

(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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

(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.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

(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.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

(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.

Verschwindende wrote:
  • CSS doesn't make pies

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

(Yet another) Internet Explorer layout issue!

Echo, Echo, Echo Laughing out loud

Life's a b*tch and then you die!