Overlapping borders

[neilorourke]

Hi

The left menu box on most of my pages is overlapping the border of the containing box. I have set the height of the containing box to 'auto assuming that this box would grow to accomodate nested blocks.

An example in IE can be seen at http://www.galleries-online.co.uk/teacban/artistgallery.cfm?artistid=1 with the box with the title 'Tom O'Rourke'.

This will look fine in firefox as I specified a fixed height. I tried using height: auto in the CSS for firefox but found that this did not appear to affect the layout which meant that I had to set a fixed height.

Basically I need to set the CSS for both platforms so that the main content box automatically expands with the height of the nested.

Cheers for any help

Neil

 

[DylanButler]

This is an IE rendering bug since it doesn't know to stretch the box based simply off an images height. I'd try placing some markup (<br class="clear">) right above the end of the container div [the white content area]). If you want a more dynamic height though, I'd recommend a combination of the tan hack with a min-height for firefox (allowing it to stretch). IE treats height the same way FF treats min-height, so you'd have something like this:

#main { min-height:600px; } // Min-height for "smarter" browsers.
* html #main { height:600px; } // Min-height for IE6 and under.

This box will never be shorter than 600px but will stretch as needed.

By the way you also forgot to specify a unit for your height in your CSS.

div#main {
	position: relative;
	top: 30px;
	left: 15px;
	width: 770px;
	height:[B][COLOR=Red] 600;[/COLOR][/B]
	border: 1px solid #A4A4A4;
	background-color: #ffffff;

 

[neilorourke]

Hi

Thanks for the comprehensive response. I'll give these ideas a go tonight and let you know how I get on.

Cheers

Neil

 

[neilorourke]

Hi

I tried the suggestion but am still having problems with overlapping content.

For http://www.galleries-online.co.uk/teacban/artistimage.cfm?artistid=1&imageid=2

The following happens:

1. In IE the footer falls off the bottom of the page

2. In Firefox the over sized content pushes through the bottom of the containing Div and pushes the content of the Div below further down.

Also I'm not really clear on what <br class="clear" /> is used for.

Cheers

Neil
Neil

 

[DylanButler]

You have really went nuts with the divs here

Do you think you really need to be feeding two different stylesheets depending on whether the browser is netscape or IE?

You can always target ONLY IE by using * html before any tag in the CSS.

So,

div#copyright {
position: relative;
... }

Becomes

* html div#copyright {
position: relative;
... }

/* the above code will only target IE6 and below */

There's some weird behavior going on and when I try to download your files to work locally it gets even worse. I think you should really take a step back and almost start from scratch. Now that you have a concise idea of what your styles should be, you'll be able to build it much more solid (and it shouldn't take more than a couple hours).

The <br class="clear" /> should go together with this in your CSS:

.clear { clear:both; }

What this does is it will fix the issue you are seeing in firefox with the content overlay. You put this below the div thats overlapping, but inside the div thats being overlapped. OR you can just strip the height propery from the div thats being overlapped because that could be causing it as well.

Hope this helps