SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: tables in divs

  1. Mar 19, 2002, 19:24 #1
    hemi770
    hemi770 is offline
    SitePoint Member
    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.
  2. Mar 19, 2002, 19:39 #2
    mattjacob
    mattjacob is offline
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Always post code.
  3. Mar 19, 2002, 19:55 #3
    hemi770
    hemi770 is offline
    SitePoint Member
    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%;
}
    And here is a typical sample of client side code (source is largely PHP):

    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="*">&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>
    Cheers.
  4. Mar 19, 2002, 20:41 #4
    hemi770
    hemi770 is offline
    SitePoint Member
    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>
    Any help getting the table to gracefully fill the div that holds it, without breaking out or being wrapped, would be appreciated.

    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.

    Cheers
    Last edited by hemi770; Mar 19, 2002 at 20:56.

« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules