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

x
?
Solved

CSS Horizontal separator line in drop-down/up menu

Posted on 2006-06-28
4
Medium Priority
?
3,240 Views
Last Modified: 2008-02-01
Hi Experts.  I need to create red dividing / separating line between <li> items in my menu.  If you view http://www.ideascapes.net/temp/final2.html in Firefox, hover over any menu item and the drop-up list looks exactly as I want it to, without the red line.  It definitely doesn't look right when viewed in IE.  I can't seem to get heights/line-heights correct for the IE stylesheet, much less figure out what happens when I add a separating line (regardless of browser).  Menu item "Practices" has an example of what I'm trying to achieve, just not totally correct.  Line should be red, 1px, cover 50% of available area (roughly 44px) and appear above and below each <li>.  Help would be greatly appreciated.  Apologies in advance for the ugly CSS.
0
Comment
Question by:Maudelle
[X]
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
  • 2
  • 2
4 Comments
 

Author Comment

by:Maudelle
ID: 17010192
Ok, I managed to get Firefox looking exactly the way I want, except for the red line at the top of each fly-up where it's on a red background.  If it goes up far enough to reach the white background, it's perfect.

I'm still having problems with IE.  Source if available at http://www.ideascapes.net/temp/final.html

Code samples below:

(separator line, read by all browsers)
#divider {
position:relative;
left:22px;
width:44px;
border-bottom: 1px solid red;
height: 1px;
font-size: 1px;
line-height: 1px;
}

CSS Rules for IE browsers:

.menu ul li a:hover {
color:red;
font-weight:bold;
background:#fff;
font-size:10pt;
}

.menu ul li a:hover ul {
display:block;
position:absolute;
bottom:36px;
left:0;
font-family:Arial, Helvetica, sans-serif;
border-right:2px solid white;
line-height:2px;
}

.menu ul li a:hover ul li {
display:block;
background:#fff;
color:#000;
width:89px;
clear: both;
left: 0px;
height:17px;
margin:0px;
padding:0px;
}

.menu ul li a:hover ul li a {
display:block;
background:#fff;
color:black;
width:101%;
font-size:10px;
line-height:2px;
font-weight:normal;
}

.menu ul li a:hover ul li a:hover {
background:#fff;
color:red;
font-weight:bold;
font-size:10px;
}

CSS Rules for non-IE browsers:

.menu ul li:hover a {
color:red;
font-weight:bold;
font-size:10pt;
background:#fff;
}

.menu ul li:hover ul {
display:block;
position:absolute;
bottom:38px;
left:0;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
line-height:2px;
}

.menu ul li:hover ul li a.hide {
background:#fff;
color:#000;
}

.menu ul li:hover ul li {
display:block;
background:#fff;
color:#000;
width:89px;
height:17px;
clear:both;
left:0px;
margin:0px;
padding:0px;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#fff;
color:#000;
width:101%;
font-size:11px;
font-weight:normal;
line-height:2px;
z-index:20;
}

.menu ul li:hover ul li a:hover {
background: #fff;
color: red;
font-weight:bold;
font-size:11px;
white-space:nowrap;
overflow:visible;
}
0
 
LVL 2

Expert Comment

by:sandylaw
ID: 17019101
Getting 404 page when trying to view your example.
0
 

Author Comment

by:Maudelle
ID: 17043786
Sorry, I had given up on getting an answer here.  Link is now at http://www.ideascapes.net/fiderion/preview/default.html.  I managed to get it to work by using 3 div's to create the lines (1 white border line left, 1 red border line in the center, 1 white border line right).  This of course makes the code not validate because the id is used more than once on the page.  Would greatly appreciate it if you could help with a class for use on these elements
0
 
LVL 2

Accepted Solution

by:
sandylaw earned 1500 total points
ID: 17045749
I took what you had and did the following - this isn't complete, but just a suggestion:

(in the html - i've removed all extra divs and styles, replacing it with a horizontal line):

        <UL>
          <LI><A
          href="http://www.ideascapes.net/fiderion/preview/default.html">Placements</A>
              <hr class="redline" />
          </LI>
          <LI><A
          href="http://www.ideascapes.net/fiderion/preview/default.html">Testimonials</A>
              <hr class="redline" />
          </LI>
          <LI><A
          href="http://www.ideascapes.net/fiderion/preview/default.html">Clients</A>
              <hr class="redline" />
          </LI>
        </UL>

in the css:

hr.redline {
      PADDING: 0px;
      MARGIN: 0px;
      color: #e31836;
      background-color: #e31836;
      width: 45px;
      height: 1px;
}


I know it the spacing is not exactly right yet, I didn't have much time to work with it, but you can play with the extra whitespace/padding around the <hr/> and the other tags surrounding.  I've only used the IE css, didn't have a chance to work the other css.

Hope it's something in the right direction.

Oh...one other thing.  I took a look at your code - why didn't you just change all your ids to classes?  The ones you have existing (that you have in your div tags)?  Probably less work for you and would validate.
0

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

715 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