[web] Cross Browser Issues with DIV's and Tables
Author
Hello, when I first started to make my website, I was only testing on IE. Everything went fine, until I found out that my website did not run on my friend's Opera. Ashamed of myself, I was looking for a solution to make my website cross browser. About researching for a full day, I found the solution. But out of curiosity, I wanted to test my source on Firefox because it seemed as if more people used Firefox than Opera anyway. When I tested it on my newly installed Firefox, my source failed me. I have researched for days to tackle down this problem but failed to do so. I turn to my last resort Webdevloper.com that has always helped find solutions when I was in need.
Okay, so here's the source code.
<style>
.hiddenLayerMain { position: absolute; visibility: hidden; background-color:white; width:100%; height:445px; overflow:auto; }
.maintd td { BORDER-BOTTOM: #C6C3C6 1px solid; BORDER-LEFT: #C6C3C6 1px solid; BACKGROUND-COLOR: #FFFFFF; HEIGHT:23px }
td.maintitletd { BORDER-BOTTOM: #8C8A63 1px solid; BORDER-LEFT: #8C8A63 1px solid; BORDER-TOP: #8C8A63 1px solid; BACKGROUND-COLOR: #DEDFDE; HEIGHT:26px }
td.maintitlerighttd { BORDER-BOTTOM: #8C8A63 1px solid; BORDER-LEFT: #8C8A63 1px solid; BORDER-RIGHT: #8C8A63 1px solid; BORDER-TOP: #8C8A63 1px solid; BACKGROUND-COLOR: #DEDFDE; HEIGHT:26px }
.noBorder td{ BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; }
</style>
<table width=100%>
<tr>
<td width=33%> </td>
<td width=67%>
<DIV ID='UserInformation' class="hiddenLayerMain">
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLSPACING="0" CLASS="maintd">
<TR>
<TD WIDTH=100 CLASS="maintitletd" NOWRAP>
Attributes
</TD>
<TD WIDTH=100 CLASS="maintitletd" NOWRAP>
Values
</TD>
<TD WIDTH=100% CLASS="maintitlerighttd">
Description
</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
and here's the rules.
1) Must be cross browser.
2) hiddenLayerMain must be positioned as absolute.
3) hiddenLayerMain must have overflow set to auto ( at least for the Y axis )
4) hiddenLayerMain's width must be 100%.
The above setting works fine with Opera and IE, but on modzilla, when the position is set to abosolute and the width is set to 100% at the same time, the width is automatically the width of the whole horizontal monitor pixel resolution. Since my monitor is 1280x1024, the width is 1280px.
Please, any kind of input will be much appreciated.
Quote:Original post by david6327
The above setting works fine with Opera and IE, but on modzilla, when the position is set to abosolute and the width is set to 100% at the same time, the width is automatically the width of the whole horizontal monitor pixel resolution. Since my monitor is 1280x1024, the width is 1280px.
Apologies if I'm mistaken, I don't currently have the time to look through that carefully or actually test in a browser, but shouldn't that be the expected behavior?
You've got an absolutely positioned div, with a width of 100% - so that'll give you a div the entire width of the browser client area. You then have a table inside that set to a width of 100% - so it's width should be the entire width of the parent element - or the entire width of the browser client area in this case. ?
Author
Thanks!
Inspired by your reply and some pondering.
I was able to give the same results on Firefox, but with a different source code.
Inspired by your reply and some pondering.
<style> .hiddenLayerMain { position: absolute; background-color:white; width:66%; height:445px; overflow:auto; } .maintd td { BORDER-BOTTOM: #C6C3C6 1px solid; BORDER-LEFT: #C6C3C6 1px solid; BACKGROUND-COLOR: #FFFFFF; HEIGHT:23px } td.maintitletd { BORDER-BOTTOM: #8C8A63 1px solid; BORDER-LEFT: #8C8A63 1px solid; BORDER-TOP: #8C8A63 1px solid; BACKGROUND-COLOR: #DEDFDE; HEIGHT:26px } td.maintitlerighttd { BORDER-BOTTOM: #8C8A63 1px solid; BORDER-LEFT: #8C8A63 1px solid; BORDER-RIGHT: #8C8A63 1px solid; BORDER-TOP: #8C8A63 1px solid; BACKGROUND-COLOR: #DEDFDE; HEIGHT:26px } .noBorder td{ BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; }</style><table width=100%> <tr> <td width=33%> </td> <td width=67%> <DIV ID='UserInformation' class="hiddenLayerMain"><TABLE BORDER="0" WIDTH="99%" CELLSPACING="0" CELLSPACING="0" CLASS="maintd"> <TR> <TD WIDTH=100 CLASS="maintitletd" NOWRAP> Attributes </TD> <TD WIDTH=100 CLASS="maintitletd" NOWRAP> Values </TD> <TD WIDTH=100% CLASS="maintitlerighttd"> Description </TD> </TR></TABLE> </div> </td> </tr></table>I was able to give the same results on Firefox, but with a different source code.
Author
I just realized that in the original source code....
the most outer table is 100%.
Then the left that is 33% in the example is actually set to 185pixels.
So the right td, that is set to 67% on my example should be (100%-185px)=answer in %.
Thus, the newly written source code does not work properly because I am mixing %'s and px's inappropriately.
"Only if there is a way to set the width of the DIV into the width of the parent TD."
the most outer table is 100%.
Then the left that is 33% in the example is actually set to 185pixels.
So the right td, that is set to 67% on my example should be (100%-185px)=answer in %.
Thus, the newly written source code does not work properly because I am mixing %'s and px's inappropriately.
"Only if there is a way to set the width of the DIV into the width of the parent TD."
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
