CODEWITHSUNDEEP
cssmenucross-browser
user2961012
user2961012

Reputation: 21

CSS Menu working in Chrome, not in Firefox

I'm trying to rebuild a menu in CSS, first time, so excuse any newbie errors.

Test page is located here: http://michaelrichlaw.com/legal.html

The main challenge is that while I can get it to line up in Chrome or Firefox by editing the padding in ul.menu, I can't get it to line up in both.

The secondary challenge is adding a white divider line in betweeen the the menu items. I've only had luck adding a border to the right of all of them (of which I don't need a line to the right of the last menu item.

HTML

<ul class="menu">
  <li><a href="index.html" target="_self" class="menu_link">HOME</a></li>
  <li><a href="profile.html" target="_self" class="menu_link">ATTORNEY PROFILE</a></li>
  <li><a href="testimonials.html" target="_self" class="menu_link">TESTIMONIALS</a></li>
  <li><a href="policy.html" target="_self" class="menu_link">INITIAL CONSULTATION POLICY</a></li>
  <li>
    <a href="resources.html" target="_self" class="menu_link">WEB RESOURCES</a>
    <ul>
      <li><a href="legal.html" target="_self" class="menu_link">LEGAL</a></li>
      <li><a href="children_and_family.html" target="_self" class="menu_link">CHILDREN AND FAMILY</a></li>
      <li><a href="special_education.html" target="_self" class="menu_link">SPECIAL EDUCATION</a></li>
      <li><a href="adoption.html" target="_self" class="menu_link">ADOPTION</a></li>
      <li><a href="alternative_dispute_resolution_and_restorative_justice.html" target="_self" class="menu_link">ALTERNATIVE DISPUTE RESOLUTION AND RESTORATIVE JUSTICE</a></li>
      <li><a href="government.html" target="_self" class="menu_link">GOVERNMENT</a></li>
      <li><a href="homeschooling.html" target="_self" class="menu_link">HOMESCHOOLING</a></li>
    </ul>
  </li>
  <li><a href="http://www.michaelrichlaw.blogspot.com/" target="_self" class="menu_link">ATTORNEY'S BLOG</a></li>  
  <li><a href="contact.html" target="_self" class="menu_link">CONTACT</a></li>

CSS

    <style>
ul.menu {
  text-align: left;
  display: inline-block;
  margin: 0;
  padding: 0px 23px 0px 23px;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  background: #6e84ad;
}
ul.menu li {
  font: bold 12px/18px serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 10px 10px;
  background: #fff;
-->  border-right: 1px solid white;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background: #6e84ad;
}
ul.menu li:hover {
  background: #555;
  color: #fff;
}
ul.menu li ul {
  padding: 0;
  position: absolute;
  top: 38px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul.menu li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul.menu li ul li:hover { background: #666; }
ul.menu li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.horizontal {  }

a.menu_link:link {text-decoration:none;}
a.menu_link:visited {text-decoration:none;}
a.menu_link:hover {text-decoration:underline;}
a.menu_link:active {text-decoration:underline;}

a.menu_link:link {color:#FFFFFF;}      
a.menu_link:visited {color:#FFFFFF;}  
a.menu_link:hover {color:#FFFFFF;}  
a.menu_link:active {color:#FFFFFF;}  
</style>

Upvotes: 2

Views: 656

Answers (3)

Szymon
Szymon

Reputation: 1290

First anwser is I think so:

Reset your options, because all browsers start from other point: The best way is to use reset css file: http://meyerweb.com/eric/tools/css/reset/

*{
   margin: 0;
   padding: 0;
}

I think your second ask is about something like that.

Add divider and remove it from last element:

ul.menu li{
   border-right: 1px solid white;
}
ul.menu li:last-child{
   border-right: none;
}

or other way:

ul.menu li{
   border-left: 1px solid white;
}
ul.menu li:first-child{
   border-right: none;
}

or use background, but the concept is the same

ul.menu li{
   background-image: url("yourImage.jpg");
   background-position: left center;
}
ul.menu li:first-child{
   background-image: none;
}

EDIT: working example for you EXAMPLE

Upvotes: 3

WOUNDEDStevenJones
WOUNDEDStevenJones

Reputation: 5315

@Szymon's answer is one way to do the dividers. Another way I've seen is:

.divider {
    height:100%;
    width: 1px;
    background-color: #fff;
}

and then your HTML is just:

<ul>
    <li>...</li>
    <li class="divider"></li>
    <li>...</li>
    <li class="divider"></li>
    <li>...</li>
    <li class="divider"></li>
    <li>...</li>
</ul>

Upvotes: 0

Ricky Stam
Ricky Stam

Reputation: 2126

You might need to consider using a CSS reseter if you're not doing that already.

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Have a look here: http://meyerweb.com/eric/tools/css/reset/

Upvotes: 0

Related Questions