Fix a line in my css box

Posted on 2006-06-30
Last Modified: 2010-05-18

If you see
you will see two menus, they both are pretty much the same, I am just irritated with one little line there...

look closer at the first one on the left and you will see just under "3. Three" the underline is missing so its not really a 'box', its the same with the second menu just under "7. Blah"

The CSS file can be found at:

I have very little knowledge about css and this is not my doing, its someone elses but i have to modify it.

Any tips too would be appreciated.

Question by:fab_man_007
LVL 10

Expert Comment

ID: 17021724
OK...Here is wat u need - replace your css with the below code.


/* CSS menymall */

h1 {font: 150% Verdana, Arial, Helvetica, sans-serif;color: #CCCCCC;}
#content{margin: 1em 1em 1em 1em; padding: 0; float: left;}

#menycontainer{ float: left; margin: 0em 0 0 0em; width: 17.8em; font: 100% Verdana, Helvetica, sans-serif;       border: 1px solid #666666; }
#meny{margin: 0; padding: 0; list-style-type: none; }
#meny a{display: block;      margin: 0; padding: 0.3em; background: #ccff00;      padding: 0.3em ;       text-decoration: none; height: 100%;  border: 1px solid #666666;  }
#meny ul{list-style-type: none;}
#meny ul a{margin: 0; padding: 0.3em; background: #ffffcc; border: 1px solid #666666; }      
#meny a:link{color: #ffffff; }
#meny a:visited{color: #ffffff;}
#meny a:hover{background: #ffff00;}
#meny a#current{font-weight: bold;}
#meny a#subcurrent{font-weight: bold;}

a:link {
      color: #333333;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
a:visited {
      color: #333333;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
      font-size: 10px;
td {  font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 10px}
p { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 10px}
body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      color: #000000;
      font-size: 10px;
      background-color: #FFFFFF;
div { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 10px}
table {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000}
a:hover {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #999999;
      text-decoration: none;
      font-weight: bolder;

a:active {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bolder;
      color: #333333;
      font-size: 10px;
      text-decoration: none;

form {
      font-family: Verdana;
      font-size: 10px;
      color: #666666;
      background-color: FFFFCC;
      border: none;
      font-style: normal;



Basically i replaced all your border-left and border-right attributes to just border.

....i still see something missing.

See if its fine with u

LVL 30

Expert Comment

ID: 17023649
and validate your html:

note that <ul> can only have <li> as direct child.

Author Comment

ID: 17027942
Thank you for replying.

@Jags, now it kind of looks even more funny...those lines which were blank before have real skinny lines, anyway to fix it so it has the same thick lines as the rest of the menu?

@Grand.., I have not written that code, I know very little about it, I would use a table if I had a choice to do what the previous guy did in running that validator I have no idea of how to correct those errors, and I dont understand why html needs to be validated shows up fine in FF and IE


(OT - I have increased the points by 50% )
LVL 17

Accepted Solution

mreuring earned 75 total points
ID: 17057392
The reasons for validating html are plenty. But the most compelling reason, specifically in your case, is that when your html is written improperly the browser will have to try and 'fix' it. As there's no rules governing this 'fix' behaviour, there's no way to predict how two seperate browsers will do it. The resulting html-pages usually look the same, yet sometims they don't. This could be because browser a decides to insert an extra element while browser b decides to stuff some content in a preceding element.

So, when you've got weird unexpected visual behaviour in a page where the html is 'broken' the best course of action is to start by validating the html. Correctly written html is much more consistent in the way it renders and many visual inconsistencies turn out to get solved just by doing this.

As for the validation errors in your specific situation:
 - document type does not allow element "UL" here; assuming missing "LI" start-tag
   Creating a submenu by adding a child UL element is fine, but you have to create that sub-menu from within a li-element, it can't be the direct child of another ul.
       <li>some option</li>
           <li>some sub-option</li>

       <li>some option
              <li>some sub-option</li>

 - ID "MENYCONTAINER" already defined
   An id is supposed to be a unique identifier. Unique in this case really does mean that only 1 element with that id can exist within the document. Use class instead if you like to use it to set the state of multiple elements. In CSS classes are referenced like this: .classname, instead of the id specifier: #identifier.

The second error is much less severe. The first error however is prone to generate browser inconsistencies and I recommend you solve it before attempting any css-patches.

Assisted Solution

mach- earned 75 total points
ID: 17112377
Just add this to add an extra line above the sub-list:

#meny ul{list-style-type: none; padding-top: 0; border-top: 1px solid #666666;}

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
svg images disappeared after editing 7 37
Bootstrap 3 and Angular 2 12 49
slider is moved too far too the to move back left? 4 36
Wrapper for APPs 9 28
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now