Databases
StackOverflow2013
Postsdbo
POCSS Menu working in Chrome, not in Firefox
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Menu working in Chrome, not in Firefox
    primarykey
    data
    text
    <p>I'm trying to rebuild a menu in CSS, first time, so excuse any newbie errors.</p> <p>Test page is located here: <a href="http://michaelrichlaw.com/legal.html" rel="nofollow">http://michaelrichlaw.com/legal.html</a></p> <p>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.</p> <p>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.</p> <p><strong>HTML</strong></p> <pre><code>&lt;ul class="menu"&gt; &lt;li&gt;&lt;a href="index.html" target="_self" class="menu_link"&gt;HOME&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="profile.html" target="_self" class="menu_link"&gt;ATTORNEY PROFILE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="testimonials.html" target="_self" class="menu_link"&gt;TESTIMONIALS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="policy.html" target="_self" class="menu_link"&gt;INITIAL CONSULTATION POLICY&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="resources.html" target="_self" class="menu_link"&gt;WEB RESOURCES&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="legal.html" target="_self" class="menu_link"&gt;LEGAL&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="children_and_family.html" target="_self" class="menu_link"&gt;CHILDREN AND FAMILY&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="special_education.html" target="_self" class="menu_link"&gt;SPECIAL EDUCATION&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="adoption.html" target="_self" class="menu_link"&gt;ADOPTION&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="alternative_dispute_resolution_and_restorative_justice.html" target="_self" class="menu_link"&gt;ALTERNATIVE DISPUTE RESOLUTION AND RESTORATIVE JUSTICE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="government.html" target="_self" class="menu_link"&gt;GOVERNMENT&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="homeschooling.html" target="_self" class="menu_link"&gt;HOMESCHOOLING&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="http://www.michaelrichlaw.blogspot.com/" target="_self" class="menu_link"&gt;ATTORNEY'S BLOG&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html" target="_self" class="menu_link"&gt;CONTACT&lt;/a&gt;&lt;/li&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code> &lt;style&gt; 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; --&gt; 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;} &lt;/style&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USuser2961012
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS Menu working in Chrome, not in Firefox
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS Menu working in Chrome, not in Firefox
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload