|
CSS - Nested Tables Inheriting Parent Td Value
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 Similar Tutorialshi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks 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 think I'm having a CSS brain fart here. I'm trying to nest some divs, which is working, but the "helper" won't go where I need it to go. The "helper" is inside the "map" and needs to sit at the bottom of the "map" div because the regular content that appears in there (images) may not be the full height. Currently, the "helper" is sitting just below the image. For example, MAP is 400px tall. HELPER is 98px tall. If there is a picture in MAP that is 213px tall, then there should be 89px between the bottom of the image and HELPER. Here is the code: PHP Code: #content { border:1px solid #000000; margin:0px auto; width:900px; height:402px; text-align:left; } #content #map { float:right; width:302px; height:400px; margin:2px 2px 2px 2px; display:inline; text-align:center; } #content #map #helper { top:300px; width:298px; height:98px; } I've tried position and bottom as well. Those items seem to ignore the dimensions of #map and throw the div at the bottom of the page instead of the bottom of #map. If there is a better way, let me know. Thanks for taking the time to read my question. I've been searching the web on how to fix this but haven't got anything yet. In IE, my nested div (class="BioContent") stays within the parent container (id="BioBox"), but does not in FF. Right now I am using width: 100%; I've tried defining the width in pixels, but if I get it to work in FF, then it isn't wide enough in IE. Any ideas? Thanks for your help, Brad 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">
<!-- Created on: 7/21/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="Junk.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WP.js"></script>
</head>
<body>
<div id="FaderBar">
<div id="FaderBarWP">Warren Persowich</div>
<div><img id="FaderBarImg" src="images/audience.jpg" alt=""></div>
<div id="FaderBarHC">Humor Consultant</div>
</div>
<!--<p/>-->
<div id="MainBox">
<div id="LeftBox">
<div id="BioBox">
<div id="Bio0" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[0],0)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[0],0)";>5 Star Rating on bit aired on CBC</div>
<div id="Bio1" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[1],1)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[1],1)";>Licenced Psychologist</div>
<div id="Bio2" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[2],2)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[2],2)";>National Television Debut - Fall of 2006</div>
<div id="Bio3" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[3],3)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[3],3)";>XM Satelite Bit</div>
<div id="Bio4" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[4],4)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[4],4)";>Instructor of Stand-Up Comedy</div>
<div id="Bio5" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[5],5)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[5],5)";>Manitoba Theatre For Young People</div>
<div id="Bio6" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[6],6)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[6],6)";>Cancer Survivor</div>
</div>
<div id="BioFooter">Move cursor over text to read on...</div>
<div id="Broadcast">
<!-- begin embedded WindowsMedia file...-->
<OBJECT id='mediaPlayer' width="320" height="285"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="http://servername/path/to/media.file">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="true">
<param name='showControls' value="true">
<param name='loop' value="true">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
src="http://servername/path/to/media.file" autostart="true" designtimesp='5311' loop="true">
</EMBED>
</OBJECT>
<!--<a href="http://servername/path/to/media.file" style='font-size: 85%;' target='_blank'>Launch in external player</a>-->
</div>
</div>
<div id="CenterBox"><img class="HeadShot" src="ColourTest1.JPG" width="122" height="212" alt=""/></div>
<div id="RightBox"><ul>
<li class="LB1TOP"><a href="#">Seminars</a></li>
<li class="LB2"><a href="#">Stand-Up</a></li>
<li class="LB3"><a href="#">Intro Psych</a></li>
<li class="LB4"><a href="#">Selected Transcripts</a></li>
<li class="LB3"><a href="#">Broadcast Archives</a></li>
<li class="LB2"><a href="#">Links</a></li>
<li class="LB1"><a href="#">Pricing & Inquiries</a></li>
<!--<li class="LB4"><a href="#">Link #8</a></li>
<li class="LB3"><a href="#">Link #9</a></li>
<li class="LB2"><a href="#">Link #10</a></li>
<li class="LB1"><a href="#">Link #11</a></li>-->
</ul></div>
</div>
<div id="Signature"><a class="Sig" href="#">Manic Web Designs</a></div>
</body>
</html>
CSS: Code: body {
/*background: #E2E2E2;*/
background: #000000;
margin-top: 5px;
}
#MainBox {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
width: 780px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
}
#FaderBar {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
height: 80px;
width: 780px;
border: 5px double #ffffff;
/*background-image:url('HeaderImg.png');*/
}
#FaderBarWP {
float: left;
height: 40px;
width: 300px;
margin-left: 15px;
margin-top: 5px;
font-size: 40px;
/*background-color: red;*/
}
#FaderBarHC {
float: left;
height: 55px;
width: 430px;
font-size: 25px;
margin-left: 45px;
/*background-color: aqua;*/
}
#FaderBarImg {
float:right;
height: 105px;
width: 199px;
}
#LeftBox {
width: 340px;
/*height: 500px;*/
float: left;
/*background-color: aqua;*/
}
#CenterBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: red;*/
}
#RightBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: yellow;*/
}
#BioBox {
width: 295px;
height: 250px;
background-color: #F2F2F2;
padding-top: 5px;
border-color: #dcdcdc;
border-style: solid;
border-width: 2px;
float: right;
margin: 5px 10px 0px 0px;
}
.BioContent {
width: 100%;
float: left;
font-size: 11px;
margin-bottom: 5px;
border-top: 1px dashed #dcdcdc;
border-bottom: 1px dashed #dcdcdc;
padding: 5px;
}
#BioFooter {
float: right;
width: 100%;
text-align: right;
font-size: 12px;
color: gray;
margin-bottom: 15px;
}
#Broadcast {
height: 300px;
width: 330px;
float: right;
padding: 0px 0px 0px 0px;
}
ul li {
float: right;
height: 20px;
margin-bottom: 25px;
border-color: #dcdcdc;
border-width: 2px;
border-style: solid;
text-align: center;
width: 150px;
background-color: #F2F2F2;
list-style-type: none;
}
.LB1TOP {
margin-right: 30px;
margin-top: 35px;
}
.LB1 {
margin-right: 30px;
}
.LB2 {
margin-right: 25px;
}
.LB3 {
margin-right: 20px;
}
.LB4 {
margin-right: 15px;
}
.LB5 {
margin-right: 10px;
}
.LB6 {
margin-right: 5px;
}
ul li a {
display: block;
}
ul li a:link {
text-decoration: none;
color: black;
}
ul li a:visited {
text-decoration: none;
color: black;
}
ul li a:hover {
background-color: #737373;
color: white;
font-weight: bold;
}
ul li a:active {
text-decoration: none;
}
img.HeadShot {
margin: 125px 0px 0px 50px;
}
#Signature {
background-color: #E2E2E2;
margin: 0 auto;
width: 780px;
padding-top: 10px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
text-align: right;
}
a.ReadOn:link {
text-decoration: none;
color: black;
}
a.ReadOn:visited {
text-decoration: none;
color: black;
}
a.ReadOn:hover {
text-decoration: none;
color: black;
}
a.ReadOn:active {
text-decoration: underline;
color: black;
}
.Sig {
color: #808080;
font-size: 10px;
}
a.Sig:link {
text-decoration: none;
}
a.Sig:visited {
text-decoration: none;
}
a.Sig:hover {
text-decoration: overline underline;
}
a.Sig:active {
text-decoration: none;
}
I had such good help with my last problem, I thought I'd come back for more. I'm trying to set up my pages to allow a nested div to expand the page vertically based on quantity of content. In other words, if a page requires a lot of content, I want it to automatically push the page down. As it is, the nested div is overlapping the parent. I've tried numerous tips from tutorials, but nothing doing. This article is the one that made the most sense to me but I couldn't achieve the desired effect. Here's the necessary info: HTML (Contact Page) : Code: <body class="contact">
<div id="Main_Container">
<div>
<div id="Header-img"></div>
<ul id="nav">
<li class="home-list"><a href="/index.php">Home</a></li>
<li class="classes-list"><a href="../classes/">Pilates</a>
<ul id="classes-sub">
<li><a href="../classes/pilates.php">Sign Up</a></li>
<li><a href="../classes/dance.php">Schedule</a></li>
<li><a href="../classes/gyrokinesis.php">Education</a></li>
</ul>
</li>
<li class="schedule-list"><a href="../schedule/">Dance</a>
<ul id="schedule-sub">
<li><a href="../schedule/class-schedule.php">Opportunities</a></li>
<li><a href="../schedule/enroll-private.php">Contact about </a></li>
<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
</ul>
</li>
<li class="education-list"><a href="../education/">Gyrokinesis</a>
<ul id="education-sub">
<li><a href="../education/pilates/php/">What is it?</a></li>
<li><a href="../education/dance.php">Dance</a></li>
<li><a href="../education/gyrokinesis.php">Gyrokinesis</a></li>
</ul>
</li>
<li class="about-list"><a href="../about/">About</a>
<ul id="about-sub">
<li><a href="../about/philosophy.php">Philosophy</a></li>
<li><a href="../about/cheryl-lemmer.php">Cheryl Lemmer</a></li>
<li><a href="../about/in-the-news.php.php">In the News</a></li>
</ul>
</li>
<li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>
</div>
<div id="home-container">
<div class="content-nav">heading
<div class="content-nav-head"></div>
</div>
<div class="content-wrap">
</div>
</div>
</div>
</body>
</html>
Relevant CSS : Code: html, body, form, fieldset {
height:100%;
margin: 0;
padding: 0;}
#Main_Container {
position:relative; margin:auto;
width:751px;
min-height:100%;
height:auto; !important;
height:700px;
background-color:#fff;
border:solid 1px #cccccc;
}
#Header-img {
margin:auto;
width:751px;
height:151px;
background:url(../images/header.gif) no-repeat;
background-color:#fff;
}
.content-wrap {
position:relative;
float:right;
width:520px;
height:600px;
border:solid 1px #000;
}
.content-nav {
float:left;
position:relative;
width:190px;
}
Hi I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> 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 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 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? Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hey peeps, my problem is. I have a main table that is 700 px wide and consists of 3 cols and 1 row. Now in the first and last cell i have another table that consists of 1 col and 3 cells. In the Top and bottom cell of both tables i have an image that is 5px wdie * 20px high. In the middle cell i have a 5px wide*1px high background image which tiles in that cell. Now the problem is that the main table will never have a fixed height so i dont know what height to set the cells in the middle. Its sort of a shadow effect i made for my site. I was kind of hoping the there was some way of making the tables height match the height of the cell thats its in. Anyone got any ideas. I figured there would be some css trick i could use? Hope it makes sense. I have the strangest thing going on when I view my site in IE 6. I'm using Drupal and the body tags have classes assigned to it depending on what page you are viewing. Therefore, I can have different content IDs by descending from the body tag. So, I have the following declared in my stylesheet: Code:
body.two-sidebars div#content {
margin: 0em 160px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
body.sidebar-left div#content {
margin: 0em 10px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
In FF and even IE7 my content divs view as they should depending on the class in the body. However, in IE6, my margin declaration is ignored when the page is loaded, but on a refresh, the page usually will display correctly. Are my styles technically declared correctly or is there anything I can do to make the "more correct" and therefore make IE6 happy? Here's my website. For those of you that have IE6 (or even IE7 to double check me), let me know if the margins in the content areas are working or if the text runs over the side bars. http://whirligig.dreamhosters.com/ Hi all, I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited. The test page is here You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text. Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color. BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited. Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this? CSS file is here Thanks! Chris Currently, my site is setup like this: Code:
#wrapper {
margin: 0 auto 15px auto;
width: 900px;
border: solid 1px #999;
border-width: 0 1px 1px 1px;
overflow: hidden;
background: #fff
#left {
float: left;
width: 200px;
margin: 0;
font-size: 75%;
}
#right {
float: left;
width: 698px;
margin: 0;
font-size: 80%;
}
Now I know that I didn't define a background for the #left or #right div, but that is because that is a direct copy and paste of how I currently have it setup since even if I do insert a background color they don't apply. The wrapper's white background seems to overwrite a defined background for the #left and #right. The issue is that the #left is my navigation to which I've colored dark gray (#999). I don't mind if the #right stays white because that is where I place the content of the site. The issue here is when the navigation ends in #left it shows the white beneath the links, which is ugly. I'd like for the dark gray to extend the length of the page filling in the width of the column. I thought I found a "workaround" but not really. I set the wrapper background to #999 which works great when the content on the #right is longer than the navigation inside the #left, but when the #right is shorter the column ends significantly shorter in length and then shows the #999 color beneath where the content ends. I've even tried defining no background in the wrapper (which wouldn't be good anyhow because my body background is a gradient) and even then the #left and #right divs wouldn't take a background color. Help please! Thanks in advance, Michael I have the following defined in my css file: Code:
table {
border:1px dashed #999;
}
And the following code interspersed throughout other parts of my code: PHP Code: echo "<table nowrap border=\"0\">"; The problem I have is that the border is still appearing around these tables where I have specified no border. As I understand, the inline style should take precedence, right? Is this a php issue? Or am I doing something else wrong? Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. |
|||||||