Results 1 to 3 of 3

Thread: Problem with 3-column/floats & Mac IE 5

  1. #1
    Join Date
    Dec 2002

    Problem with 3-column/floats & Mac IE 5

    I've got a three-column fixed-width layout, in which I want all three columns the same length.

    There are some great tutorials on this, but typically they use left and right borders of the "container" as backgrounds for floated left and right content. In my case, I need borders between the colums that run full-height, so I made my container just the width of the center column, then essentially set my left and right columns outside the center column with negative margins.

    I've got it working well in Mozilla, Safari, Windows IE 5 & 6 but it's pretty munched in Mac IE 5. So far I'm only able to fix parts of it with some pretty radical margin numbers on the left and right floated columns. The center column is still shifted to the right by (what looks like) the amount of the width of the left column.

    I guess I'm wondering whether I should even bother fixing it - how many Mac IE 5 users are left? Not too many according to my favorite stats page: http://www.upsdell.com/BrowserNews/stat.htm#source1

    But I hate to disappoint people. Are there some pointers for dealing with floats and strange widths and Mac IE 5?

    - Bob

    #container {
    	background: #333;
    	position: absolute;
    	width: 760px;
    	left: 50%;
    	margin-left: -380px;
    .bodycontainer {
    	overflow: visible;
    	position: relative;
    	left: 152px;
    	width: 350px;
    	border-left: 4px solid #232323;
    	border-right: 4px solid #232323;
    	background: #eee;
    * html .bodycontainer {
    	width: 358px;
    	w\idth: 350px;
    #left_col {
    	float: left;
    	position: relative;
    	display: inline;
    	width: 152px;
    	margin-left: -156px;
    #right_col {
    	float: right;
    	position: relative;
    	display: inline;
    	width: 218px;
    	padding: 0 14px 20px 18px;
    	margin-right: -250px;
    * html #right_col {
    	width: 250px;
    	w\idth: 218px;
    div.center_content {
    	width: 310px;
    	padding: 12px 20px 16px;
    * html div.center_content {
    	width: 350px;
    	w\idth: 310px;
    <div id="container">
    	<div class="bodycontainer">
    		<div id="left_col"><!--NAV_BUTTONS--></div>
    		<div class="white_text" id="right_col"><!--SIDEBAR_CONTENT--></div>
    		<div class="center_content"><!--SUB_NAV--><!--CENTRAL_CONTENT--></div>
    		<div class="clear"></div>
    - with the commented parts populated via PHP. Note also the outer "container" also holds header & footer, omitted here for simplicity.

  2. #2
    Join Date
    May 2004
    dobson ave.
    Hi -
    Have you checked out Paul's Kaboodle of Examples ;-)?


    F-fox 2.0 :: US :: el design site :: 768 kbps :: WIN

  3. #3
    Join Date
    Dec 2002
    Good stuff - not too dissimilar from what I've read elsewhere, though this one's definitely going in the bookmarks list.

    I'm averse to the tiling background image though. My experience (and what some of my testers have been reporting) is of a blink of page background-color before the background image loads. In my case I have dark left and right columns and a light center column, and the overall page color is dark, so the center column text is briefly black-on-black until the image loads, which feels a bit lame to me.

    Not sure how many people will shoot me for this, but what I've done now is work a browser detector into the site that says "if you're using IE 5 Mac (or NN4 or IE4 Win), you should get a newer browser", along with links to Mozilla and IE downloads. The security on the site requires IE 5.0.1+ anyway, and the client's budget doesn't justify the time spent to dial it in for every sub-1% browser out there.

    Heck, there are some out there that don't even bother with IE 5 Windows, which still has a modest share - more than my client would want to give up.

    - Bob

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center