Problem with CSS after using Menu...

User 1903103 Photo


Registered User
29 posts

Cool - thanks. BTW what is an Ambassador? Do you work for CC?
Nicole Fende
http://www.smallbusinessfinanceforum.com
Growing Tomorrow's Profits
User 133269 Photo


Registered User
2,900 posts

Ambassadors and Advisors are volunteers padawan :D not CC staff
Have fun
~ Fe Pixie ~
User 184085 Photo


Ambassador
1,707 posts

OK I think I got you going on the right path :-)

I use firefox web designer toolbar, it is invaluable.

outlining your block level elements we see they are overlapping and a bit jumbled, I made a few code changes and smoothed it out a bit, you need to fine tune your padding and margins to get the final setup you want.

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/ScreenShot023.jpg

the updated CSS: (comments added)

/*** ESSENTIAL STYLES ***/

.menu-menu, .menu-menu * {
margin:0;
padding:0;
list-style:none;
}
.menu-menu {
margin:10px 0 0 100px; /* top right bottom left */
line-height:1.0;
}
.menu-menu ul {
position:absolute;
top:-999em;
width:100px; /* submenu item width - offest below must match */
}
.menu-menu li {
width:100px; /* Default to 'auto'. If specified, the submenu item width and offset must match */
}
.menu-menu li a {
text-align:center;
}
.menu-menu li li a {
text-align:left;
}
.menu-menu ul li {
width:100%;
}
.menu-menu li ul {
display:none;
}
.menu-menu li:hover ul {
display:block;
}
.menu-menu li li ul {
display:none;
}
.menu-menu li:hover li:hover ul {
display:block;
}
.menu-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
.menu-menu li {
float:left;
position:relative;
}
.menu-menu a {
display:block;
position:relative;
}
.menu-menu li:hover ul,
.menu-menu li.sfHover ul {
left:0;
top:18px; /* match top ul list item height */
z-index:2;
}
ul.menu-menu li:hover li ul,
ul.menu-menu li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li:hover ul,
ul.menu-menu li li.sfHover ul {
left:100px; /* submenu offest - must match ul width above */
top:0;
}
ul.menu-menu li li:hover li ul,
ul.menu-menu li li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li li:hover ul,
ul.menu-menu li li li.sfHover ul {
left:100px; /* submenu offest - must match ul width above */
top:0;
}

/*** DEMO SKIN ***/
.menu-menu {
float:left;
margin-bottom:1em;
font-family:Tahoma, Verdana, Arial;
font-size:12px;
font-weight:normal; /* bold or normal */
font-style:normal; /* italic or normal */
}
.menu-menu a {
border-right:1px solid #004E98;
border-top:1px solid #004E98;
border-bottom:1px solid #004E98;
padding:3px 2px;
text-decoration:none;
}
.menu-menu li.first a {
border-left:1px solid #004E98;
}
.menu-menu a, .menu-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#000000;
}
.menu-menu a:hover, .menu-menu a:active { /* visited pseudo selector so IE6 applies text colour*/
color:#FFFFFF;
}

.menu-menu li li a {
border:1px solid #004E98; border-top-width:0;
}
.menu-menu li li li.first a {
border:1px solid #004E98;
}
.menu-menu li {
background:#FFFFFF;
}
.menu-menu li li {
background:#FFFFFF;
}
.menu-menu li li li {
background:#FFFFFF;
}
.menu-menu li:hover, .menu-menu li.sfHover,
.menu-menu a:focus, .menu-menu a:hover, .menu-menu a:active {
background:#3366FF;
outline:0;
}

.menu-menu li li a, .menu-menu li li a:visited {
color:#000000;
}

.menu-menu li li a:hover, .menu-menu li li a:active, .menu-menu li li a:focus {
color: #FFFFFF;
}

/*** arrows **/
.menu-menu a.sf-with-ul {
padding-right:2.25em;
min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:absolute;
display:block;
right:.75em;
top:1.05em; /* IE6 only */
width:10px;
height:10px;
text-indent:-999em;
overflow:hidden;
background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top:.8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position:-10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.menu-menu ul .sf-sub-indicator { background-position:-10px 0; }
.menu-menu ul a > .sf-sub-indicator { background-position:0 0; }
/* apply hovers to modern browsers */
.menu-menu ul a:focus > .sf-sub-indicator,
.menu-menu ul a:hover > .sf-sub-indicator,
.menu-menu ul a:active > .sf-sub-indicator,
.menu-menu ul li:hover > a > .sf-sub-indicator,
.menu-menu ul li.sfHover > a > .sf-sub-indicator {
background-position:-10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
background:url('../images/shadow.png') no-repeat bottom right;
padding:0 8px 9px 0;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-topright:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
}
.sf-shadow ul.sf-shadow-off {
background:transparent;
}

<!--
body {
background-image: url('Images/realbg.gif');
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:90%;
max-width:1024px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

div#container {
width:90%;
height:100%;
margin: 0 auto;
text-align: left
}



div#header {
padding: 0 0 0 0;
margin: 0px;
height: 120px;
text-align:center;
vertical-align:middle;
background-color:#FFFFFF;

}


div#wrapper {
width: 100%;
background-image:url('Images/blue31.jpg');
background-repeat:repeat-x;
border-top-style:ridge;
border-bottom-style:none;
text-align:center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
/*added new id*/
div#wrapper2 {
width: 100%;
background-image:url('Images/blue31.jpg');
background-repeat:repeat-x;
border-top-style:ridge;
border-bottom-style:none;
text-align:center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

div#left {
background-color:#FFFFCC;
background-image:url('Images/leftcolumncorner.gif');
background-repeat:no-repeat;
width: 200px;
height:100%;
text-align:left;
padding: 15px 10px 25px 15px;
border-right-style:ridge;
border-right-color:#FFCC66;
margin-top: 1px;
float: left;
}

#left a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}

#left a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}
#left a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}

#left p {
line-height: 12px;
}

div#main {
background-color:#FFFFFF;
margin-top: 1px;
height:100%;
text-align:left;
margin-left: 230px; /*changed from 200px*/
margin-right: 212px; /*changed from 180px*/
line-height: 120%;
padding: 15px 45px 15px 45px;
}

#main p {
line-height:200%;
text-align:left;
}

#main a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}

#main a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}

#main a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}


div#right {
background-color:#FFFFCC;
background-image:url('Images/rightcolumncorner.gif');
background-position:right top;
background-repeat:no-repeat;
text-align:left;
width: 180px;
height:100%;
padding: 15px 10px 25px 15px;
margin-top: 1px;
float: right;
border-left-style:ridge;
border-left-color:#FFCC66;

}


div#footer {
padding: 0px;
margin: 0px;
font-family:Bookman Old Style;
font-size: 12px;
Color: #FFFFFF;
font-weight:bold;
border-top: thin solid #000000;
clear:both;
}
-->



updated HTML: (comments added to changes)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="Tue, 18 May 2010 18:59:14 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">

</head>
<body>

<div id="container">

<div id="header">
<img src="Images/SBFFLogoWebsite.gif" height="120" alt="Small Business Finance Forum" align="left">
<img src="Images/GroupFromAboveA.gif" height="120" align="right">
</div>

<div id="wrapper">

<ul class="menu-menu">
<li class="first"><a href="index.html">Home</a></li>
<li>
<a href="tools.html">Tools</a>
<ul>
<li class="first"><a href="budgeting.html">Budgeting</a></li>
<li><a href="capitalcredit.html">Capital & Credit</a></li>
<li><a href="cashflow.html">Cash Flow</a></li>
<li><a href="financials.html">Financials</a></li>
<li><a href="metrics.html">Metrics</a></li>
<li><a href="planning.html">Planning</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="riskmanagement.html">Risk Management</a></li>
<li><a href="strategy.html">Strategy</a></li>
<li><a href="tracking.html">Tracking</a></li>
<li><a href="valuation.html">Valuation</a></li>
</ul>
</li>
<li><a href="casestudies.html">Case Studies</a></li>

<li>
<a href="services.html">Services</a>
<ul>
<li class="first"><a href="consulting.html">Consulting</a></li>
<li><a href="speaker.html">Speaker</a></li>
</ul>
</li>
<li><a href="http://www.smallbusinessfinanceforum.com/blog">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
<!-- remove this </ul> -->

</div>

<div id="wrapper2">

<div id="left">
<p><a href="http://www.html"><img src="Images/bluebutton.gif" height="14" border="0"/> Home</a></p>
<p><a href="http://www.talentcapitalresource.com/contact.html"><img src="Images/bluebutton.gif" height="14" border="0"/> Contact</a></p>
</div>
<!-- moved up before right div -->
<div id="main">




Just need something to start

</div>


<div id="right">
<font size="3" face="Baskerville Old Face" color="#000080"><strong>We recommend </font></strong><br /><br />

</div>


</div>

<div id="footer">
<center>
<br />Small Business Finance Forum Copyright 2010
</div>

<!--</container>-->
</div>


</body>
</html>


Results:

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/ScreenShot024.jpg
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 1903103 Photo


Registered User
29 posts

David Wilson - you are my HERO! It works! Extra big thank you since you did this as a volunteer. :D How do you find the time? I especially appreciate the comments so I understand why and can do it myself next time.

Fe Pixie - Thanks for clarifying. I'm not sure how you have time to do it, but I sure am glad you do.

Padawan (read phonetically, some already nabbed Skywalker!)
Nicole Fende
http://www.smallbusinessfinanceforum.com
Growing Tomorrow's Profits
User 184085 Photo


Ambassador
1,707 posts

Thanks :-) I volunteer for this because I learn from the other Ambassadors and Advisors when I started, and want to continue the help.

Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 133269 Photo


Registered User
2,900 posts

u da maaan david :D

*points* kind fella aint he padawan :D

You'll find lots of helpful people here - just pop up a question when you have one and theres usually someone can help you out :)
Have fun
~ Fe Pixie ~

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.