Problems with CSS in IE

[dbrb2]

Hi,

I wonder if anyone can help. I have been playing around with css for layout as well as basic sytles, and have a problem with IE...

The first problem I had was that in all other browsers the margin of a content layer within my container layer started from the edge of the container, while in IE it started from the edge of the left floated navigation layer. I fixed this with a CSS hack that IE would ignore.

However, there is still a problem, shown in the demo link below, that the content in my main layer is shofted outwards slightly by the prescence of the navigation layer. Can anyone work out why?

The URL is:

http://www.bbarker.co.uk/website2

main.php is my template

and styles.css is my (messy) stylesheet...

Cheers,

Ben

 

[dbrb2]

My problem is a jopg 3px wide. I found this site:

http://www.positioniseverything.net/explorer/threepxtest.html

But the fix seems not to work for me. Besides, I am running IE7, which this site claims does not exhibit the problem...

 

[dbrb2]

hmmm....now, by adding in a float:left to my main layer, I have solved the problem of the margins being indexed from dufferent positions, and my 3px jog. However, now in FF my main layer does not fill the container horizontally, while in IE is goes on forever in the horizontal direction...

 

[dbrb2]

Hmmm...

well, I have kind of fixed it, by assigning an absolute width to the main layer. However, not only is this messy, but the absolute pixel width needs to be different in IE and FF. Confusing...

 

[dbrb2]

ah....but this means that if I set my screen resolution to less than the required set width of the layout, it goes horribly wrong. Surely there is a nice way of doing this, that does not involve hard coding "magic" numbers?

 

[ca8msm]

Start by having a valid doctype and making sure your page validates to it. Without this it's pointless looking for reasons as to why your layout isn't doing what you want.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[dbrb2]

Ah - good point

That has helped in that FF and IE now both show the same thing. The only issue now is trying to find a way of forcing my green layer to extend as far as the container, so that the page can cope with thew browser window changing shape without going wrong (and moving the layer in an attempt to get it to fit)

 

[dbrb2]

Well, I have fixed it!

Unsure precisely what is happening though:

The navigation column is now floated left
The main layer is position:relative

The float:left obviously forces the nav column to the left hand side of my container. I am less sure why the position:relative puts the main window in the right place, as I can't find out where it is defined what the position is relative to, but in this instance it is obviously the top right hand corner of my nav layer, which is good!

Unsure why this setup expands the layer, whereas floating both layers did not...

 

[dbrb2]

Ah -got it!

There would be no point in expanding a floated layer to fill all available space, else why bother floating it!