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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 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

10 Experts available now in Live!

Get 1:1 Help Now