|
CSS - Parent Div Not Parenting?
Please look at this page http://osake.garychus.com/menu2.asp
I am trying to wrap a div (red border) around each category on this restaurant menu. For some reason the code looks right but the red border does not enclose the entire category section(s). I validated the html but think the issue is css related. Any help is appreciated. Similar Tutorialshttp://weightlossforever.ca/ Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it. Thoughts? Hey AHH I know that there is a lot of code to look at but I'm only working on the middle box with the cross. All I am wanting to figure out right now is how to get the parent div.icross to show all it's background in FF. It shows and looks how I want it to look in IE, so you can use that as reference. You guys are always so much help and I REALLY appercaite it. Thanks so much to whoever helps me. - Jacenta Here is the page: tri-m.com/index_newlayout.html Here is the css that only corresponds to the middle to make things easier for you to see: Code:
div.icross /* index cross */
{
background:url(trim_images/layout/cross_background.gif);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:top;
width:540px;
height:1%;
}
div.ilogo /* logo in cross, top left box */
{
width:192px;
height:57px;
margin-right:1px;
margin-bottom:2px;
float:left;
text-align:right;
padding:0;
}
div.ind /* name/description in cross, top right box */
{
width:346px;
height:57px;
margin-left:1px;
margin-bottom:2px;
float:right;
text-align:right;
padding:0;
}
div.iimage /* image in cross, bottom left box */
{
width:192px;
float:left;
margin-right:1px;
margin-top:1px;
height:1%;
}
div.iinfo /* info in cross, bottom right box */
{
width:346px;
float:right;
margin-left:1px;
margin-top:1px;
text-align:left;
height:1%;
}
.trimdescription
{
color:#1b4da6;
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:normal;
width:540px;
}
.pname /* product name */
{
color:#063891;
font-family:Arial;
font-size:28px;
padding:0;
}
.pdescription /* product description */
{
color:#f47720;
font-family:Arial;
font-size:12px;
font-style:italic;
text-align:right;
padding:0;
margin-left:15px;
}
div.clear /* clear div/container */
{
clear:both;
}
div.fptitle /* featured products title/banner */
{
width:540px;
height:19px;
padding:0;
margin:0;
}
div.fproducts /* featured products small images */
{
background-color:#e8e8e8;
width:540px;
height:76px;
padding:0;
margin:0;
}
Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV. Code: <div id="horzmenu">
<ul id="horznavmenu">
<li><a href='rooms.php'>Accomodations</a></li>
<li class='hot'>Location & Info
<ul>
<li><a href='/otherprops.php'>Other Properties</a></li>
<li><a href='/news.php'>News & Photos</a></li>
</ul>
</li>
<li><a href='booking.php'>Booking</a></li>
</ul>
</div>
So if I were to wish to style this new UL and its LI's do I refer to: The parent UL as in: #horznavmenu ul ul { The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{ Or? Thanks in advance for any feedback or suggested reading... I'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know). It looks like this initially... ...and I'm trying to indent the entire element below the header text like so... ...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe). I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied). What I've tried thus far is to use either of the following... Code: TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}
I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something? I would really appreciate any assistance possible. Please look at this page - http://hometown.tmhdesign.com/ask.asp?faq=9 See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7 I just noticed it does it also on this page http://hometown.tmhdesign.com/staff.asp Hey everyone, I am working on a design of mine, and so far it is coming along very well. The problem is, when I am working with the menu, I cannot get the sub menu to appear directly below the parent. Here is a screen shot of what is happening. I hovered over the 2nd menu item, and the sub menu appeared under the 1st. I know why it is doing it, I just can't seem to fix it. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/JavaScript" src="jquery.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } a:focus, a img { outline: 0 none; border: 0 none; } a { text-decoration: none; color: #8D1D45; } html,body { text-align: center; background-color: #C5CED5; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 13px; height: 100%; width: 100%; } #container { width: 852px; background-color: #FFFFFF; text-align: justify; margin: 0 auto; overflow: hidden; height: auto; } #header { background-image: url( http://img103.imageshack.us/img103/8229/header02bd6.jpg ); background-repeat: no-repeat; height: 130px; } #header h1 { color: #8D1D45; letter-spacing: -0.1em; font-size: 26px; margin-left: 300px; padding-top: 50px; } #header span { color: #687788; } #menu { width: 100%; margin-top: 6px; margin-bottom: 5px; } #menu li { display: inline; margin-right: -5px; } #menu a { background-color: #FFF200; opacity: 0.7; filter: alpha(opacity=70); padding: 5px 76.3px; border: 1px solid #000000; } #menu ul ul { display: none; float: left; margin-right: 4px; } #menu ul ul li { display: block; line-height: 30px; } #menu ul ul li a { display: block; max-width: 110px; padding: 5px 80px; } #menu ul ul li.first { margin-top: 6px; } </style> <script type="text/javascript"> function show( id ) { $( "#" + id ).show("slow"); } function hide( id ) { $( "#" + id ).hide("slow"); } </script> </head> <body> <div id="container"> <div id="header"> <h1>ryon.<span>hunter</span></h1> </div> <div id="menu"> <ul> <li><a onmouseover="show('sub1')" onmouseout="hide('sub1')" href="">Tutorials</a></li> <li><a onmouseover="show('sub2')" onmouseout="hide('sub2')" href="">Tutorials</a></li> <ul id="sub1"> <li class="first"><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href="">CSS</a></li> <li><a href="">X/HTML</a></li> </ul> <ul id="sub2"> <li class="first"><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href="">CSS</a></li> <li><a href="">X/HTML</a></li> </ul> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I am only testing it in FF2 at the moment, I will test other browsers when I get it working in FF. P.S. Does anyone know how to get my menu to stay when the menu items are being hovered over? So far it just goes away when I take the cursor off of the top menu. Is there a way to style an element's parent with css? I know something like .div1 p { stuff here } takes care of p's that are inside div1 but is there a way to style say any div1 with a div2 inside? Or a ul with a ul inside? hi, 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 Hi guys, i have a problem with my CSS, i think there's something i'm not quite understanding. I should have a header which is one long div separated into three equal sized columns (three divs), each contain text which is inside its own div. Here's my code: HTML Code: <body> <Div class="Header"> <Div class="Left"> <div class="Logo"><img src="Images/ACE.png" alt="Logo" height="36px" width="56px"/> <div class="LeftText"> AIR CHARTER EXPRESS </div> </div> </Div> <Div class="Middle"> <div class="RightText"> Left </div> </Div> <Div class="Right"></Div> <div class="MiddleText"> Right </div> </Div> </body> and css: Code: @charset "utf-8"; /* CSS Document */ .Header { position:relative; height:40px; width:900px; border:solid 1px black; margin-left:200px; /*background-color:#000000;*/ } .Left { position:relative; height:40px; width:299px; /*background-color:aqua;*/ border-right:solid 1px black; float:left; display:inline; } .LeftText { display:inline; Height:38px; width:200; position:relative; top:-11px; border:solid 1px black; } .Middle /* actually right div */ { position:relative; height:40px; width:299px; /*background-color:yellow;*/ float:right; } .MiddleText { display:inline; Height:38px; width:200px; position:relative; border:solid 1px black; margin-left:60px; top:10px; } .Right /* actually middle div */ { position:relative; height:40px; width:300px; /*background-color:green;*/ float:right; border-right:solid 1px black; } .RightText { display:inline; Height:38px; width:200px; position:relative; border:solid 1px black; margin-left:60px; top:10px; } .Logo { Height:36px; width:66px; padding-top:2px; display:inline; }
its actually a little confusin seeing as the middle div appears on the right and the right div in the middle but i dont want to change any of the names in case it breaks so i'll live with! everything works fine except for the middleText div is not appearing inside it parent (right div) but on the outside of the whole header div. Can somebody please tell me why this is happening?thanks. 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. I am trying to make sure that the body div takes up all the available space in div container (the parent div), however: Code: height: 100%; makes it take up 100% of the whole page, not just the container. Here is my source code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home -- OpportunIT</title> <link href="main.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="alternate" type="application/rss+xml" title="OpportunIT News Feed" href="http://www.sphinxgaming.com/OpportunIT/" /> <link rel="shortcut icon" href="favicon.ico" /> </head> <body id="test"> <div id="container" class="rounded-corners"> <div id="header">OpportunIT</div> <div id="nav-menu"><ul> <li><a href="?page=home">Home</a></li> <li><a href="?page=software">Software</a></li> <li><a href="?page=about">About us</a></li> <li><a href="?page=contact">Contact us</a></li> </ul></div> <br/><br/> <div id="body"> Welcome to OpportuneIT!<br/> <br/> <b>What's New:</b><br/> <a href="?page=sinc">SiNC Framework Announced</a><br/> SiNC is a framework used to manage computers and networks in a secure,<br/> reliable, easy to learn and use way. SiNC can make almost any network<br/> management tasks simpler, such as transferring a file over a secure<br/> connection, running commands on or even remotely controlling computers,<br/> checking the status of various servers, computers and online services<br/> automatically, simplifying networked programming tasks and managing network<br/> security.<br/> <br/> <a href="?page=home">Renamed and Redesigned!</a><br/> We have been renamed to OpportuneIT, and are working on a brand new<br/> website... Stay tuned for more info on this.<br/> </div> </div> </body> </html> Code: html, body {
height: 95%;
}
#container
{
height: 100%;
width: 95%;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu
{
margin-left: auto ;
margin-right: auto ;
width:40em
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#body
{
height:auto;
width: auto;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
padding: 5px;
}
#header
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:54px;
font-family:Verdana;
font-size:30px;
text-align:center;
color:#FFFFFF;
border-bottom: #AAAAAA solid 5px;
}
#footer
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:24px;
text-align:center;
color:#FFFFFF;
}
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 19px;
border-style:solid;
border-width:20px;
}
Thanks in advance. Hello I have struggled to understand this issue. I have a large container and I want 2 or more dives to stay side my side but if I apply float left to the div(s) it leaves the large container. How do I do it so that the left divs push the large container with them. I've included my example. and a screen shot here [IMG]atrexstudio.com/float_left/Untitled-4.jpg[/IMG] <body> <style type="text/css"> .container { width: 600px; background-color: #0F0; } #left1{ background-color: #633; height: 100px; width: 100px; float: left; } #left2 { background-color: #639; height: 100px; width: 100px; float: left; } </style> <div class="container">why do the two left divs jump out the container? <div id="left1">left</div><!--left --> <div id="left2">left2</div> </div><!--container --> </body> </html> If I can understand this then I will not have to keep setting the length of the container manually. Thank you I appreciate you time. I have just a few more CSS bugs to iron out and I can't seem to figure this one out. Here's a link: http://www.plml.org/multitool/index.php In IE8/Firefox it works just as it should: the #solution_area div (contains the multiplication problems) doesn't stretch to its max width. In IE7 the #solution_area div stretches. I've tried taking out all of the contents of the .tab_content divs (just inside the #solution_area div) except for some gibberish text and it works fine. As soon as I put a single thing in, it stretches. What's going on? Hello, I am having a small issue, and after about 10 hours of trying to fix it myself I am looking for help. The problem is when you hover over the Suckerfish menu and it expands, the first entry covers the parent item... I have temporary corrected this by adding the parent as a sub item so it appears to be OK... however I do not wish to keep it this way as I cannot set the submenu width to be the same until the submenu appears below the parent as it should. The site is www.DesolationWildernessVolunteers.org <-- I used the forum code to make this a click able link but for some reason it is not working.... CSS verifys however there is 3 errors in the XHTML that is a result of the template, and though I have tried to locate the errors I cannot find the correct file that is presenting them. I do not believe this is the source of the problem though. The css file controlling the menu is menu.css Code: /** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited {
/** background-color: red; */
/** color: white; */
}
a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover {
/* background-color: #E0E0E0; */
/* color: red; */
}
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited {
background-color: #638D4D;
color: white;
width: auto;
}
a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
/* background-color: #E0E0E0; */
/* color: green; */
}
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:link,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:visited {
background-color: blue;
color: white;
}
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:hover {
background-color: #E0E0E0;
color: blue;
}
ul.mainlevel-son-of-suckerfish-horizontal .expanded {
display: block;
background-image: url("../images/arrow_down.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}
ul.mainlevel-son-of-suckerfish-horizontal ul .expanded {
background-image: url("../images/arrow_right.gif");
}
/** customize style / layout here */
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
font-weight: normal;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
border: 0px solid silver;
padding: 0.3em 0.5em 0.3em 0.5em; /* top, right, bottom, left */
}
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal {
}
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
font-size: 90%;
border-top: none;
height: 1%; /* this is required for the IE to cause the "hasLayout" property and make the whole anchor clickable - "Holly Hack" */
}
#active_menu-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
font-weight: bold;
}
ul.mainlevel-son-of-suckerfish-horizontal, .mainlevel-son-of-suckerfish-horizontal ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
z-index: 100;
}
ul.mainlevel-son-of-suckerfish-horizontal li {
padding: 0;
margin: 0;
background: none;
float: left;
}
ul.mainlevel-son-of-suckerfish-horizontal li li {
position: relative;
display: block;
width: 10em;
}
ul.mainlevel-son-of-suckerfish-horizontal ul {
display: block;
position: absolute;
left: -999em;
margin: -0.2em 0 0 0em;
width: auto;
height: auto;
z-index: 101;
}
ul.mainlevel-son-of-suckerfish-horizontal li li ul {
margin: -1.8em 0 0 10em;
z-index: 102;
}
/** IE7.0 workaround */
ul.mainlevel-son-of-suckerfish-horizontal li:hover, ul.mainlevel-son-of-suckerfish-horizontal li.hover {
position: static;
}
/** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
left: auto;
}
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
left: -999em;
}
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul li.hover ul {
left: auto;
}
ul.mainlevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal li li {
clear: left;
}
/** separator */
span.mainlevel-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
display: block;
width: 1em;
border-width: 0px;
margin-left: 1em;
padding: 0;
padding-top: 1px;
}
/** IE5.0/win workaround: the ">" is handled like a "," */
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal {
position: absolute;
top: 5em; /* change the absolute position for IE5.0 here */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
margin: 0.1em 0 0 0em; /* top, right, bottom, left */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
margin: -1.6em 0 0 10em; /* top, right, bottom, left */
}
Now if I change: Code: /** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
left: auto;
}
to include position: relative; like so: Code: /** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
position: relative;
left: auto;
}
then the menu functions properly except it pushed the entire page down to do so, causing more of an eye sore than if the menu conforms to the lengths of the menu items. Any help in resolving this problem is greatly appreciated. EDIT: BB code not working on the link to my website... I made a few tables using the old HTML method o setting table attributes. However I later discovered css for tables and wrote the following and it works well with some new tables i have made: Code: table
{
border-collapse: collapse;
border-spacing: 0px;
}
Now all my old tables follow the above style (quite naturally). How can I override the css styles for the older tables? how do i set border-spacing to its default value? thanks Hi. How would I go about horizontally centering a number of divs within another parent div which has a set width of 500px? There maybe 2,3 or 4 divs of varying length within the parent div but no matter the number I always want them centered within the parent div. |............................................................| |............................................................| |............................................................| | <---DIV---> | <---DIV---> | <---DIV---> | |............................................................| |............................................................| |............................................................| should have read more in the forum. sorry. 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 |
|||||||