Erratic widths of percentage-based columns in IE

This is a discussion on "Erratic widths of percentage-based columns in IE" within the Web Page Design section. This forum, and the thread "Erratic widths of percentage-based columns in IE are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Aug 12th, 2006, 11:09
New Member
Join Date: Aug 2006
Location: London
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Erratic widths of percentage-based columns in IE

I'm trying to create a layout which has left and right fixed-width columns with a fluid middle column, and fluid mini columns inside the middle column. I've got various ways of creating the basic three column structure, but come unstuck when I try to put the fluid mini columns inside the middle column. My plan was to do this by giving them a percentage width and floating them. All is well in both IE and Mozilla until I try to float them - with no float they present with the width I expect, ie as a percentage of the width available in the middle column. As soon as I stick in a float, in IE their width suddenly presents as a percentage of the total page width. Why does it do this, and how do I stop it?

I've put two examples together with just the bare bones of code: Test A creates the basic three column structure by positioning the side columns absolutely and giving the middle column a margin on both sides to clear them. Test B floats the left and right boxes, but again uses margins to keep the middle in the middle. Both have the problem.

I tried solving the problem by using display:inline instead of float to get the green boxes to sit next to each other. That kinda works in IE, although they display a little smaller than they should. But in Mozilla the boxes reduce to the width of the text in the paragraph (which I guess is what ought to happen, really).

An odd secondary bug I noticed when putting these examples together: in IE some of the paragraphs in the middle column don't display when the page is loaded. Is this the peekaboo bug I've heard so much about?

Any advice you can give me would be very much appreciated - I'm relatively new to CSS and trying to learn quickly!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Aug 12th, 2006, 14:15
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Erratic widths of percentage-based columns in IE

It'd the 'prolog' line that's throwing IE into confusion.
Code: Select all
<?xml version="1.0" encoding="iso-8859-1"?>
Get rid of it. It's not actually requirement anyway. You are better off using a meta tag to specify the character encoding.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Aug 12th, 2006, 22:08
New Member
Join Date: Aug 2006
Location: London
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Erratic widths of percentage-based columns in IE

Thank you! Very grateful.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Aug 12th, 2006, 22:25
New Member
Join Date: Aug 2006
Location: London
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Erratic widths of percentage-based columns in IE

Just did as you suggested and the columns are doing just what they should. Boy, does that make me happy!

Some of those middle paragraphs are still hiding when the page loads, though. They reappear when I select the text. Is this the peekaboo bug? If so, how do I fix it?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Aug 13th, 2006, 09:43
Rob's Avatar
Rob Rob is offline
Webforumz Founder
Join Date: Jul 2003
Location: Southern UK
Age: 34
Posts: 3,186
Blog Entries: 7
Thanks: 27
Thanked 23 Times in 20 Posts
Re: Erratic widths of percentage-based columns in IE

TRUE XHTML served with the CORRECT content encoding will not work in IE6 period.... all you'll get is the nicely rendered XML DOM Tree! ....

IE6 is extemely odd and can be thrown into funny quirks modes with the silliest things.
__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
erratic, widths, percentagebased, columns

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
displaying information as a percentage? ziggi PHP Forum 5 Jan 10th, 2008 15:44
100% widths snooper Web Page Design 5 Jul 12th, 2007 12:51
can't convert table-based to css-based layout markus Web Page Design 21 Apr 25th, 2007 22:50
Working out Percentage jwalker80 JavaScript Forum 3 Jun 10th, 2006 16:29
Percentage problems HOYS Web Page Design 7 Jan 31st, 2006 15:37


All times are GMT. The time now is 23:12.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42