Databases
StackOverflow2013
Postsdbo
POHorizontal menu vertically and horizontally aligned with mouseover effect, how to create a crossbrowser solution?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHorizontal menu vertically and horizontally aligned with mouseover effect, how to create a crossbrowser solution?
    primarykey
    data
    text
    <p>I'm trying to make an horizontal menu, vertically and horizontally aligned.</p> <p>I'm actually using <ul> tags, and it looks exactly as I want in firefox. However, this is the only browser where it is rendered correctly.</p> <ul> <li>In internet explorer 9, the background that appears when I mouse over on an item, is moved 1 px upper, over the black line.</li> <li>In chrome, the li element is 20px high instead of 16 like on firefox, moving the menu a little lower</li> <li>In safari and opera I have the same chrome problem.</li> </ul> <p>Notice that opera, safari and chrome also have a problem where my separator is 3px high and 1px large, while on firefox I can visualize it correctly.</p> <p>I don't know really why, but because I lost 2 nights behind this problem I think I need definitely some help.</p> <p>Here is the situation with firefox (you can click on images to zoom in):</p> <p><a href="http://dl.dropbox.com/u/762638/Files/Images/Screenshots/fddshots/1330234846.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tNiMr.jpg" alt="Firefox situation"></a></p> <p>While here you can see Chrome situation (webkit in general):</p> <p><a href="http://dl.dropbox.com/u/762638/Files/Images/Screenshots/fddshots/1330235513.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gAaMI.jpg" alt="Webkit situation"></a></p> <p>The <strong>css</strong> for the menu is this:</p> <pre><code>#menu { bottom: 111px; height: 54px; width: 100%; top: auto; } #menu-bar-top, #menu nav { background-repeat: repeat-x; width: inherit; } #menu-bar-top { background-image: url(../../img/Layouts/default/Hr-bottom.png); background-color: transparent; border-style: none; height: 18px; } #menu nav { background-image: url(../../img/Layouts/default/Menu-background.png); height: 36px; } #menu nav div { text-align: center; height: inherit; margin: 0; } #menu nav ul { list-style-type: none; font-family: Ethnocentric; font-size: 1.2em; padding: 0; height: inherit; margin: 0; color: white; } #menu nav ul li { position: relative; top: 10px; display: inline; padding: 0; margin: 0; } #menu nav ul li.menu-separator { background-position: center center; background-repeat: no-repeat; background-image: url(../../img/Layouts/default/Menu-separator.png); font-size: 1px; } #menu nav ul li a { text-decoration: none; padding: 10px 10px 8px 10px; margin: 0 -5px; color: white; } #menu nav ul li a:hover { background-position: 0px 0px; background-repeat: repeat-x; background-image: url(../../img/Layouts/default/Menu-background-hover-2.png); } </code></pre> <p>While <strong>html</strong> can be found here:</p> <pre><code>&lt;section id="menu"&gt; &lt;hr id="menu-bar-top" /&gt; &lt;nav&gt; &lt;div&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="menu-separator"&gt;&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Lavori svolti&lt;/a&gt;&lt;/li&gt; &lt;li class="menu-separator"&gt;&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Balbo e consorzi&lt;/a&gt;&lt;/li&gt; &lt;li class="menu-separator"&gt;&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Ciao&lt;/a&gt;&lt;/li&gt; &lt;li class="menu-separator"&gt;&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Etc...&lt;/a&gt;&lt;/li&gt; &lt;li class="menu-separator"&gt;&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Etc...&lt;/a&gt;&lt;/li&gt; &lt;li class="menu-separator"&gt;&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Etc...&lt;/a&gt;&lt;/li&gt; &lt;!-- ... other Etcs ...--&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/nav&gt; &lt;/section&gt; </code></pre> <p>Because I think <strong>ul</strong> is creating me more problems than it should, I'm ok with changing html markup (notice that is html5), doesn't matter if it feels a bit incorrect (like using divs and spans only). What I really need, is a crossbrowser solution to this and any suggestion is appreciated. I don't need Ie6 support, I'm ok with IE9 and lasterversion of chrome, opera, safari, firefox.</p> <p>Notice that the background of my menu and the background of the mouseover effect are both gradients, so I can't just use a color.</p> <p>Thanks for any suggestion, hope anyone can help me with this because I can't really solve the problem and I would like to avoid various css per browser.</p> <p><strong>Edit 1:</strong> I don't get why I can't make the separator height what I want, I put text inside but definitely doesn't fit the size I need, it's an inline element but I can't put a block element inside an inline element :\</p> <p><strong>Edit 2:</strong> Ok I have uploaded the whole webpage with graphics, I didn't create a JSFiddle at the moment but you can see the webpage and download it as a ZIP file:</p> <li><a href="http://dl.dropbox.com/u/762638/Files/Documents/Work/Setin/webpage/index.html" rel="nofollow noreferrer">View the webpage</a></li> <li><a href="http://dl.dropbox.com/u/762638/Files/Documents/Work/Setin/SetinHomepage.zip" rel="nofollow noreferrer">Download the webpage</a> (if you don't trust me simply download the otherone from the browser)</li> <li><a href="http://jsfiddle.net/FireDragonDoL/R5nuk/6/" rel="nofollow noreferrer">JSFiddle</a></li> </ul> <p><strong>Edit 3:</strong> Added the JS Fiddle, however I can't make font works there</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMilap
    1. USFire-Dragon-DoL
    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. POHorizontal menu vertically and horizontally aligned with mouseover effect, how to create a crossbrowser solution?
      1. USFire-Dragon-DoL
      1. VTBountyStart
    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