CSS - Problems With Styles Nested In Tables.

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'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

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>";

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?

OK i have a nested list:

PHP Code:
<div id="sideMenu">
        <ul>
            <li><a href="">Menswear</a>
          <ul>
            <li><a href="">Shalwar</a></li>
            <li><a href="">Shalwar2</a></li>
         </ul>            
        </li>
        <li><a href="">Womenswear</a></li>
        <li><a href="">Jewelry</a></li>            
    </ul>
</div> 





i am applying css to it! i want to set the background of the LI to be one colour but i want the background of the nested lists to be another. but what is happening (and its not really a bug) is that whne i apply the background colour to LI this colour also goes behind the nested lis?

http://www.zahra-zahra.com/fullpage.html i am talking about the side menu (purple and light purple) is there a "fix"?

Hello, I have three accordions based on Accordion2 by stickmanlabs on my site. Each of the three accordions (web, motion & print) have nested accordions within that open when clicked to reveal different projects I have done. This works great in Firefox and Safari. In IE the first accordion (web) works properly, opening up to reveal the nested accordions closed up and waiting to be clicked on. However, when I click on either of the following accordions in IE, it opens to reveal that all of the nested accordions are already open at the same time. The nested accordions are open, but also inactive, I can't even click to close them up. I have played with this to no avail, and can't figure it out. I would really appreciate it if someone could tell me how I can get this working properly on IE, or why this might be happening?

Here is essentially what the code looks like for the three nested accordions:

Code:

<div id="vertical_container" >

<h1 class="accordion_toggle">Web</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

</div>
</div>


<h1 class="accordion_toggle">Motion</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

</div>
</div>


<h1 class="accordion_toggle">Print</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

</div>
</div>
                 
                
</div>

I realize this might not be enough info, and I am happy to provide any additional CSS or javascript info. I guess I am hoping someone out there might be familiar with Accordion2. Another strange thing is that I have noticed is that none of the accordions work unless I leave a blank <div id="horizontal_container"></div> in there.

Thanks in advance!

I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!!

PHP Code:
<style type="text/css">
/**********   layout of the page        ***********/

#top {
    background-color:yellow;
    clear:both;
}

/*****************   Formatting top part of the page   **************/

#tag {
    float:left;
    margin-left:8em;
}
#login {
    float:right;
}
#logo {
    margin-left:2em;
    float:left;
    clear:left;
}
#searchBox {
    float:right;
    clear:right;
}
#links2 {
    clear:right;
    background-color:yellow;
}
#links2 li{
    font-size:0.8em;
    display:inline;
    float:right;
    text-decoration:none;
    list-style:none;
    padding:1em;
}
</style>
</head>
<body>
    <div id="top">
        <div id="tag">
            <p id="">Zahra Zahra Ltd</p>
        </div>
        <div id="login">
            <p>Login/Register</p>        
        </div>
        <div id="logo">
            <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a>
        </div>
        <div id="searchBox">
               <form action="search.php" method="post" style="margin:0em; padding:0em;">
        <label>What are you shopping for?</label>
        <input type="text" name="search" value="search" size="14"/>
        <input type="submit" name="submit" value="Go" />
        </form>        
        </div>
        <div id="links2">
            <ul>                
                <li>Contact Us</li>
                <li>Testimonial</li>
                <li>Return Policy</li>
                <li>News</li>
                <li>FAQ</li>
                <li>about us</li>
                <li>Home</li>
            </ul>
        </div>
    </div> 

I know there are many benifits to moving from tables to css and div's and after trying to convert one page I have several question that i'm hopeing someone can help with. If everything goes well I will have about 100 pages to convert.

Here is the code so far:

<div position="float: left">
<span class="contentHeader">Direct Basics</span><br>
<p><span class="h2"> Access Direct</span> </p>
<p><span class="livetext">To access Direct: </span></P>
<span class="livetext"> <ol>
<li>On the Portal home page, you can either:<br>
<p style="text-indent: 2em;"> Click the Tool Quicklink for <b>Assetwise
Direct</b> </p>
<p style="text-indent: 10em;"> or<br>
<p style="text-indent: 2em;"> Click the <b>EVALUATE LOANS</b>
menu to select <b>Assetwise Direct</b><br>
</li>
</ol> </span>

<p class="SmallText">
<span class="livetext">
<ol start="2">
<li>When the security screen appears, enter your...<br>
<p style="text-indent: 3em;"> user name
<p style="text-indent: 4em;"> and password<br>
<p style="text-indent: 5em;"> and click <b>OK</b><br>
<br>
Note: The user name and password fields are case sensitive.</li>
</ol></span>
</p>
</div>

<div style="position: absolute; left: 450px; top: 115px"><a target="_blank" href="images/access_awd.jpg">
<img border="0" src="images/access_awd_small.jpg" xthumbnail-orig-image="images/access_awd.jpg" width="100" height="60"></a> <br>
<div style="text-align=center;"> <span class=reporttext>
<a href="images/access_awd.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div>
</div>

<div style="position: absolute; left: 450px; top: 325px"> <a target="blank" href="images/password_box.jpg">
<img border="0" src="images/password_box_small.jpg" xthumbnail-orig-image="images/password_box.jpg" width="100" height="63"></a><br>
<div style="text-align=center"><span class=reporttext>
<a href="images/password_box.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div>
</div>
<p class=livetext style="position: absolute; float: left; left: 515px; top: 500px">
<a href="#" onClick="window.history.back(); return false;">Back</a>
</p>

THe actual page will have a menu on the left and top and this code will be in the main part of the screen. Now, my problem's with the code, other than I have the css in the file (will move to .css file later), a i'm not sure if ive used the best way for positioning images or codeing style for that matter, and when text is resized in a browser it will overlap the images, is there a way around that?

Once i'm done with this page someone else (who is comfortable with tables and has limited web design experience) will be doing updates in FrontPage. For that would it be easier for them to just stick with tables?

Any help would be greatly appreciated.

This was formerly another post. Making progress and almost there.

I have a website under develepoment...

My site

I have 4 problems.

1. and most important in IE but not in FF the bgimage is showing through the margin or padding, im not sure which of the last image being displayed.. How do I get that out of there. Comes across as a red line after my top gutter.

2. The banner image and gutter images seem to move over to the right by 1px in both browsers.

3. How do i get the left container div to go all the way down the page.

4. How do i get the secondary navigation in the footer to align with the centercontent div and the rightcontent div but not the left content div.

any help would be appreciated...

due to design guidelines i have 3 tables around my content. this content consists of apx 100 rows with apx 8-10 cols. each of these seperate properties which i define via my file styles.css.

everything looks great/correct. the problem is that in netscape it takes AGES to render and display (not to load the data) the page.

simplified my page may look like this:

<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>=== CORPORATE DESIGN-STUFF ===
<table><tr><td>
<table><tr><td>
<table><tr><td>
--- MY CONTENT ---
<table>
<tr class="row1color">
<td class="col1properties">Text</td><td class="col2properties">Text</td> etc...
</tr>
[followed by 100 rows with 8 cols each]
</table>
--- /MY CONTENT ---
</td></tr></table>
</td></tr></table>
</td></tr></table>
=== /CORPORATE DESIGN-STUFF ===[/code]

if i remove the link to the css file the page loads acceptably fast, the same when i delete the content of the file. this makes me think it's not directly linked to NS's problems with nested tables. looks more like NS not liking CSS-statements deep in nested tables...

took to an extreme with a table with 6000 cells: it took IE 2 secs to display the page, NS needed 180 (!!!).

any hints towards why this effect might occur are very appreciated.

[This message has been edited by RedFox (edited November 02, 2000).]

[This message has been edited by RedFox (edited November 02, 2000).]

my layout is a left border, main content, then right border, all vertical columns. here is their code:

Code:

.left {
    background-image: url('images/obj_left.gif');
	background-repeat:repeat-y;
	width:28px;
	margin:0px;
}

.maintable {
	width: 100%;
	background-color:#FFFFFF;
	border-left:3px solid black;
	border-right:3px solid black;
}

.right {
    background-image: url('images/obj_right.gif');
	background-repeat:repeat-y;
	width:28px;
	margin:0px;
}

i also float them left, so imagine that is there.

so i have code like this

<div class='left floatleft'></div>
<div class='maintable floatleft'></div>
<div class='right floatleft'></div>

but why cant i see the images in right and left?

Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body.

Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag.

I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place.

So, how do we handle using different style properties for the same tag within the body?

Perplexed,
Mike

I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this:
Quote:
hr
{
border: none 0;
border-top: 1px dashed #000;
width:98%;
height: 1px
}

However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap?

Any ideas?

Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me.

The code is as follows

<div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '>

Now what happens is the words I type in this box are beautifully laid out because of the padding...

The images placed in the box should stretch border to border - but obviously don't because of the padding....

Can anyone please tell me what I can change to give my text padding but images with no padding?

Thanks so much

I have a page that I'm building as a prototype for a working medical exam GUI. I'm using Dreamweaver and it's pretty ugly. Is there anywhere I can download some styles that will bring this site to life? Maybe OSX or Vista-looking stuff?