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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

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…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 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