Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: not2easy

Message Too Old, No Replies

trouble with floats

     

dukelips

3:21 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



i m designing a new page with css. the page is designed as a 3 column layout with floats.

The layout appears normal in ie 7 and firefox but one of the column appears below the others in ie 6.

can anyone suggest a fix

RedTCat

3:35 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



Be careful with widths of the DIV's. Allow for an extra 3px space between each floated DIV in IE6 as it adds extra space between floated DIV's.

dukelips

5:08 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



any hacks

Marshall

6:51 pm on Apr 25, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Set your <div> margins to zero then set the left margin for both your center and right <div> to whatever distance you want them to be spaced. Do not forget that borders and padding will affect the overall width of a <div> too.

Marshall

swa66

2:36 am on Apr 26, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Make the width of the parent wider, or the width of the childern smaller for IE6 only using a conditional comment.

I'm not into "hacks" as I believe they make the world a worse place in the long run.

dukelips

9:33 am on Apr 26, 2008 (gmt 0)

5+ Year Member



shd i use boxhack for ie 7 or is it negated in ie 7.

Css designs can be cool if its a straight forward web design but with table like structure inside a page leads to much confusion

dukelips

4:00 pm on Apr 27, 2008 (gmt 0)

5+ Year Member



PLEASE CLARIFY

SHD WE USE HACKS FOR THE BOX MODEL IN IE 7

swa66

4:01 am on Apr 28, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I try to avoid all hacks. Conditional comments in IE will do the trick.

I use this:


<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

First make it work in firefox/safari/opera ... (anything but IE),
once you're happy there, move to IE and fix the problems of rIE6 and IE7 in their file that you put on top of the standards compliant one.

You should be able to keep it hack free that way.

dukelips

4:47 am on Apr 28, 2008 (gmt 0)

5+ Year Member



swa66 tx for your help.

my question is ie implements the box model differently .Is it corrected in IE7 or is it the same .