|
CSS - Css Nested Tables Overflows Width In Ie6 But Works In 7 And Ff?
hi everyone,
My css code: table.test{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: 1px solid silver; border-collapse: collapse; padding: 3px; } table.aside{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: none; padding: 3px; } th.aside, tr.aside, td.aside{ font-family: Arial, sans-serif; font-size: 11px; CURSOR: default; border: none; padding: 3px; } my nested tables, which overflows the width of the screen in ie 6 , but works on ie 7 and firefox. echo "<table class='aside' cellpadding='0px' cellspacing='0px' border='0'><tr><td width='80%' >$table1</td><td width='20%'>$table2</td></tr></table>"; Similar TutorialsHow do I position a fluidly nested div inside a fluid container div but have the nested div 100px from each side? At the moment the nested div is fluid by applying 100% width, but that makes the nested div the same size as the container (instead of 100px smaller on each side) and ends up overflowing the container. Without using overflow:hidden how am I supposed to nest it so it nests at the correct size? Code:
.container { position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%; }
.nest { position: absolute;
top: 0px;
left: 0px;
margin: 100px;
width: 100%;
height: 100%; }
Hi All, Developed a weird issue in FF and IE8 and am not sure what to do with it. I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it? I took a screen shot in IE, but the have happens in FF. Anyone any ides? Hey guys, I am working on www. paulfenton .tk/wordpress: The side margins of this site are filled with background gradients. (they take up the left and right halfs of the site, with the main content drawn over the middle). The problem is, the div "bottomLeftGradient" is the width of the whole screen. I know this might be because I am using position:absolute, but that seems to be the only way I can make bottom:0px; take effect and cause this to sit on the bottom of the div rather than the top. It seems that if I use width:50%; that it works, but I did not have to do that for bottomRightGradient so something must be messed up here. Thanks for the help, -Paul I've found that nesting tables works very well for getting data aligned properly. I'm having serious trouble doing the same thing with css. For example, I can easily create a table with 2 col, 2 rows, then put another table in each box and do get things just the way I want. I can't figure out a way to do that with css. Is it possible? Should I even try? Thanks! I have a website full, and I mean FULL of nested tables. It was designed by my webguy before he had an understanding of CSS and div tags. I've decided to take on the seemingly monumental task of converting my site to CSS (mainly because I'm implementing Wordpress and I figure now is a good time to get current, clean, and tidy). I haven't found any good tutorials or sites that explain how to make the transition, or for that part, offer a good explanation of how to use CSS for positioning and site layout. I was hoping some of you guys might have some recommendations. Right now I have tables within tables within tables within tables next to tables within tables next to tables within more tables and more tables..... et cetera. And I'm of course trying to do this right away and in as little time as possible Thanks for any suggestions guys i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do? Hi, I'm working on this webpage http://www.dkwebconsultants.com/jaclo/subnav.php?SubGroupID=24 and it works fine in Mozilla. However, in IE there is a thin white space between the td that says "handshowers" in it and the blue above as well as the the left side of the page. The same thing for the slightly lighter td below it and the left side of the page. I've been reading and error checking all day, but i can't figure this one out. the php/html code is as follows: Code:
<table class="nicetable">
<?php include "header.html" ?> <!-- This is one table row, the table has two td's-->
<tr>
<td height="410">
<table class="nicesubnavtable">
<tr>
<td id="subnavtop">
<script language="JavaScript1.2" type="text/javascript">
<!--
myTest.writeMenuBar();
//-->
</script>
</td>
</tr>
<tr>
<td id="subnavbottom">
<?php
$sql = "SELECT * FROM SubGroup WHERE GroupID = '$GroupID'";
$result = mysql_query($sql) or die (mysql_error()."<br />Couldn't execute query: $sql");
$num_results = mysql_num_rows($result);
echo "<br>";
for($i=0; $i < $num_results; $i++){
$row = mysql_fetch_array($result);
$tempSubGroupID = $row['SubGroupID'];
$tempName = stripslashes($row['Name']);
if($SubGroupID == $tempSubGroupID){
echo "<a id='snsgnamesblue' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>";
}
else{
echo "<a id='snsgnames' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>";
}
}
?>
</td>
</tr>
</table>
</td>
<td id="mainareanav">
<?php
$sql1 = "SELECT * FROM IndividualItem WHERE SubGroupID = '$SubGroupID'";
$result1 = mysql_query($sql1) or die (mysql_error()."<br />Couldn't execute query: $sql");
$num_results1 = mysql_num_rows($result1);
for($i=0; $i < $num_results1; $i++){
$row = mysql_fetch_array($result1);
$tempItemID = $row['ItemID'];
$tempNickName = stripslashes($row['NickName']);
$filename = stripslashes($row['ThumbImageName']);
$filenamearray = explode('.', $filename);
$fnameNoExt = $filenamearray[0];
//print the nickname, if no nickname print the itemID
if($tempNickName == "") echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempItemID</a> \n";
else echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempNickName</a> \n";
}
//<td id="subnavright">
//<img src="images/thumb/blankthumb.jpg" id="thumb" name="pic1">
//</td>
?>
</td>
</tr>
<?php include "footer.html" ?> <!-- This is three table rows, public links, user links, search and contact-->
</table>
The relevant CSS code is: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0
}
.nicetable {
border-collapse:collapse;
}
.nicesubnavtable {
border-collapse:collapse;
width: 200px;
margin: 0px;
padding: 0px;
border-bottom: 2px solid #BAB6B7;
}
#subnavbar {
vertical-align: top;
}
#subnavmiddle {
background-color: white;
width: 220px;
height: 410px;
vertical-align: top;
padding-left: 15px;
}
#subnavright{
width: 240px;
vertical-align: top;
border-right: 1px solid #797D7E
}
#subnavtop{
background-color: #F3D891;
height: 60px;
width: 185px;
border-top: 2px solid #F3D891;
border-left: 2px solid #F3D891;
}
#subnavbottom{
background-color: #FAE1A8;
height: 350px;
width: 185px;
padding-right: 15px;
border-left: 2px solid #FAE1A8;
vertical-align: top;
}
I'm using tables for the layout and css for the style. I've tried many variations on table layout and haven't come up with anything. If anyone has any ideas, please let me know. Thanks, dk Hey, I have parent table, with several nested tables within. I'm changing the CSS values on-the-fly using Javascript so I'm using id's instead of classes. The CSS of all the tables is generated using this code: Code:
/* mp_tip_CSS_x_TABLE CSS */
<?
for ($i=1; $i<=12; $i++) {
?>
#mp_tip_CSS_<? echo($i); ?>_table {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
#mp_tip_CSS_<? echo($i); ?>_table td {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
<? } ?>
/* mp_tip_CSS_x_TABLE CSS END */
The parent table is mp_tip_CSS_1_table and the nested tables are mp_tip_CSS_2_table to mp_tip_CSS_12_table. The problem I'm getting is the nested tables seem to inherit the td border values of the parent table, so they have two borders instead of just the single one (the parent border and their own border). Is there any way to make the parent border td value only be applied to the immediate td's of the parent table, and not the td's of the nested tables as well? After browsing some web pages I came across using: Code:
#classname >tr >td {}
But that doesn't seem to work... Thanks for any help, -Ross Hi, I have used bottom-border: 1 on my links and the problem I am having is making sure that these borders are not displayed on images which have <a "somelink"> </a> wrapped around them. I have used #content a > img { border: 0; } and this seems to have solved the problem however when I have an image link nested into a table the border reappears and I have tried everything to get it to remove it. If anyone else knows why it reappears when nested in tables please let me know how I can fix it. Regards, Graham Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine. I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle. The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it. Anyone have any other better ideas? Heya Im having issues trying to keep text inside a div. At the moment the text just runs out of the div instead of starting a new line! html: Code: <body onLoad="goforit()" > <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Web Design</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Links</a> <ul> <li><a href="http://www.finalonline.co.uk/" target="_blank">Link 1</a></li> </ul> </li> </ul> <br style="clear: left" /> </div> <div id="content"> <div id="header">Web Design</div> <div id="container1"> <div id="containermainleft"><img src="img/blue_gradient.jpg" /></div><div id="containermainright"><p>textooooooooooooooooooooooooooooooooooooooooooooooo<p></div> </div> </div> <div id="copyright">Designed and Maintained by Final Online</div> </body> css: Code:
/* Final Online CSS */
body {
margin:0; auto;
background-color: #A4D3EE;
}
#content {
background-color: #A9A9A9;
height: 100%;
width: 710px;
margin-left: auto;
margin-right: auto;
min-height: 500px;
border: 1px solid white;
clear: both;
}
#copyright {
background-color: #414141;
width: 710px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header {
background-color: white;
width: 99%;
text-align: right;
padding-right: 1%;
padding-bottom: 0.2%;
margin-left: auto;
margin-right: auto;
font: normal 13px Arial;
}
#container1 {
background-color: red;
width: 85%;
height: 120px;
text-align: ;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
clear: both;
border-bottom: 1px solid white;
}
#containermainleft {
background-color: yellow;
width: 50%;
height: 110px;
text-align: ;
margin-top: 2px;
float: left;
border-right: 1px solid white;
}
#containermainright {
background-color: yellow;
width: 49%;
height: 110px;
text-align: ;
margin-top: 2px;
float: right;
}
img {
width: 200px;
height: 100px;
border: 1px solid white;
margin-top: 3px;
margin-left: 10px;
vertical-align: center;
}
p {
text-align: justify;
margin: 0px;
}
thanks in advance for any help Hi, I'm running into a bit of a problem making the entire page fit into a DIV. I can't see any reason why it won't, because as far as I know my div's are in the right place, and in the right file (because the effect is half-there. Here's my code: CSS Code:
html {
scrollbar-face-color: #ADDFE7;
scrollbar-highlight-color: #ADDFE7;
scrollbar-3dlight-color: #ADDFE7;
scrollbar-darkshadow-color: #ADDFE7;
scrollbar-shadow-color: #ADDFE7;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ADDFE7;
overflow:hidden;
}
body {
background: #FEFFED;
font-family: 'Verdana', 'Arial', sans-serif;
font-size: 10px;
color: #000000;
cursor:default;
margin: 0; padding: 0;
overflow:hidden;
}
div.center {
/* Make element float in the center */
position: absolute;
left: 50%;
top: 50%;
/* Set the width and height */
width: 750px;
height: 410px;
/* Set margin to half the values of width/height */
margin-left: -375px;
margin-top: -205px;
}
div.rect {
background: #ADDFE7;
padding: 0px;
width: 750px;
height: 410px;
overflow:auto;
border: 1px solid #000000;
z-index: 1;
}
Now what we're concerned about there (the ones I added) are the 'center' div , and 'rect' div. They're near the top. and this is a 'View source' to show where I put the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>form one : shop</title>
<meta name="keywords" content="form one, merchandise, t-shirts, cds Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution." />
<meta name="description" content="form one : shop : Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution. - form one, merchandise, t-shirts, cds" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="authors" content="The Zen Cart™ Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com" />
<base href="http://formone.net/shop/" />
<link rel="stylesheet" type="text/css" href="includes/templates/perry/css/stylesheet.css" /></head><body id="index">
<div class="center">
<div class="rect">
<table class="centershop" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center">
<tr class="headerNavigation">
<td align="left" valign="top" width="33%" class="headerNavigation">
<a href="http://formone.net/shop/index.php?main_page=index">Home</a> |
<a href="http://formone.net/shop/index.php?main_page=login">Log In</a>
</td>
<td align="center" width="25%"></td>
<td class="headerNavigation" align="right" valign="top" width="33%">
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
<tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
<td valign="middle" height="23px" width="200px">
<a href="http://formone.net/shop/index.php?main_page=index"><img src="includes/templates/perry/images/logo.gif" border="0" alt="Powered by Zen Cart :: The Art of E-Commerce" title=" Powered by Zen Cart :: The Art of E-Commerce " width="192" height="64" /></a> </td>
<td align="center" valign="top">
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="main_page">
<tr>
<td valign="top" class="column_left"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_left"><tr><td>
<!--// bof: categories //-->
<table width="150px" border="0" cellspacing="0" cellpadding="0" class="leftbox" id="categories-table">
<tr class="leftboxheading" id="categories-heading-tr">
<!-- Sidebox Header -->
<td colspan="3" width="100%" class="leftboxheading" id="categories-heading-td">Categories</td>
</tr>
<tr>
<!-- Sidebox Contents -->
<td colspan="3" class="leftboxcontent" id="categories-content">
<br /><img src="includes/templates/perry/images/pixel_silver.gif" border="0" alt="" width="100%" height="1" /><br /><a class="category-links" href="http://formone.net/shop/index.php?main_page=products_all">All Products ...</a> </td>
</tr>
<tr>
<!-- Sidebox Footer -->
<td colspan="3" height="5px" class="leftboxfooter" id="categories-footer">
</td>
</tr>
</table>
<!--// eof: categories //-->
</td></tr></table></td>
<td valign="top" class="center_column" width="100%"> <table border="0" width="100%" cellspacing="2" cellpadding="2">
<tr>
<td class="pageHeading"><h1>Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.</h1></td>
</tr>
<tr>
<td class="greetUser">Welcome <span class="greetUser">Guest!</span> Would you like to <a href="http://formone.net/shop/index.php?main_page=login">log yourself in</a>?</td>
</tr>
<tr>
<td class="main">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></td>
</tr>
<tr>
<td class="plainBox">Define your main Index page copy here.</td>
</tr>
<tr>
<td class="plainBox"><p><strong><font face="verdana,arial,helvetica,sans-serif" color="#006600">Main Page Sample Text ...</font></strong></p><p>This section of text is from the Define Pages Editor located under Tools in the Admin.</p><p>It is different from the /includes/languages/english/xxxxxx.php definitions.</p><p>You can use one or the other seperately for this page or, you can use both together.</p><p>To remove the language file definition, do not delete the define statement, set it to be blank. Example: define('TEXT_INFORMATION', '');</p><p>To remove this section of the text, delete it from the Define Pages Editor located under Tools in the Admin.</p><br /></td>
</tr>
</table><br />
</td>
<td valign="top" class="column_right"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_right"><tr><td>
</td></tr></table></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="footertop">
<td class="footertop" align="center"> | <a href="http://formone.net/shop/index.php?main_page=index">Home</a> | </td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="footer">
<tr>
<td class="footerbottom">Your IP Address is: 69.159.1.195</td>
</tr>
<tr>
<td class="footerbottom"></td>
</tr>
</table>
</td></tr>
<tr>
<td align="center"><div>Parse Time: 0.150 - Number of Queries: 43 - Query Time: 0.012168360336304</div></td>
</tr>
</table></div>
</div>
</body></html>
They're right after the <body> and right before the </body> tag, so I don't know why the whole page isn't fitting in my box. It sort of is working, because it's centered vertically and horizontally, and positioned where it's supposed to be. But it overflows out under the box it's supposed to be in. Does anyone know why this is happening? If you want to see what it is doing right now, it's http://www.formone.net/shop . Hi this is the problem: I have a header div which has a transparent background. This is a set image of lets say 200px Under that i have a solid color div which needs to stretch vertically under that i have the footer which is under all of it. Above the header and the solid color (but not the footer) is the content. I need the solid color div to expand vertically as the content get bigger. In turn i need this to push the footer down. The issue is that the content which is above the solid color div and the header one cannot push the solid color divs height down. Heres what im working on... PHP Code: <style> #outer{ border:1px solid #000; width:600px; height:100%; left:0px; position:absolute; } .trans{ position:absolute; top:0px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; z-index:50; } #content{ position:absolute; top:0px; height:100%; width:100%; } .stuffcontent{ position:absolute; top: 0px; z-index:100; width:600px; z-index:100000; border:1px dashed #000; } .solid{ position:absolute; bottom:0px; height:100%; width:600px; background-color:#bed; z-index:10; } .footer{ position:absolute; bottom:-200px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; } </style> <div id="outer"> <div id="content"> <div class="stuffcontent"> <div style="z-index:99999999; position:relative; width:600px; height:100%; display:block;"> TEST---- TEST ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^TEST<br/> <div class="solid"> <!-- THIS SHOULD BE THE SOLID COLOR UNDER THE CONTENT--> </div> <div class="footer">Footer is after the content overflow</div> <div class="trans">Header : Transparent</div> </div> </div> </div> </div> I have been able to bodge a fix where the content is duplicated in a php ob buffer and then spat out again into another div. While setting the original div to hidden but keeping its height and using it as a container. This is well over drawn and i need a simpler fix. (This is not the above code please not) This is the site i have created. The content is over the transparent div and pushes the solid green div down untill it reaches the footer. The footer has a large height to cover any gaps. This was created using the ob buffer method but i need to do this in a simpler fashion. the site link Notice the right menu, the text goes outside the box. It works fine on the left, but I can't figure out why the right side does that. Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query! The following CSS (error.css): Code: body {background-color: white;}
title {font-style: italic}
thead {font-weight: bold; border-bottom: thick double}
td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green}
table {border: hidden}
.Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left}
.title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden}
caption {font: 2em bold}
#intro {position: static; color: black; height: 20%; backXground: #cccccc;}
#addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;}
#table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;}
#table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;}
#footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;}
and xhtml (error.html): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="error.css" />
<script type="text/javascript">
//Bring a span element and descendents to the front and send its span siblings and their descendents to the back
function bringToFront(id)
{
if (id != null) {
if (document.getElementById(id)) {
//Send all parent's descendents in spans to the back
var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN");
var s=0;
var c=0;
while (span[s]) {
setzIndexOfBranch(span[s],9);
s++;
}
//bring id and descendants to the front
setzIndexOfBranch(document.getElementById(id),10);
}
}
}
//Set the zIndex of a node and all of its descendants
function setzIndexOfBranch(node,value)
{
if (node.style != undefined) {
node.style.zIndex = value;
}
var c=0;
while (node.childNodes[c]) {
setzIndexOfBranch(node.childNodes[c],value);
c++;
}
}
function parseXML()
{
text="<root>";
text=text+"<heading>XML CSS HTML test</heading>";
text=text+"<table1data>"+"<table>"+
"<caption>"+
"First table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"</table><br/>Some text after table 1<br/>"+
"</table1data>"+
"<table2data>"+"<table>"+
"<caption>"+
"Second table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"<tr>"+
"<td>row4</td>"+
"</tr>"+
"</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+
"<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+
"<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+
"</table2data>";
text=text+"</root>";
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try // Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
return;
}
}
document.getElementById("table1").innerHTML=
xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue;
document.getElementById("table2").innerHTML=
xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue;
document.title=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>Positioning test script</h1>
<span>
<fieldset id="intro">
<legend>header</legend>
<span id="to"></span><br/>
Header text
</fieldset>
<br/><br/>
<fieldset id="addresses">
<legend>addresses</legend>
<br>This is in the addresses fieldset</br>
<span id="table1" onclick="bringToFront('table1')"></span>
<span id="table2" onclick="bringToFront('table2')"></span>
<br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br>
</fieldset>
<br/><br/>
<fieldset id="footer">
<legend>footer</legend>
This is all
<br/><br/><br/><br/><br/><br/><br/><br/>
footer text<br/>
<br/>Down to here.
</fieldset>
</span>
</body>
</html>
produces overflow in the middle fieldset. I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ? Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ? Thanks. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... |
|||||||