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
Solved

Fix a line in my css box

Posted on 2006-06-30
7
287 Views
Last Modified: 2010-05-18
Hi,

If you see http://ezee.se/ee/dec31.htm
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:
http://ezee.se/ee/dec31_files/screen.css

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.

Thanks!
0
Comment
Question by:fab_man_007
7 Comments
 
LVL 10

Expert Comment

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

screen.css


/* 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

_____Jags.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17023649
and validate your html:  http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fezee.se%2Fee%2Fdec31.htm

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

Author Comment

by:fab_man_007
ID: 17027942
Hello,
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 CSS...so running that validator I have no idea of how to correct those errors, and I dont understand why html needs to be validated anyway...it shows up fine in FF and IE

Thanks!

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

Accepted Solution

by:
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.
   Incorrect:
   <ul>
       <li>some option</li>
       <ul>
           <li>some sub-option</li>
      </ul>
   </ul>

   Correct:
  <ul>
       <li>some option
          <ul>
              <li>some sub-option</li>
         </ul>
      </li>
   </ul>

 - 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.
0
 
LVL 2

Assisted Solution

by:mach-
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;}
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

860 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