Problem with <DIV>

[amonadi]

i have small issue with the DIV tag i have the below HTML

<td height=100% rowspan="2" valign="top" background="images/blackfadeWhite.gif">
<div style="padding:0px; WIDTH:180px; height:100%; OVERFLOW:hidden; ">
<div style="BORDER-RIGHT:#ff0000 2px solid; WIDTH:178px; height:100%; COLOR:#ffffff; ">
<div id="HideMenu"><a href="javascript:toggleSlideMenu('HideMenu', 'cpnl')">Hide Menu</a></div>
<br />
<div align="center" id="contentLYR"></div>
</div>
</div>
</td>

when i view the page in firefox the <div>s will streach to 100% but when i use IE they do not. I can not figure out how to fix this(i do want them to increase to 100%).

Can you please tell me if there is a way of fixing this.

Thanks

[amonadi]

:confused: so does any one use div? or is it just me?

[jscheuer1]

I pasted your code into a blank page and both browsers made it look the same. When I click your link I get:

Error: toggleSlideMenu is not defined
Source File: javascript:toggleSlideMenu('HideMenu', 'cpnl')
Line: 1

So, I really don't see how I or anyone could know what you are talking about.

.

[Twey]

Umm... the fact that you have "width:180px;" applied to one of the outer divs probably doesn't help.

[amonadi]

woops, i should have posted the site earlier. (ali-baba.homeunix.org)
It will probably ask for a password just press cancel I haven't figured out why it does that. some IIS previledge setting i guess.

The problem is with the menu at the side. Right now i put a REDborder around the DIV so the problem is easily noticed. I'm loading the contents of DIV using a XMLHttpRequest. I wouldn't think it would have anything to do with the problem but if you need to see the function: ali-baba.homeunix.org/ajax.js [function ajaxManager()]


When using Firefox the border goes to the bottom(100%) but in IE it only wraps the content of div.

[Twey]

IIS on homeunix.org? Oh the irony :p I don't have IE available to test it, but Opera shows the bug you describe. However, all the elements that DIV is inside seem to have their height set to 100%. Hmm...

[amonadi]

is there a problem with having 100% ?

[jscheuer1]

is there a problem with having 100% ?

I think Twey meant (I could be wrong, mind reader I'm not) that he was surprised that with everything set to 100%, that it wasn't displaying that way. I, on the other hand am deeply distrustful of height 100%. I always wonder, 100% of what? So do many browsers. Add to that the fact that content often drives display height in the absence of anything more concrete for the browser to hang its hat on and it begins to make some sense the way that IE is displaying things.

I'll take a break here and mention that without that red border, the two renderings of the page would be so similar looking, that I wouldn't worry about how each browser arrived at them.

Break time over. Twey actually missed a few content elements when he declared that 'everything' was set to 100%. Beginning at least with the div with the id 'HideMenu' and continuing on from that point, there are a number of block level elements (mostly, if not all div's) with no height set (another is the div with the id 'contentLYR'). Their dimensions will be content driven and may impact the display of any containing element set to the ambiguous height=100% or height:100%.

I'd try setting all of those to height 100%, just to see if that would 'get it'.

A side note to Twey (friendly ribbing):

You still haven't gotten a copy of IE for testing!?!? :) How about at least getting the ieTab extension for FF, or won't that work on your system? NS8 has good built in IE emulation as well.

[amonadi]

hmmmn. I always thought 100% means stretch to take up the whole browser screen (that is if smaller).

The id= hidemenu Div has its height and width values at at the top of the html and i would like it to be a tiny box at the top corner as is. I did however set the height of id=contentLYR div to 100% and still to no effect!

www.google.com/ig (google portal) does almost the exact samething with the hide/view menu(you have to be logged on to see). i pretty much have the exact same html but thiers stretches the div to 100% (the blue border-right) i cant figure out why thiers works but not mine :confused:

[jscheuer1]

There were more than just the two divisions I mentioned. It would be up to you to go through your code and find them all.

More about 100%:

100% width means what you think it does, in most cases. However, 100% height does not. The height of a page is not set by the window height the way the width usually is. It usually can and will expand to accommodate content. Because of this, many HTML parsers have no idea what height 100% means unless you have a container that has a fixed height (like 700px) around your element that has a height of 100%. I forget now but perhaps (if you haven't got it this way already), setting the body height to 100% will do. Setting the body height to something like 700px will either solve the problem or make it clear that something fairly odd is up with your markup. This last suggestion is for testing purposes only, as a fixed height body can cause unexpected results in viewports (windows) of varying sizes.

[Twey]

Mind reader you may not be, but you did a good enough job of telepathy there :p

Checked out IETab...
Requires: Firefox: 1.0 - 1.6a1 Firefox on Windows :(
I did have a go at getting IE to work with WINE, but it wasn't having any of it. Opera usually manages to do a pretty good job of showing all IE's errors.
/EDIT: Netscape is no longer multi-platform! Aaaah! The world is ending! I got 7.2. It doesn't have IE emulation - apparently it actually does use IE (http://www.flexbeta.net/main/comments.php?catid=1&shownews=13318) to render pages in "IE emulation mode."

I might install a copy of Windows on qemu, just for this purpose.

[ftriantos]

You have to set the height for the table data cell that this div is contained in manually, because it cannot be 100% and make sense. A table can have a height of 100%, but I am not sure that a table data cell can. At any rate, your div will fill 100% of the available space, which in this case is the <td></td> I saved a local copy of your file and had success by changing the height of the td from 100 percent to 100....it made your div 100. I did notice that the table seems to have a 100% height, but this is conflicting with the td height assignment I believe.

...anyway, I am pretty sure the problem is with the table and not the div. My test worked in both browsers....and interestingly neither one let the table stretch to 100% height...only the height of the one td that I manually set.

<td height="100" rowspan="2" valign="top" background="blackfadeWhite.gif">