ok last question i promise

[Paul Watt]

Hi,
Ok, I've solved most of the layout issues I was having with the template I'm
building and it looks ok in both IE and FF.
One thing remains though and its driving me nuts. I've got two divs's
displayed next too each other to make two cols, the left hand div set at a
width of 250px, the right hand div no width set.
In FF the right div starts at the edge of the left div and displays
correctly, however in IE the right div starts at the edge of the page
(although the text in the div starts at the edge of the left div).

So If i set margin-left on the maincontent div to 255px in IE it sits where
I want, but in FF it sits 255px away from the left div which just looks
wrong.

The URL is: http://www.paulwatt.info/test/turn/ .
and http://www.paulwatt.info/test/turn/css/turnlayout.css

I've been searching google and I cant find a answer. I suspect that FF is
behaving properly and IE is doing its usual thing.

many thanks in advance

Paul

 

[Noozer]

Hi,
Ok, I've solved most of the layout issues I was having with the template
I'm building and it looks ok in both IE and FF.
One thing remains though and its driving me nuts. I've got two divs's
displayed next too each other to make two cols, the left hand div set at a
width of 250px, the right hand div no width set.
In FF the right div starts at the edge of the left div and displays
correctly, however in IE the right div starts at the edge of the page
(although the text in the div starts at the edge of the left div).

So If i set margin-left on the maincontent div to 255px in IE it sits
where I want, but in FF it sits 255px away from the left div which just
looks wrong.

Because "leftcell" is floated, it's not counted when placing the
"maincontent" div.

I think both browsers have it wrong...

Firefox, because it's not truly floating the "leftcell" div.

IE, because it takes into account the foated div, but then doesn't apply the
content based on it.

Try sqashing your browsers narrower and you'll see IE starts wrapping the
content at the left margin.

 

[Tony]

Hi,
Ok, I've solved most of the layout issues I was having with the template I'm
building and it looks ok in both IE and FF.
One thing remains though and its driving me nuts. I've got two divs's
displayed next too each other to make two cols, the left hand div set at a
width of 250px, the right hand div no width set.
In FF the right div starts at the edge of the left div and displays
correctly, however in IE the right div starts at the edge of the page
(although the text in the div starts at the edge of the left div).

So If i set margin-left on the maincontent div to 255px in IE it sits where
I want, but in FF it sits 255px away from the left div which just looks
wrong.

The URL is: http://www.paulwatt.info/test/turn/ .
and http://www.paulwatt.info/test/turn/css/turnlayout.css

..leftcell{
margin-top:5px;
width: 250px;
position: absolute;
}

Look into FLOAT, and lose position:absolute

 

[Paul Watt]

.leftcell{
margin-top:5px;
width: 250px;
position: absolute;
}

Look into FLOAT, and lose position:absolute

I tried Float but it wasnt working for me, so I had to resort to
position:absolute.

 

[Tony]

I tried Float but it wasnt working for me, so I had to resort to
position:absolute.

What happened when you used float?

 

[Paul Watt]

What happened when you used float?

I had two cells leftcell and maincontent; I had leftcell (float:left;
width:250px and maincontent(no float,margin-left:255px. IE and FF
couldnt decide where to start counting the 255px from because leftcell was
floated.

Paul

 

[axlq]

I had two cells leftcell and maincontent; I had leftcell (float:left;
width:250px and maincontent(no float,margin-left:255px. IE and FF
couldnt decide where to start counting the 255px from because leftcell was
floated.

Try and see what happens if you set a margin-left: -1px; in the
left-floated box. It fixes up a similar problem in NS4.

See: http://realworldstyle.com/2col.html

I have found this to be a very useful example for my own page layouts.

-A

 

[Tony]

I had two cells leftcell and maincontent; I had leftcell (float:left;
width:250px and maincontent(no float,margin-left:255px. IE and FF
couldnt decide where to start counting the 255px from because leftcell was
floated.

What happens if you leave off the margin-left:255px?

 

[Neredbojias]

To further the education of mankind, "Paul Watt"

Hi,
Ok, I've solved most of the layout issues I was having with the
template I'm building and it looks ok in both IE and FF.
One thing remains though and its driving me nuts. I've got two divs's
displayed next too each other to make two cols, the left hand div set
at a width of 250px, the right hand div no width set.
In FF the right div starts at the edge of the left div and displays
correctly, however in IE the right div starts at the edge of the page
(although the text in the div starts at the edge of the left div).

So If i set margin-left on the maincontent div to 255px in IE it sits
where I want, but in FF it sits 255px away from the left div which
just looks wrong.

The URL is: http://www.paulwatt.info/test/turn/ .
and http://www.paulwatt.info/test/turn/css/turnlayout.css

Try adding left:0; to your .leftcell css. (Untried.)

 

[Paul Watt]

To further the education of mankind, "Paul Watt"


Try adding left:0; to your .leftcell css. (Untried.)

All sorted now using a mix of absolute positioning and a IE browser hack!
Thanks any way

Paul.

 

[dorayme]

What happened when you used float?

I had two cells leftcell and maincontent; I had leftcell (float:left;
width:250px and maincontent(no float,margin-left:255px. IE and FF
couldnt decide where to start counting the 255px from because leftcell was
floated.[/QUOTE]

They do decide, it is just that they decide differently to each
other. And IE deviates from the css standards. If you left float
a nav block, IE displaces the whole of the next block, not just
its content (eg, words).

It is a headache, true, but you need to get to grips with it, it
is really a fundamental if you are going to design with css.

If you want to avoid a margin on your content block in which your
float sits, then you can use a left float on the content block as
well.

You need now to watch for IE doubling float margins too, these
are all horrible bugs. There are no end of tutes on these things.
http://www.positioniseverything.net/explorer/doubled-margin.html
for this last.

You could read
http://www.digital-web.com/articles/toward_a_more_standards_compli
ant_ie/

and

http://www.positioniseverything.net/floatmodel.html

 

[Beauregard T. Shagnasty]

All sorted now using a mix of absolute positioning and a IE browser hack!
Thanks any way

How come you want me to scroll two different areas to read your content,
Paul? Your maincontent box is taller than my browser canvas, so I have
to scroll both the content div *and* the main viewport to read the
bottom of the text.

If you have a tall browser window, shorten up the height to see what I
mean.

 

[dorayme]

What happens if you leave off the margin-left:255px?

If he were to leave off the margin then in good and compliant
browsers the main would start at the left edge of the window,
same as with the float, and only the content would be displaced.
It is altogether better for the whole content block to be clear
of the float when you are using the float method to create
columns.

Floating for columns is a clever adaptation of the idea of
allowing text to wrap around pics, but it needs careful attention.

 

[dwight.stegall]

ie measures the box model differently than the others do. ie measures
from outside border to outside border. other browsers do it differently
and the box model ends up smaller in the other browsers.

here is a flash tutorial on how to fix the box model in ie
http://www.idest.com/csshacks/demos.htm

box model hack examples. click on "Chapter 3: Hiding Css From Newer
Browsers"
http://www.idest.com/csshacks/files.htm

also see
http://centricle.com/ref/css/filters/

this might be a bit intense for a newbie to follow
http://css-discuss.incutio.com/?page=BoxModelHack

if you still don't understand it join http://www.cssdiscuss.org/ it's a
css email list. get a throw away email address just for this list.
you'll get about a dozen emails from them maybe more. they help newbies
and professionals.