|
CSS - Horizontal Multi-level Menu Not Displaying Correctly
1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text
2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list. 3. Right now my soltuion to not display the divider image below the last element in the list is through the code: <li><a style="background-image: none;" href="x.html">SOmething</a></li> </ul> However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck The CSS: Code: .leftCol
{
width: 190px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
float: left;
}
.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}
.submenue
{
width: 188px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-image: url(images/submenue/submenuefiller.jpg);
background-repeat: repeat-y;
text-indent:25px;
}
.submenue ul {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}
.submenuetop
{
width: 188px;
hight: 54px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/Submenue/top.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0;
float: left;
}
.submenuebottom
{
width: 188px;
hight: 60px;
background-image: url(images/Submenue/bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
margin-top: 54;
float: left;
}
The HTML: Code: <div class="leftCol"> <div class="submenuetop"></br><h1>something</h1></div> <div class="submenue"> <ul> <h3>Listing</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3.html">5</a></li> </br> <h3>Produkt</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3">something</a></li> </ul> </div> <div class="submenuebottom"></br></br></br></br></div> </div> Similar TutorialsI am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers I have one issue left in this context menu: www.webfletch.com/sharing (( Make Sure You Right Click On The Page )) The issue is in Internet Explorer, when you click on the sub-menu or one of the links in the sub-menu. Everything works fine at that point, but when you right-click to bring up the context menu again, the sub-menu comes up showing. Because technically, the css didn't grab the mouseout (Or whatever the opposite of "hover" is.) I attempted to fix this with javascript by placing different variations of different scripts all over the code that made the sub-menu style.display = 'none' However, the javascript made the code permenant. Once it was executed, the sub-menu never showed back up again. I guess javascript out-trumps the "hover" attribute of CSS. Any thoughts? Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Hello: I inherited a site which was designed by an SEO firm. They have a 2 level horizontal drop down menu which isn't working in Internet Explorer 6. The website URL is http://www.chrisspencerhomes.com. When you hover over the links Communities, Home Plans, Available Homes and Gallery; the drop down menus do not appear in IE6. The website works great in Firefox and IE7. I attached the CSS file to this post. Can someone help me fix the CSS code so it will work on IE6? Thank you for all your time and help. hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he nfl - baltimore ravens home page and he ge home page Here is the code I'm using currently (would like it to be all CSS). #### ul#mainNavigation { padding-left:185px; } ul#mainNavigation li { padding:0 16px; float: left; display:inline; position: relative; list-style: none; color:White; _width:1px; } ul#mainNavigation li.Seperator { padding:0px; _width:1px; } ul#mainNavigation li.over { background-color:white; } ul#mainNavigation li.over a { color:Red; } ul#mainNavigation li a { color:White; text-transform:uppercase; text-decoration:none; font-weight:bold; display:block; } ul#mainNavigation a:hover { color: Red; } ul#mainNavigation li a { display: block; } ul#mainNavigation li p { height:19px; } ul#mainNavigation li ul { display: none; position: absolute; background-color:Black; opacity:.8; filter: alpha(opacity=80); -moz-opacity: 0.8; margin-left:-16px; } ul#mainNavigation li.over ul { display: block; z-index:999; } ul#mainNavigation li.over ul li { float: none; background:none; border:none; white-space:nowrap; padding:0px; } ul#mainNavigation li.over ul li a { color: white; padding:5px; border-bottom:solid 1px black; } ul#mainNavigation li.over ul li a:hover { background: #3d1f6e; color: white; } ~~~~~~~ HTML ~~~~~~~~~~~~~~ <ul id="mainNavigation"> <li> <p><a href="Mainlink1.html">Mainlink1</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> <li> <p><a href="Mainlink2.html">Mainlink2</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> </ul> #### Thank you, in advance! ~ lahddah Hello! I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this? Here is the css I used to center the site: #wrapper { width:850px; height:650px; position:absolute; top:50%; margin-top:-325px; left:50%; margin-left:-425px; } And here is the site: (URL address blocked: google Maid Marian Muffins) I need the result to be fully functional i.e. zoom & pinching functions must still work. I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? I'm trying to add an extra level to a pop-out menu but can't get the third level to hide and display. The jscript function is suckerfish the css is a little here a little there... CSS: Code:
<style type="text/css">
/* ==== STYLES FOR MAIN PART OF THE MENU ==== */
#menu {
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
width: 100px;
padding: 0px;
margin: 0px;
display:block;
}
#menu, #menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#menu li ul ul {
margin: 0 0 0 0em;
}
#menu li {
float:left;
width:50px;
position:relative;
margin: 0px;
padding: 0px;
}
#menu a {
width:100px;
font-size: 80%;
color:#666666;
text-decoration: none;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
display: block;
}
#menu a:hover, #menu a:focus {
color: #000000;
background-color: #AAA;
}
/* === STYLES FOR THE MAIN MENU (LI's) === */
.mainitems{
display:block;
}
/* === STYLES FOR THE POP OUT MENUS === */
.popouts{
display: none;
width: 6em;
position: absolute;
top:0px;
left: 100%;
background-color: #EEFFCC;
}
.popouts li{
position:relative;
width: 100%;
}
.popouts li a{
display: block;
width: 100%;
text-indent: 3px;
}
.popouts li a:hover{
background-color: yellow;
color: black;
}
#menu li:hover ul, #menu li.over ul, #menu li li:hover ul, #menu li li.over ul{
display:block;
}
I've tried a couple of different things as such: Code:
/* === STYLES FOR THE POP OUT MENUS === */
.popouts{
display: none;
width: 6em;
position: absolute;
top:0px;
left: 100%;
background-color: #EEFFCC;
}
.popouts li li{
position:relative;
width: 100%;
}
.popouts li li a{
display: block;
width: 100%;
text-indent: 3px;
}
.popouts li li a:hover{
background-color: yellow;
color: black;
}
I've tried .popouts li li ul ul{ and even tried adding a seperate class for the third level. Can some one please help me. If you need a link to the page I'm working on, here you go. It's the last link "Links" in the menu where I'm trying to add the third level. Thanks for any help you can offer. John I'm having trouble writing CSS for a nav menu that drops down to four levels. I'm able to drop down to three but I'm having a tough time with the fourth level. Please help. My CSS: /* style the top level hover */ .menu a:hover, .menu ul ul a:hover { color:#3d4058; background:#ffffff; } .menu :hover > a, .menu ul ul :hover > a { color:#3d4058; background:#ffffff; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul { visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul { visibility:hidden; } /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul { visibility:visible; } /* make the 4th level hidden */ .menu ul :hover ul :hover ul ul { visibility:hidden; } /* make the 4th level visible */ .menu ul ul li:hover ul ul ul, .menu ul a:hover ul ul ul { visibility:visible; } Hi I thought this would be a lot easier than it has turned out! I want to add a 4th side menu level [#subnav-col]. I don't know if i'm getting the css or the html wrong but I can't get it to work - I find it difficult to know how to do the CSS+html to a 4th level. The original HTML and CSS is here - would be grateful for some help. Many thanks HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-"><!-- InstanceBegin template="/Templates/template-content.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- InstanceBeginEditable name="meta" --> <title>General information</title> <!-- InstanceEndEditable --> <link type="text/css" href="/css/style.css" media="screen" rel="stylesheet"> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/css/ie8.css" media="screen"> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="/css/ie7.css" media="screen"> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" media="screen"> <![endif]--> <link type="text/css" href="/css/print.css" media="print" rel="stylesheet"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/actions.js"></script> <!-- InstanceBeginEditable name="extras" --><!-- InstanceEndEditable --> </head> <body> <div id="top"></div> <div id="container"> <div id="header"> <a class="accessLinks" href="#content" accesskey="[" tabindex="1">Skip to main content</a><span class="hidden"> | </span><a class="accessLinks" href="/accessibility.html" accesskey="0">Accessibility information</a> <a href="/" title="Go to home page" accesskey="1"><span class="site-title">Change change information </span><img src="/site-tools/img/header/logo.jpg" alt="" width="461" height="120" class="logo"></a><img src="/site-tools/img/header/header.jpg" alt="" width="509" height="120" class="header-bg"><a href="http://science.com" accesskey="/" title="services"><img src="img/header/header-icon-ng.jpg" width="223" height="30" alt="" class="vt-icon"></a> </div> <!-- end header --> <div id="main-nav"> <!-- begin menu include --> <ul> <li><a href="/" tabindex="2">Home</a></li><li><a href="/top/" tabindex="3">Science</a></li><li><a href="/adaptation/" tabindex="4">Physical impacts</a></li><li><a href="/carbon/" tabindex="5">reports</a></li><li><a href="/reducing/" tabindex="6">Doing our fair share</a></li><li class="current"><a href="/trading-scheme/" tabindex="7">trading</a></li></ul><div id="site-search"> <form action="http://search./search" method="get" name="siteSearch"> <fieldset> <legend>Site search</legend> <label for="searchBox">Search</label> <input name="q" type="text" id="searchBox"> <input name="btnG" type="submit" value="Search" class="button"> <input type="hidden" name="site" value="Change"> <input type="hidden" name="client" value="Change"> <input type="hidden" name="proxystylesheet" value="Change"> <input type="hidden" name="output" value="xml_no_dtd"> </fieldset> </form> </div><!-- end site-search --> </div> <!-- end main-nav --> <div id="content-wrapper-2col"> <div id="subnav-col"><!-- InstanceBeginEditable name="navigation" --> <h2><a href="/delay/participating/">Participating in the ETS</a></h2> <ul> <li><a href="/delay/participating/apples/">Apples</a></li> <li><a href="/delay/participating/oranges/">Oranges</a></li> <li><a href="/delay/participating/bananas/">Bananas</a></li> <li><a href="/delay/participating/Cherries/">Cherries</a></li> <li><a href="/delay/participating/grapes/">Grapes</a> <ul> <li><a href="/delay/participating/industry/obligation/">Obligations</a></li> <li><a href="/delay/participating/industry/allocation/">Allocation</a> <ul> <li><a href="/delay/participating/industry/allocation/eligible-activities/">Eligible activities</a></li> <li><a href="/delay/participating/industry/allocation/before-applying/">Before applying</a></li> <li><a href="/delay/participating/industry/allocation/calculators/">Calculators</a></li> <li><a href="/delay/participating/industry/allocation/how-it-works/">How it works</a></li> <li><a href="/delay/participating/industry/allocation/faq.html">Application FAQs</a></li> </ul> </li> <li><a href="/delay/participating/industry/call-for-data/">Call for data</a></li> <li><a href="/delay/participating/industry/faq.html">FAQs</a></li> </ul> </li> <li><a href="/delay/participating/fuels/">fuels</a></li> <li><a href="/delay/participating/synthetic/">Synthetic</a></li> <li><a href="/delay/participating/waste/">Waste</a></li> </ul> <!-- InstanceEndEditable --></div> <!-- end subnav-col --> <div id="content-col"> <div id="breadcrumbs"> <p><span class="youarehere">You are he </span><!-- InstanceBeginEditable name="crumbs" --><a href="/trading/"> trading</a><a href="#"></a> ><!-- InstanceEndEditable --></p> </div> <!-- end breadcrumbs --> <a name="content"></a><!-- InstanceBeginEditable name="content" --> <h1>About allocations </h1> <p>Financial assistance to reduce the impact of the <a href="/scheme/about/basics.html"> Some sectors by providing them with <a href="/scheme/about/emission-units.html"> Units (Us)</a>. This compensates eligible businesses for increased energy and fuel costs under the ETS and will help businesses make the necessary changes to reduce their pricing.</p> <p> There are three main groups who are eligible for allocation: </p> <ul> <li>firms whose activities are intensive and who are exposed </li> <li>fishing, and</li> <li> forestry. </li> </ul> <!-- InstanceEndEditable --></div> <!-- end content-col --> </div> <!-- end content-wrapper-2col --> <div class="clear"></div> <div id="footer"> <div id="-info"><a href="http://www.../" title="Visit the website"><img src="/site-tools/img/-logo.gif" width="211" height="57" alt=" logo"></a> </div> <!-- end -info --> <div id="call-tools"> <div id="call"> </div> <!-- end call --> <div class="clear"></div> <div id="tools"> <ul> <li><a href="/sitemap.html" accesskey="2">Site map</a></li> <li><a href="/copyright.html">Copyright</a></li> <li><a href="/disclaimer.html">Disclaimer</a></li> <li><a href="/accessibility.html#accesskeys" accesskey="0">Accessibility</a></li> <li><a href="/privacy-policy.html">Privacy policy</a></li> <li><a href="/glossary.html">Glossary</a></li> <li class="last"><a href="/contact-us.html" accesskey="9">Contact us</a></li> </ul> </div> <!-- end tools --> </div> <!-- end call-tools --> </div> <!-- end footer --> <div class="clear"></div> </div> <!-- end container --> </body> <!-- InstanceEnd --></html> CSS #subnav-col Code: /* ----- subnav (left-hand) column ----- */ #subnav-col { float: left; width: 233px; border-top: 1px solid #cacec2; } #subnav-col h2 { font-weight: normal; font-size: 1.4em; color: #234d1b; margin: 0; padding: 4px 13px 4px 13px; line-height: 1.2; background-color: #eeefeb; border-bottom: 1px solid #cacec2; } #subnav-col h2 a:link, #subnav-col h2 a:visited { color: #234d1b; text-decoration: none; } #subnav-col h2 a:hover { color: #234d1b; text-decoration: underline; } #subnav-col ul { margin: 0; padding: 0; } #subnav-col ul li { margin: 0; padding: 0; list-style-type: none; font-weight: normal; font-size: 1.2em; color: #234d1b; } #subnav-col ul li ul li, #subnav-col ul li ul li ul li { font-size: 100%; font-weight: normal; } #subnav-col ul li a:link, #subnav-col ul li a:visited { margin: 0; padding: 5px 13px 4px 13px; color: #234d1b; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet.gif) no-repeat 0 6px; } #subnav-col ul li a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; } #subnav-col ul li.current a:link, #subnav-col ul li.current a:visited, #subnav-col ul li.current a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; } #subnav-col ul li.parent a:link, #subnav-col ul li.parent a:visited, #subnav-col ul li.parent a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-parent.gif) no-repeat 0 6px; } #subnav-col ul li ul li a:link, #subnav-col ul li ul li a:visited, #subnav-col ul li.parent ul li a:link, #subnav-col ul li.parent ul li a:visited { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet.gif) no-repeat 13px 6px; color: #234d1b; } #subnav-col ul li ul li a:hover, #subnav-col ul li.parent ul li a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li.current a:link, #subnav-col ul li ul li.current a:visited, #subnav-col ul li ul li.current a:hover, #subnav-col ul li.parent ul li.current a:link, #subnav-col ul li.parent ul li.current a:visited, #subnav-col ul li.parent ul li.current a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li a:link, #subnav-col ul li ul li a:visited, #subnav-col ul li ul li a:hover { padding: 5px 13px 4px 27px; } #subnav-col ul li ul li.parent a:link, #subnav-col ul li ul li.parent a:visited, #subnav-col ul li ul li.parent a:hover, #subnav-col ul li.parent ul li.parent a:link, #subnav-col ul li.parent ul li.parent a:visited, #subnav-col ul li.parent ul li.parent a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-parent.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li ul li a:link, #subnav-col ul li ul li ul li a:visited, #subnav-col ul li.parent ul li ul li a:link, #subnav-col ul li.parent ul li ul li a:visited, #subnav-col ul li ul li.parent ul li a:link, #subnav-col ul li ul li.parent ul li a:visited, #subnav-col ul li.parent ul li.parent ul li a:link, #subnav-col ul li.parent ul li.parent ul li a:visited, #subnav-col ul li ul li.current ul li a:link, #subnav-col ul li ul li.current ul li a:visited { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet.gif) no-repeat 27px 6px; color: #234d1b; } #subnav-col ul li ul li ul li a:hover, #subnav-col ul li.parent ul li ul li a:hover, #subnav-col ul li ul li.parent ul li a:hover, #subnav-col ul li.parent ul li.parent ul li a:hover { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; color: #000; } #current a:link, #subnav-col ul li ul li ul li.current a:visited, #subnav-col ul li ul li ul li.current a:hover, #subnav-col ul li.parent ul li ul li.current a:link, #subnav-col ul li.parent ul li ul li.current a:visited, #subnav-col ul li.parent ul li ul li.current a:hover, #subnav-col ul li ul li.parent ul li.current a:link, #subnav-col ul li ul li.parent ul li.current a:visited, #subnav-col ul li ul li.parent ul li.current a:hover, #subnav-col ul li.parent ul li.parent ul li.current a:link, #subnav-col ul li.parent ul li.parent ul li.current a:visited, #subnav-col ul li.parent ul li.parent ul li.current a:hover { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; color: #000; } /* --- blocks of content in subnav column --- */ /* subnav column links */ #subnav-col .related-links-box ul a:link, #subnav-col .highlight-box p a:link, #subnav-col .highlight-box ul a:link { color: #004161; font-weight: bold; text-decoration:none; } #subnav-col .related-links-box ul a:visited, #subnav-col .highlight-box p a:visited, #subnav-col .highlight-box ul a:visited { color:#336781; font-weight: bold; text-decoration:none; } #subnav-col .related-links-box ul a:hover, #subnav-col .highlight-box p a:hover, #subnav-col .highlight-box ul a:hover { color: #004161; font-weight: bold; text-decoration:underline; } /* related links box - subnav column */ #subnav-col .related-links-box { width: 233px; background-color: #f6f7f5; margin: 20px 0 20px 0; padding: 0; border-top: 1px solid #cacec2; } #subnav-col .related-links-box h2, #subnav-col .related-links-box h3, #subnav-col .related-links-box h4, #subnav-col .related-links-box h5, #subnav-col .related-links-box h6 { font-weight: normal; font-size: 1.4em; color: #004161; margin: 0; padding: 3px 13px 4px 13px; line-height: 1.2; background-color: #eeefeb; border-bottom: 1px solid #cacec2; } #subnav-col .related-links-box h2 a:link, #subnav-col .related-links-box h2 a:visited, #subnav-col .related-links-box h3 a:link, #subnav-col .related-links-box h3 a:visited, #subnav-col .related-links-box h4 a:link, #subnav-col .related-links-box h4 a:visited, #subnav-col .related-links-box h5 a:link, #subnav-col .related-links-box h5 a:visited, #subnav-col .related-links-box h6 a:link, #subnav-col .related-links-box h6 a:visited { color: #004161; text-decoration: none; } #subnav-col .related-links-box h2 a:hover, #subnav-col .related-links-box h3 a:hover, #subnav-col .related-links-box h4 a:hover, #subnav-col .related-links-box h5 a:hover, #subnav-col .related-links-box h6 a:hover { color: #004161; text-decoration: underline; } #subnav-col .related-links-box ul { margin: 11px 0 0 0; padding: 0 13px; } #subnav-col .related-links-box ul li { font-size: 1.1em; margin: 0; padding: 0 0 12px 14px; line-height: 1.2; list-style-type: none; background: url(../img/bullet.gif) no-repeat 0 2px; font-weight: normal; } #subnav-col .related-links-box ul li a:link { padding: 0; border-bottom: none; background: none; } #subnav-col .related-links-box ul li a:visited { padding: 0; border-bottom: none; background: none; } #subnav-col .related-links-box ul li a:hover { padding: 0; border-bottom: none; background: none; }
Hi There, Here is my HTML, and below is my css, it displays as i wanted in IE, but obviosly Mozilla is the corrct browser to use, so what am i missing here? This is the link you can reference, http://cies.loadedtech.com.au/Default.aspx?tabid=547 If you look at it in IE it is fine, but Mozilla has this margin at the top...PLEASE HELP. HTML: Code: <body> <div id="mainSiteHold"> <div id="contentLeft"><p> </p></div> <div id="contentMid"><p> </p></div> <div id="contentRight"><p> </p></div> </div> </body> CSS: Code:
body { margin:0px; padding:0px; background-color:#ffffff; }
#mainSiteHold { position:relative; width:934px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:1em; text-align:left; }
#contentLeft { float:left; position:relative; top:0px; width:180px; background-color: red; }
#contentMid { float:left; position:relative; top:0px; width:709px; background-color: blue; }
#contentRight { float:left; position:relative; top:0px;width:45px; background-color: green; }
Thanks I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable. This is my html: Code: <div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div> <div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0" /></div> This is my css: Code: body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr {position:static; width:auto; min-width:0px; min-height:100%;
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}
any help would be greatly appreciated. Thanks! I'm brand new to CSS. I pieced together the following CSS style sheet: body { margin-top:5px; margin-bottom:5px; padding:0; background:#ccffff; } t{line-height:36px;} #wrap { position:50%; width:613px; margin:0 auto; background:#ffffff; margin-left:auto; margin-right:auto; align:center; } #sidebar { position:absolute; float:left; width:150px; border: 1px solid #000033; padding:15px; background:#ffffff; height:370px; z-index:1; } #main { float:right; width:390px; border: 1px solid #000033; overflow: auto; font-family: "Times New Roman", serif; font-size: 13px; padding-top:12px; padding-right:20px; padding-bottom:20px; padding-left:20px; background:#ffffff; background-repeat:no-repeat; background-position:75% 535px; background-image:url(smalljester.jpg); height:750px; z-index:2; } It works fine on most browsers, but not of course in IE/Win. I think there's something basic I'm not understanding about style sheets. The page is meant to be (and is on most browsers I've tried and on Macs) centered (the two boxes centered), the two boxes are meant to have white backgrounds with thin solid borders, and the boxes are meant to overlap perfectly (the right border of the left box should exactly overlap the left border of the right box). Right now in IE(8)/Win(XP) it's not centered, the two boxes are not connected (separated by white space on a light blue background), and the white background extends the full height of the #main box (where it's not meant to go below the bottom of the left column). Any help appreciated. I've been working will many css hacks. I just can't seem to get anything to work with the "first child" posting the full css doc. Hopefully someone can help me. PHP Code: .gridContainer { padding:20px; /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorstr='#003300', endColorstr='#006600'); /* background-color: #006600;*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#003300), to(#007700)); background-image: -webkit-linear-gradient(top, #003300, #007700); background-image: -moz-linear-gradient(top, #003300, #007700); background-image: -ms-linear-gradient(top, #003300 0%, #007700 100%); background-image: -o-linear-gradient(top, #003300, #007700); background-image: linear-gradient(top, #003300, #007700); /* Grid Shadow */ -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; } /* Font Family, Size and Color */ .gridContainer, .grid, .gridHeaderRow, .gridContainer a, .gridContainer input { font-family:arial; font-size:10px; font-weight:bold; color:#fff; } .grid { border-spacing:0px; border-collapse:collapse; /* if you want cell separation border-spacing:1px; border-collapse:separate; */ background:#005501; } /*********************************************************************************/ /*********************************************************************************/ /***************************** END COLORS *****************************/ /*********************************************************************************/ /*********************************************************************************/ /* if you want to turn off animations for speed reasons turns these off */ .gridContainer tr, .gridContainer td, .gridContainer th, .gridContext div { /* -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; */ } /* padding of the cells */ .grid td, .gridHeaderRow th { padding:0px; border-left:1px solid #636470; padding-left:6px; } .grid td { border-left-color:transparent; } .grid td:first-child, .gridHeaderRow th:first-child { padding-left:12px; } .grid td { padding-top:5px; padding-bottom:5px; } /* ODD ROWS */ .grid tr:nth-child(2n) { } /* EVEN ROWS */ .grid tr:nth-child(2n+1) { } /* this can't inherit the color because its fixed to the bottom of the page */ .gridPager.fixed { background:#222; } /* Row Highlight */ .gridWrapper tr:hover, .gridContainer th:hover, .gridWrapper tr:hover input, .gridWrapper tr:hover a{ color:#ffe; background-color: #005500; } /* Current Cell Highlight */ .grid td:hover { background-color: #008800; } /* Cell Borders */ .grid td { } .gridHeaderRow { border-collapse:collapse; } /* column hilte */ .grid td.hilite { background-color:#2A8ADD; color:#000; } /* stuck row */ .stuckRow td{ padding:8px; background:#003300; color:#fff; } /* right click menu main box */ .gridContext { background-color:white; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:3px 3px 15px #000; -webkit-box-shadow:3px 3px 15px #000; box-shadow:3px 3px 15px #000; } /* right click menu each item */ .gridContext div { color:black; font-size:12px; padding:6px 15px; } /* right click menu hover */ .gridContext div:hover { background-color:#4071ee; color:white; } /* editable cell */ .editableInput[type="text"] { border-width:0px; /*border-bottom:1px dashed #ccc;*/ } textarea.editableInput { } /* title bar */ .gridTitle { padding:10px; font-size:14px; } /* structure for entire grid */ .gridContainer { margin-bottom:10px; overflow:hidden; position:relative; border-collapse:collapse; } /* minimum shown before scroll bar apppears */ .gridWrapper { max-height:500px; overflow-x:hidden; } .gridHeaderRow tr:first-child { position: relative; background-image: -ms-linear-gradient(top, #006600, #002200); background: none; background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); background-image: -webkit-linear-gradient(top, #006600, #002200); background-image: -moz-linear-gradient(top, #006600, #002200); background-image: -o-linear-gradient(top, #006600, #002200); background-image: linear-gradient(top, #006600, #002200); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=0, startColorstr='#006600', endColorstr='#002200'); -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorStr=#006600,EndColorStr=#002200)"; } /* the header row cells */ .gridHeaderRow th { width:150px; cursor:pointer; padding-top:12px; padding-bottom:12px; } .gridHeaderRow th:first-child { border-left:0px; } .gridHeaderRow th:last-child { border-right:0px; } /* expand the inner components to meet the size of the container */ .grid, .gridHeaderRow { width: 100%; } /* all input fields */ .gridContainer input, textarea { background-color:rgba(255,255,215,.8); background-color: #CCDCAC; border:1px solid rgba(255,255,255,.2); outline:0px; height:2em; margin-top:-2px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow: inset 0px 2px 5px #111111; -moz-box-shadow: inset 0px 2px 5px #111111; border:0px; color: #000; } /* no border left on first cell */ .grid td:first-child { border-left:0px; } /* no border right on last cell */ .grid td:last-child { border-right:0px; } /* select drop down boxes */ .grid td select { width:95%; border: 1px solid rgba(255,255,255,.1); outline:0px; } /* the pager */ .gridPager { width:auto; height:25px; overflow:hidden; padding:10px 0px 10px 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; background-color: rgba(0,0,0,.2); background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,.2))); background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,.1)); background-image: -moz-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: -ms-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: -o-linear-gradient(top, transparent, rgba(0,0,0,.2)); background-image: linear-gradient(top, transparent, rgba(0,0,0,.2)); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003300', endColorstr='#006600'); } /* when the pager is fixed */ .gridPager.fixed { position:fixed; bottom:0; z-index:999; width:100%; } /* the last button in the pager when its fixed */ .gridPager.fixed > div:last-child { position: relative; left:-20px; } /* every div inside the pager */ .gridPager > div { margin-right:16px; float:left; } /* the text string inside the pager */ .gridTotal { padding:5px; } /* button styles */ .gridButton { padding:5px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; text-align:center; font-size:11px; background-color: #006600; background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); background-image: -webkit-linear-gradient(top, #006600, #002200); background-image: -moz-linear-gradient(top, #006600, #002200); background-image: -ms-linear-gradient(top, #006600 0%, #002200 100%); background-image: -o-linear-gradient(top, #006600, #002200); background-image: linear-gradient(top, #006600, #002200); /* For Microsoft IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002200', endColorstr='#006600'); -webkit-box-shadow:1px 1px 5px #222; box-shadow:1px 1px 5px #222; } .gridButton:active { -webkit-box-shadow:-1px -1px 4px black; -moz-box-shadow:-1px -1px 4px black; } /* buttons in the title bar */ .gridTitle .gridButton { margin-top:-3px; margin-right:6px; float:right; } /* save button in the pager */ .gridPager .gridSave { float:right !important; display:none; } /* refresh button is tinier */ .gridRefresh { font-size:10px; } /* the div inside of each th that will chagne size */ .colResizer { background-color:transparent; position:relative; height:inherit; } /* the handle on each th that will grab to resize */ .colHandle { height:100%; width:20px; background-color:transparent; position:absolute; right:0px; top:0px; } /* the bottom right corner div that allows you to resize */ .gridHandle { width:10px; height:10px; cursor:se-resize; position:absolute; bottom:0px; right:0px; background-color:rgba(0,0,0,.5); } /* the right click menu */ .gridContext { position:fixed; width:200px; padding:2px; z-index:99999; } /* each option in the right click menu */ .gridContext div { cursor:pointer; } /* the close button in the right click menu */ .closeContext { margin:0px !important; padding:0px !important; position:absolute; top:3px; right:3px; z-index:98; font-size:11px !important; } /* each input box inside the table inherits its parent styles */ .editableInput { width:95%; background:transparent; color:inherit; font-weight:inherit; font-size:inherit; font-family:inherit; margin:0px; } /* clickable nRows */ .nRows { cursor:pointer; } .grid a { text-decoration:underline; } I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong. I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari. Here is the link: http://gregsgoods.com/seestore.php In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it. Here is the CSS code: Code: html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {
color: #005B9C;
}
a:hover {
color: #0B2444
}
img {
border: 0;
}
body {
background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
color: #ccc;
font: normal 62.5% Tahoma,sans-serif;
}
p,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
color: #005B9C;
margin: 0 0 7px 0;
}
h2 {
font: normal 1.3em Tahoma,sans-serif;
margin-bottom: 1px;
color: #005B9C;
margin: 0;
}
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
.container {
position: absolute;
left:50px;
top:188px;
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 8px 8px;
width: 780px;
}
.top {
padding: 8px 8px 0;
}
.header {
position: absolute;
left:50px;
top:10px;
background-color: #fff;
font-size: 1.2em;
height: 173px;
margin: 0 auto;
padding: 8px 8px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #000033;
color: #fff;
color: #FFF;
height: 163px;
}
.header .left {
background: transparent url(/img/Top.jpg) top left repeat-x;
border: 1px solid #7795BD;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 163px;
width: 777px;
text-align: left;
}
.header .right div {
padding-left: 16px;
padding-top: 16px;
font: normal 1.6em "Trebuchet MS",sans-serif;
}
.navigation {
background: #D9E1E5 url(/img/nav.jpg);
border: 1px solid #7795BD;
height: 23px;
}
.navigation a {
background: transparent url(/img/nav.jpg) left top repeat-x;
border-right: 1px solid #7795BD;
color: #fff;
display: block;
float: left;
font-size: 12px;
font-family: Arial;
font-weight: bold;
line-height: 23px;
text-decoration: none;
padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom;
color: #f1f1f1;
}
.main {
border-top: 8px solid #FFF;
background: url(/img/bgmain.jpg) repeat-y;
}
.sidenav {
float: left;
margin: 5px;
width: 195px;
}
.sidenav h2 {
color: #333300;
font-size: 1em;
font-weight: bold;
line-height: 30px;
margin: 5;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #ebebeb;
color: #654;
}
/* content */
.content {
float: right;
margin: 5px;
padding: 0 16px;
width: 536px;
}
.content {
color: #666;
font-size: 1.0em;
margin-bottom: 6px;
}
.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}
.footer {
background: url(/img/bluefooter.jpg) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox. Site: www.measureoffaith.net Stylesheet: www.measureoffaith.net/style.css Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet. Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well. Thanks so much. index.html w/ stripped content: 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">
<head>
<title>
Measure of Faith on Aerie Peak
</title>
<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
</div>
<div id="container">
<div id="navigation">
<!-- Start of Navigation Bar (NavigationBar2) -->
<table id="NavigationBar2" border="0" cellspacing="0"
cellpadding="0" nof=
"NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
width="140">
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton1) -->
<a href="#" onmouseover=
"F_roll('NavigationButton1',1)" onmouseout=
"F_roll('NavigationButton1',0)"><img id=
"NavigationButton1" name="NavigationButton1"
height="30" width="140" src=
"images/Home_Hbutton_on2.gif" onload=
"F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
border="0" alt="Home" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton2) -->
<a href=
"/eqdkp/viewnews.php"
onmouseover="F_roll('NavigationButton2',1)"
onmouseout="F_roll('NavigationButton2',0)"><img id=
"NavigationButton2" name="NavigationButton2"
height="30" width="140" src=
"images/Raid_News_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
border="0" alt="Raid News" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton3) -->
<a href="charter.html" onmouseover=
"F_roll('NavigationButton3',1)" onmouseout=
"F_roll('NavigationButton3',0)"><img id=
"NavigationButton3" name="NavigationButton3"
height="30" width="140" src=
"images/Charter_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
border="0" alt="Charter" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton4) -->
<a href=
"roster.html"
onmouseover="F_roll('NavigationButton4',1)"
onmouseout="F_roll('NavigationButton4',0)"><img id=
"NavigationButton4" name="NavigationButton4"
height="30" width="140" src=
"images/Roster_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
border="0" alt="Roster" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton5) -->
<a href=
"/eqdkp/listmembers.php"
onmouseover="F_roll('NavigationButton5',1)"
onmouseout="F_roll('NavigationButton5',0)"><img id=
"NavigationButton5" name="NavigationButton5"
height="30" width="140" src=
"images/DKP_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
border="0" alt="DKP" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton6) -->
<a href="/phpBB2/index.php"
onmouseover="F_roll('NavigationButton6',1)"
onmouseout="F_roll('NavigationButton6',0)"><img id=
"NavigationButton6" name="NavigationButton6"
height="30" width="140" src=
"images/Forums_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
border="0" alt="Forums" /></a>
</td>
</tr>
</table>
</div>
<div id="content">
<div class="newspost"><div class="wraptitle">
<p class="subtitle">- I... AM... UNLEASHED!</p>
<p class="thetitle">MAGTHERIDON DOWN</p></div>
<div class="newsdate">
28.04.2007 by <img src="images/icons/mar.png" />
</div>
<div class="newscontent">
Magtheridon proved to be no match to the professional
button clicking skills of MoF. Wiping a few times in
order to fine tune the button clicking, we emerged
with victorious with zero deaths and some bad loot.
</div>
<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
</div>
...clipped content...
</div><div style="clear: both;">
</div>
<div id="footer">
</div>
</body>
</html>
style.css: Code: html,body { height: 100%; }
body{
background: #000000 url('background-image.jpg') repeat-y;
margin: 0;
height: 100%;
}
.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}
.wraptitle{
float: left;
height: 79px;
}
p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}
p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}
.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}
.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}
p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
text-decoration: none;
}
a:active{
text-decoration: none;
}
#banner{
background-image: url('header-one.jpg');
height: 200px;
width: 943px;
padding: 0;
}
h5.styling{
color: #555555;
font-family: trebuchet ms, tahoma;
border: 0;
padding: 8px;
margin: 0;
}
p.styling{
color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 8px;
margin: 0;
text-align:justify;
}
td.styling{
font-color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 0;
margin: 0;
text-align:justify;
}
html > body #navigation{
background-image: url('left-runner.jpg');
font-size: 0;
float: left;
width: 140px;
min-height: 100%;
padding: 0 0 0 4px;
line-height: 0;
border: 0;
margin: 0;
}
html > body #content{
background: #EDF2F5;
float: right;
width: 796px;
min-height: 100%;
padding: 0;
border: 0;
margin: 0;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1px;
}
#container{
width: 940px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
#footer{
background-image: url('bottom-frame.jpg');
width: 943px;
height: 47px;
}
Hey there again! I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!! It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!! Here is a screen shot of my problem: Here is my css: PHP Code: .navbar :hover ul.nav { padding:0; margin:0; left:0; top:40px; width:136px; z-index:604; background-color:#333333; } .navbar :hover ul.nav li a { display:block; height:24px; width:136px;} .navbar :hover ul.nav li a:hover {background:#ad8d12;} .navbar :hover ul.nav :hover ul.sub{ padding:0; margin:0; left:104px; top:-4px; width:200px; z-index:606; background-color:#333333;} /* keep the 'next' level invisible by placing it off screen. */ .navbar ul.nav, .navbar :hover ul.nav ul.sub {position:absolute; left:-9999px;} Here is my HTML code: PHP Code: <ul class="navbar"> <li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="nav"> <li><a href="#">Link2</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#">Link3</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> Thanks a million for even reading up to here I'm a novice web developer and I created a website for a non-profit group using a free CSS Template. It worked great until a few months ago, then the left and right borders suddenly were out of align. It works fine on another web hosting company's web server, but not the one it needs to work on. I recreated the whole website using a different CSS template and it is doing the same thing! Any ideas? Thanks so much! |
|||||||