SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: tables in divs
-
Mar 19, 2002, 19:24 #1
- Join Date
- Mar 2002
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
tables in divs
G'day all,
This one mainly seems to be a problem on Macs vs PCs. I've been using OS X / IE 5 to develop.
To outline, the page is as follows.
There is a horizontal div across the full width of the top of the screen. Under this is another div, floating left with nav stuff in it.
The juicy stuff is in a div which is to the right of the nav stuff; this is where the problems are cropping up. This div contains a table with a width of 98%.
On Mac IE 5 and NS6, the table expands to fill this div (viz, the full horizontal space minus that occupied by the lh nav stuff) and behaves properly when the browser window is resized.
The problem arises when looking at this with IE on a PC as the table width setting appears to set itself to 98% of the screen width, thus wrapping itself to clear the nav bar, and appearing under it.
I've tried using absolute positioning on this div instead of relying on the floating left one ... which still looks fine on the Mac but gives me a squished table on the PC.
Any pointers here guys? They would be much appreciated. Let me know if I should post some code. Cheers.
-
Mar 19, 2002, 19:39 #2
- Join Date
- Oct 2001
- Location
- Tucson, Arizona
- Posts
- 1,858
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Always post code.
-
Mar 19, 2002, 19:55 #3
- Join Date
- Mar 2002
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
np ... thanks.
Here's the extl stylesheet, which is linked to:
Code:BODY { font-family : Verdana, Arial, sans-serif; font-size: 9pt; color : #ffffff; background-color : #000033; padding : 0px; margin : 0px; } P { font-family : Verdana, Arial, sans-serif; font-size: 9pt; color : #ffffff; background-color : #000033; } TABLE { font-family : Verdana, Arial, sans-serif; font-size: 9pt; color : #ffffff; background-color : #000033; padding : 0px; margin : 0px; empty-cells: show; border: solid #444466 1px; } TABLE.presentation { border-spacing: 5px; border: 0px; margin: 1px; padding: 2px; width: 98%; } TR { font-family : Verdana, Arial, sans-serif; font-size: 9pt; color : #ffffff; background-color : #000033; } TD { font-family : Verdana, Arial, sans-serif; font-size: 9pt; color : #ffffff; border-width: 0px; padding : 0px; margin : 0px; } TD.presentation { border: solid #444466 1px; margin: 1px; padding: 3px 5px 3px 5px; spacing: 2px; } H3 { font-size: 120%; } A { border: 0px; margin: 0px; } IMG { border: 0px; } A:visited { color : #aaaaff; text-decoration : none; border: 0px; margin: 0px; } A:link { color : #ccccff; text-decoration : none; border: 0px; margin: 0px; } A:hover { color : #ffffff; text-decoration : none; border: 0px; margin: 0px; } A:active { color : #ffffff; border: 0px; margin: 0px; } .content { position: absolute; left: 140px; top: 165px; right: 6px; bottom: 6px; margin: 0px 15px 0px 15px; border: 0px; padding: 0px 15px 0px 15px; } .box { padding: 3px; } .layout { color : #ffffff; padding : 0px; margin : 0px; border : 0px; } .colhead { font-family : Verdana, Arial, sans-serif; font-size: 9pt; color : #ffffff; font-weight: bold; background-color : #000018; border: solid #444466 1px; margin: 1px; padding: 3px 5px 3px 5px; spacing: 2px; } .datetime { font-size: smaller; font-style: italic; } .datetime-border { border: solid #444466 1px; margin: 1px; padding: 3px 5px 3px 5px; spacing: 2px; font-size: smaller; font-style: italic; } .larger { font-size: 160%; }
Code:<html> <head> <title>Title</title> <LINK rel="stylesheet" type="text/css" href="/css/om-base-style.css" title="base" media="screen"> </head> <body> <!-- top bar: logos & graphics --> <div style="position: relative; margin: 0px; width: 100%;"> <table class="layout" border=0 cellspacing=0 cellpadding=0 width=100%> <tr valign="top"> <td rowspan="2" width="155" height="150" align="right" valign="middle"><div style="width: 154px; padding: 3px; border: solid #444466 1px;"><a href=/menu.php><img src="/gfx/hdr/hdr_icon.jpg" width="146" height="141"></a></div></td> <td rowspan="2" width="*"> </td> <td width="329" height="89"><img src="/gfx/hdr/hdr_top_space.gif" width="364" height="89"></td> <td width="94"><img src="/gfx/hdr/hdr_home.gif" width="143" height="89" alt="Homepage"></td> </tr> <tr valign="top"> <td class="layout" colspan=2><img src="/gfx/hdr/hdr_title_links.gif" width="506" height="61" alt="hdr_title_links.gif"></td> </tr> </table> </div><!-- end top bar --> <br> <!-- navigation buttons stacked vertically on left --> <div style="float: left; width: 125px; height: 100%; margin: 0px 30px 0px 15px;"> <table class="layout"> <tr><td onMouseOver="this.bgColor='#000055'" onMouseOut="this.bgColor='#000033'"><a href="/links/"><img src="/gfx/nav/nav_links.gif" width="122" height="18"></a></td></tr> <tr><td onMouseOver="this.bgColor='#000055'" onMouseOut="this.bgColor='#000033'"><a href="/chat/"><img src="/gfx/nav/nav_chat.gif" width="122" height="18"></a></td></tr> <tr><td> </td></tr> <tr><td><div align="center"> <table width=83 class=layout> <tr> <td onMouseOver="this.bgColor='#000055'" onMouseOut="this.bgColor='#000033'"><a href="/logout.php"><img src="/gfx/nav/nav_logout.gif" width="83" height="18"></a></td> </tr> </table></div> </td></tr> </table> </div><!-- end nav buttons --> <!-- main body of document --> <div class=content> <table class=presentation> <tr valign=top> <td class=colhead><a href="http://www.doesntexist.com" target="_new">www.doesntexist.com</a></td> <td class=presentation> </td> </tr> <tr valign=top> <td colspan=2 class=presentation>kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs kebabs</td> </tr> <tr valign=top> <td colspan=2><div style="height: 6px; width: 1px;"></div></td> </tr> <tr valign=top> <td class=colhead><a href="http://www.google.com" target="_new">www.google.com</a></td> <td class=presentation> </td> </tr> <tr valign=top> <td colspan=2 class=presentation>Search engine!</td> </tr> <tr valign=top> <td colspan=2><div style="height: 6px; width: 1px;"></div></td> </tr> <tr valign=top> <td class=colhead><a href="http://theicedream.i7.com.au" target="_new">theicedream.i7.com.au</a></td> <td class=presentation> </td> </tr> <tr valign=top> <td colspan=2 class=presentation>Roy and H.G. at SLC 2002</td> </tr> <tr valign=top> <td colspan=2><div style="height: 6px; width: 1px;"></div></td> </tr> <tr valign=top> <td class=colhead><a href="http://www.nasa.gov" target="_new">www.nasa.gov</a></td> <td class=presentation> </td> </tr> <tr valign=top> <td colspan=2 class=presentation>NASA = National Aeronautical and Space Administration <br /> </td> </tr> <tr valign=top> <td colspan=2><div style="height: 6px; width: 1px;"></div></td> </tr> <tr valign=top> <td class=colhead><a href="http://alienmasters.com" target="_new">alienmasters.com</a></td> <td class=presentation> </td> </tr> <tr valign=top> <td colspan=2 class=presentation>A domain name which was unregistered last time I checked</td> </tr> <tr valign=top> <td colspan=2><div style="height: 6px; width: 1px;"></div></td> </tr> <tr valign=top> <td colspan=2><div style="height: 6px; width: 1px;"></div></td> </tr> <tr valign=top> <td class=colhead><a href="http://www.theonion.com" target="_new">www.theonion.com</a></td> <td class=presentation> </td> </tr> <tr valign=top> <td colspan=2 class=presentation>The Onion is a vitriolic satire of American journalism.</td> </tr> <tr valign=top> <td colspan=2><div style="height: 6px; width: 1px;"></div></td> </tr> </table> </div> <!-- end main body of document --> </body> </html>
-
Mar 19, 2002, 20:41 #4
- Join Date
- Mar 2002
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This oversimplified code snippet probably illustrates the basic problem more clearly than the above.
Code:<html> <head> </head> <body> <div style="width: 100%; background-color: #ff0000;">top bit</div> <div style="background-color: #00ff00; float: left;">left nav</div> <div style="background-color: #0000ff;"><table width=100% border=1><tr><td>This is the table</td></tr></table></div> </body> </html>
Fixing the table width would be awkward between 800 and 1024 rez. I would rather use CSS here than container tables for the nav and content, although I guess that would work as a last resort.
CheersLast edited by hemi770; Mar 19, 2002 at 20:56.
Bookmarks