Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Fix a line in my css box

Posted on 2006-06-30
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 300 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 300 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

704 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