padding sets to 0 in Netscape 7.1 but not in IE

[lawrence]

I'm not sure if this is a style sheet issue or a Javascript issue.

I'm trying to work out a new design for my software's control panel.
The idea is that there are images on the left that you click and that
as you do, DIVs with option links appear and disappear on the right.
Because I want each of the DIVS to appear in the same place, I use
Javascript to set their padding and their height to 0px when they are
invisible. This is working the way I wish in Netscape 7.1 but it is
not working the way I want in IE. Can anyone give me a hint about why?
Go here:

http://publicdomainsoftware.org/desi...ntrolPanel.php
You'll need a username and password to get in, please use these
values:

username: designer
password: designer123

[mscir]

lawrence wrote:

I'm not sure if this is a style sheet issue or a Javascript issue.

I'm trying to work out a new design for my software's control panel.
The idea is that there are images on the left that you click and that
as you do, DIVs with option links appear and disappear on the right.
Because I want each of the DIVS to appear in the same place, I use
Javascript to set their padding and their height to 0px when they are
invisible. This is working the way I wish in Netscape 7.1 but it is
not working the way I want in IE. Can anyone give me a hint about why?

Did you try not setting the height to 0, and using absolute positioning?
That works in my ie6, netscape7.2, firefox 0.9.

[Fred Oz]

mscir wrote:

Did you try not setting the height to 0, and using absolute positioning?
That works in my ie6, netscape7.2, firefox 0.9.

He can also try using display: none/'' instead of visibility:
hidden/visible.

When elements are not displayed (display: none) they take up zero space
in the page. Using absolute position 0 inside another relatively
positioned div also locks their position.

Cheers, Fred.

[lawrence]

mscir <ms***@access4less.net> wrote in message news:<10*************@corp.supernews.com>...

lawrence wrote:

I'm not sure if this is a style sheet issue or a Javascript issue.

I'm trying to work out a new design for my software's control panel.
The idea is that there are images on the left that you click and that
as you do, DIVs with option links appear and disappear on the right.
Because I want each of the DIVS to appear in the same place, I use
Javascript to set their padding and their height to 0px when they are
invisible. This is working the way I wish in Netscape 7.1 but it is
not working the way I want in IE. Can anyone give me a hint about why?

Did you try not setting the height to 0, and using absolute positioning?
That works in my ie6, netscape7.2, firefox 0.9.

Yes, absolute positioning would work, but it's inflexible. When we
asked our users what they liked and hated about early versions of the
software, one complaint was that everything was stuck on the left side
of the screen. So we decided to center the controls. We keep the width
to under 800 pixels because 50% of internet users have computers that
won't go beyond 800 pixels. But we've centered it and now it floats in
the center. Absolute positioning would take us back to our original
design.

[lawrence]

Fred Oz <oz****@iinet.net.au> wrote in message news:<41***********************@per-qv1-newsreader-01.iinet.net.au>...

mscir wrote:

Did you try not setting the height to 0, and using absolute positioning?
That works in my ie6, netscape7.2, firefox 0.9.

He can also try using display: none/'' instead of visibility:
hidden/visible.

When elements are not displayed (display: none) they take up zero space
in the page. Using absolute position 0 inside another relatively
positioned div also locks their position.

Hot tip! And this will work for both IE and Netscape and FireFox, and
all the others?

[Michael Winter]

On 1 Oct 2004 00:47:19 -0700, lawrence <lk******@geocities.com> wrote:

[snip]

Hot tip! And this [using the display property] will work for both IE and
Netscape and FireFox, and all the others?

All browsers that support CSS 1 and setting the display property, yes.
That excludes NN4[1] (if you care).

Mike
[1] NN4 uses the visibility property, but in a non-standard way. It would
also require layers or absolutely positioned DIVs.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[lawrence]

mscir <ms***@access4less.net> wrote in message news:<10*************@corp.supernews.com>...

lawrence wrote:

I'm not sure if this is a style sheet issue or a Javascript issue.

I'm trying to work out a new design for my software's control panel.
The idea is that there are images on the left that you click and that
as you do, DIVs with option links appear and disappear on the right.
Because I want each of the DIVS to appear in the same place, I use
Javascript to set their padding and their height to 0px when they are
invisible. This is working the way I wish in Netscape 7.1 but it is
not working the way I want in IE. Can anyone give me a hint about why?

Did you try not setting the height to 0, and using absolute positioning?
That works in my ie6, netscape7.2, firefox 0.9.

For various reasons I can't use absolute positioning. I need to keep
the design flexible. I need to find a way to make the design work in
IE with normal flow.

[mscir]

lawrence wrote:
<snip?

For various reasons I can't use absolute positioning. I need to keep
the design flexible. I need to find a way to make the design work in
IE with normal flow.

How about this approach, works on my IE 6, Netscape 7.2:

1. create a new div, insert it immediately after the "options div" and
before the unnamed no-id'd div.

</div> <!-- options -->
<div id="content_div"></div>
<div style="width:475px; float:right;"> <!-- un-named no-id'd div -->

2. content_div css:

#content_div {
background-color: #ffffff;
float: right;
padding: 0px;
width: 475px;
position: relative;
margin-left: 50px; /* adjust horiz position */
margin-top: 50px; /* adjust vert position */
visibility: hidden;
}

3. use this function to copy the content you want into it and make it
visible:

function makeVisible(nameOfDiv) {
var targetdiv=document.getElementById('content_div');
var divname=document.getElementById(nameOfDiv);
targetdiv.innerHTML=divname.innerHTML;
targetdiv.style.visibility='visible';
}
</script>

4. related div css:

#weblogs,#entries,#newsletters,
#images,#files,#comments,#links,#members,#design,# settings,#categories,#other
{
position: relative;
visibility: hidden;
background-color: #ffffff;
padding: 8px;
width: 475px;
}

Will that work for you?
Mike