Hiding empty div with CSS only without "display: none" 2

[Sleidia]

Hi guys


Here is my problem.
I have the following bit of CSS that is used on all the pages of my site:

#members-session-content .name {

display: block;
color: #D81407;
padding-right: 0.5em;
font-weight: bold;
background-color: #ffffff;
width: 100%;
text-align: center;

}

This div is the container of the username displayed when the user has signed in.
The problem is that I can't change the CSS depending on whether the user is logged in or not.
So, I need to have a unique CSS that works on both cases.

But, when the user isn't logged ( when the div has no content), the white rectangle remains.

My question is : how could I edit the unique CSS so that, the white background doesn't show when the div
has no content? Is this possible?

Thanks

 

[Sleidia]

Update : the white background is visible only on IE7, not on Firefox/Opera/Safari. Why???

 

[Vragabond]

Probably other browsers do not render the element when it is empty -- IE however likes to keep some space for potential text, even when there is none. Usually setting the font size to 0 helps with the gap, but if you expect it to have content, you cannot use it.

I would make sure that there is absolutely nothing within the div (no whitespace or whatever) and then play with some css properties (putting a border around ti sometimes does the trick).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[traingamer]

I'm assuming that you're doing the content with server-side code. Just assign a different class the same way.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Sleidia]

Vragabond: OK, I'll try the border thing.

Traingamer: you're assuming right but I can't add CSS classes on the fly because the HTML is on a separate level. HTML, content, CSS, and PHP are perfectly separated on my CMS.

 

[Sleidia]

OK, problem solved
I only had to remove "width: 100%;