Cross-Browser Issue - Empty Div Displayed in IE7 but not in FF3

BACKGROUND:
I have 2 divs, div id="left" and div id="contentmain" contained inside div id="content".

For troubleshooting, div id="left" is green.  div id="contentmain" contains the text.  The main outer div id="content" is white.

These divs are used on different html pages which are created dynamically.  On some pages, div id="left" contains a menu while on other pages there is no content in div id="left".  An example of the html generated when div id="left" is empty is :

<div id="content">
   <div id="left"></div>
   <div id="contentmain"><h1>Examples - lightbox script to go here</h1></div>
   <div class="clear"></div>
</div>

When there is content in div id="left" both FF3 and IE7 display identically.  The problem occurs when there is no content in div id="left".

PROBLEM:

FF3 collapses an empty div id="left" ... this is what I want.
IE7 displays an empty div id="left" ... this is NOT what I want.

How to modify the CSS to cause IE7 to collapse div id="left" when it's empty but keep it displaying identically in both FF3 and IE7 when there is content in div id="left"?

#content {
	padding: 10px;
	width: 730px;
	background-color: #FFFFFF;
	height: 300px;
}
 
#left {
	float: left;
	margin-right: 10px;
	padding-right: 5px;
	padding-left: 5px;
	width: 120px;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
	background-color: #00FF00;/*  troubleshooting background*/
}
 
#contentmain {
	float: left;
	position: relative;
	width: 588px;
	margin: 0;
}

Open in new window

How-FF3-Displays-Empty-Left-Div.jpg
How-IE7-Displays-Empty-Left-Div.jpg
qengAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

amar31282Commented:
have you checked by setting height:auto in contentmain
0
amar31282Commented:
Ah sorry for wrong reply
0
amar31282Commented:
If you want that the div should collapse automatically in then you will have to assign widht:auto in left id and not the width:120px;

The IE is behaving as expected.

in mozilla it does'n show div when there is noting in it but if you will put one blank space there i.e. "&nbsp;" then you will see that mozilla is also expanding.

so you have to set the width to auto in such cases

Regards,
Amarjit
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

qengAuthor Commented:
amar31282,
Thanks for your reply but I doesn't seem to help my issue nor do what I think you're expecting.
In my case, setting width:  auto for the div id="left" doesn't work because on those pages where I do have content for that div, div id="left" then naturally expands out to the full width of the parent container which causes div id="contentmain" to float below div id="left".  Remember that the pages are generated dynamically, I don't know ahead of time what the content will be for the page.  It depends on the user's input.
More importantly, setting width:  auto for the div id="left"  also doesn't remove the div in IE7, it only collapses it further but not completely.  See attached screen grab.

How-IE7-Displays-Empty-Left-Div-.jpg
0
amar31282Commented:
it is not closing fully because you have given padding and border in it check this code
<html>
<head>
<style>
#content {
        padding: 10px;
        width: 730px;
        background-color: #000000;
        height: 300px;
 
}
 
#left {
        float: left;
        margin-right: 10px;
        padding-right: 0px;
        padding-left: 0px;
        width: auto;
        border-right-width: 0px;
        border-right-style: solid;
        border-right-color: #CCCCCC;
        background-color: #00FF00;/*  troubleshooting background*/
}
 
#contentmain {
        float: left;
        position: relative;
        width: 588px;
        margin: 0;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
</div>
<div id="contentmain">
</div>
</div>
</body>
</html>

Open in new window

0
qwerty021600Commented:
Specify height to both the DIV's either in pixel or in percentage. It'll work like this

<style>
#content {
        padding: 10px;
        width: 730px;
        background-color: #ff0000;
        height: 300px;
}
 
#left {
        float: left;
        margin-right: 10px;
        padding-right: 5px;
        padding-left: 5px;
        width: 120px;
            height: 100%;
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: #CCCCCC;
        background-color: #00FF00;/*  troubleshooting background*/
}
 
#contentmain {
        float: left;
        position: relative;
        width: 588px;
        margin: 0;
                  height: 50%;
            background-color: #000000;
}
</style>
0
David S.Commented:
Why not leave the <div> out normally and only add it in when there is content for it?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
qengAuthor Commented:
Amar,
Thx for the links, I'll review them.
As I mentioned in the post prior to your last comment, width: auto for the div id="left" doesn't work for me because I do not control what the user puts in div 'left'.  
To illustrate (even though this is not exactly what I'm doing the concept is the same):
Think of div id= "contentmain" as an area into which someone can upload a picture and div id='left' as a sidebar into which they can optionally type a description.  
If the user uploads only a picture with no description in the left sidebar (in other words, div id="left" is empty then), I would have wanted div id="contentmain" to expand the full width of the parent div.  On the other hand, if the user uploads a picture and enters a description, I would have wanted div id="left" to expand out only a certain width (in my case 120px looks about right) and div id="contentmain" to expand to take up the rest of the width of the parent container".
So, I DON'T WANT div id="left" to display at all when it has no content.
Again, keep in mind that I don't control what goes into those divs, the user does.  So I don't know ahead of time if they will put just (in my example) a photo or a photo plus a description.
I essentially had it doing what I wanted but only in FF3, not in IE7.  
I was hoping to find a hack to cause IE7 to behave the same way as FF3 and avoid having to solve this issue with php to prevent the publishing of an empty div but as Kravimir is suggesting the later might be the simplest way around it.  It's just a bit more coding.
Qwerty:
Your suggestion helps to get both FF3 and IE7 displaying the same (which is half the battle) but it's doing the opposite of what I'm after.  It's ensuring that an empty div id="left" gets displayed in both browsers.  I wanted an emtpy div id="left" NOT TO DISPLAY in EITHER brower.
Kravimir:
The reason I didn't leave the div out altogether is I don't have control over when those divs appears.  In the website I'm developing, if the user enables a certain php module, that module dynamically writes the code which produces those divs (I just simplified the example to post on EE).  One that code is written, a user can then optionally upload material wich could go into one of the divs, either of the divs, or both of the divs.
Many different modules could generate code to go into those div locations so I would have to find each module that can generate html code for those divs and put in a conditional php statement to prevent the div to be published if it's empty.
It's not impossible to do, just tedious.  I do have access to the php code but there is quite a bit of interaction between sections of the site (the site itself has over 3,000 files).
In contrast, all of the modules use (can use if I want) the same CSS code for those divs so, if I'd been able to control the display through the CSS, it would have been a lot simpler and perhaps reliable.
I'm assuming that's what you meant.  On a static site, you're right, this would be trivial, just don't use the div but as I explain above, it's not that simple in this case.  
Please straighten me out if I misunderstood your intent.
------------------------
Thx all.
 
 
0
David S.Commented:
3000 files? Wow. That's a large CMS.

IE doesn't support the :empty pseudo-class from CSS3, which is the CSS-only way to do this.
0
qengAuthor Commented:
Thanks Kravimir.  I can code (with a bit of fiddling) the modules to collapse.  Just means a bit more proofing to make sure I didn't miss any.
The file count is the Dreamweaver file count.  Includes content so it's not all that bad but still a big, multi-layered site.
0
qengAuthor Commented:
Thanks for the input folks.  Back to the php coding room.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.