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/te...cfm?artistid=1 with the box with the title 'Tom O'Rourke'.
????: NamePros.com http://www.namepros.com/programming/292873-overlapping-borders.html

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:

This box will never be shorter than 600px but will stretch as needed.
????: NamePros.com http://www.namepros.com/showthread.php?t=292873

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

__________________
-Dylan Butler

EXAMP - San Diego Web Design

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/te...id=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
????: NamePros.com http://www.namepros.com/showthread.php?t=292873

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

__________________
-Dylan Butler

EXAMP - San Diego Web Design