Div's not displaying properly IE6

[mehstg1319]

Hi People

I have a page built around a central content pane. The problem I am
having is that in IE6, the left nav bar seems to push the corner
images across whereas they seem to sit ontop of eachother fine in
Firefox/Opera/Safari.

Any ideas

Also does anybody know how I can get the corners to move about in a
fluid layout. I can build it fine without the rounded corners using
percentages, but I cannot get the corners to move around as I have no
idea how to position them without using absolute.

The link to the site is as follows: www.fuzzcube.com/index.php
Cheers
Paul

[Ian Hobson]

mehstg1319 wrote:

Hi People

I have a page built around a central content pane. The problem I am
having is that in IE6, the left nav bar seems to push the corner
images across whereas they seem to sit ontop of eachother fine in
Firefox/Opera/Safari.

Any ideas

Also does anybody know how I can get the corners to move about in a
fluid layout. I can build it fine without the rounded corners using
percentages, but I cannot get the corners to move around as I have no
idea how to position them without using absolute.

Hi Paul,

I'm no expert, but I think you are doing this the hard way :)

If you give the css property "position: relative" to the container (or
body), then you can position the corner divs with "position: absolute;
top:0; left: 0" for the top left. Similar for top, right and the two
bottom corners.

I think you shouldl also give the corner divs height and width to match
the background images and remove all content. This way, IE will not
expand them to contain the nbsp, and destroy all your good work.

Regards

Ian

[mehstg1319]

On May 18, 11:00*am, Ian Hobson <[e-mail]:

mehstg1319 wrote:

Hi People

I have a page built around a central content pane. The problem I am
having is that in IE6, the left nav bar seems to push the corner
images across whereas they seem to sit ontop of eachother fine in
Firefox/Opera/Safari.

Any ideas

Also does anybody know how I can get the corners to move about in a
fluid layout. I can build it fine without the rounded corners using
percentages, but I cannot get the corners to move around as I have no
idea how to position them without using absolute.

Hi Paul,

I'm no expert, but I think you are doing this the hard way :)

If you give the css property "position: relative" to the container (or
body), then you can position the corner divs with "position: absolute;
top:0; left: 0" for the top left. Similar for top, right and the two
bottom corners.

I think you shouldl also give the corner divs height and width to match
* the background images and remove all content. This way, IE will not
expand them to contain the nbsp, and destroy all your good work.

Regards

Ian

Thanks very much Ian, has fixed it in IE6 as well! :)

Seems to have another problem now though is that the bottom corners
seem to have spacing under them in IE now.

[Ian Hobson]

mehstg1319 wrote:

On May 18, 11:00 am, Ian Hobson <[e-mail]:

>mehstg1319 wrote:

Thanks very much Ian, has fixed it in IE6 as well! :)

Seems to have another problem now though is that the bottom corners
seem to have spacing under them in IE now.

This is a bug in IE.

The solution I have used is to remove the content to the corner boxes -
I use ­, not ;nbsp;

Then get the CSS right for Firefox. Mine is

..boxed {
background-color: E9EAEC;
border: 3px solid #999999;
position: relative;
height: 11em;
padding: 7px 0 0 5px
}
..boxed .topleft {
background-image: url(corner-tl.gif);
top: -3px;
left: -3px;
height: 16px;
width: 16px;
position: absolute;
background-repeat: no-repeat;
}
..boxed .topright {
background-image: url(corner-tr.gif);
top: -3px;
right: -3px;
height: 16px;
width: 16px;
position: absolute;
background-repeat: no-repeat;
}
..boxed .bottomleft {
background-image: url(corner-bl.gif);
background-position: bottom;
bottom: -3px;
left: -3px;
height: 16px;
width: 16px;
position: absolute;
background-repeat: no-repeat;
}
..boxed .bottomright {
background-image: url(corner-br.gif);
background-position: bottom;
bottom: -3px;
right: -3px;
height: 16px;
width: 16px;
position: absolute;
background-repeat: no-repeat;
}

This gives me a 1px error at the bottom of the rounded corners in IE,
where you have 3 or 4px.

Then I correct this with a conditional comment (to appear just after the
<linkto the stylesheet.

<!--[if IE 6]>
<style type="text/css">
..boxed .bottomleft {
bottom: -4px;
}
..boxed .bottomright {
bottom: -4px;
}
</style>
<![endif]-->

That fixed it for me.

Hope you can use this information for your pages.

Regards

Ian

[Ian Hobson]

Hi Paul,

I also don't know if it is relevant, but I note that you have the
bottom corners third and forth in your enclosing div.

I placed mine last.

Regards

Ian

[mehstg1319]

On May 19, 10:50*am, Ian Hobson <[e-mail]:

Hi Paul,

I also don't know if it is relevant, but I note that you have the
bottom corners third and forth in your enclosing div.

I placed mine last.

Regards

Ian

Conditional commenting worked a treat. Thanks
Paul