StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POEqual Width Menu Items Generated Dynamically and Browser Compliant
text
Body
copied!<p>I am creating a navigation menu where each menu item needs to be equal width, out of total width of 970px. The amount of items will be dynamic (Sometimes 6, 7 or 5). The main issue I am having is that my current method of doing it:</p> <pre><code>$(document).ready(function () { // Navigation Tab Width Calculation var nCnt = $("#nav > li").length; var navConstraint = 970 - (nCnt - 1); var nWidth = navConstraint / nCnt; //// Sets Distributed Width of items $("#nav > li > a").css({ "width": nWidth + "px" }); //// Sets Width of ul in submenus $("#nav ul").css({ "width": nWidth + "px" }); //// Sets Width of li in submenus $("#nav ul li").css({ "width": nWidth + "px" }); //// Sets Width of a tags in submenus width an adjustment for padding $("#nav ul li a").css({ "width": nWidth - 10 + "px" }); /// Width Fixes for first and last nav elements $("#nav > li:first").css({ "margin-left": "0px" }); //// Fixes the last item to fit the stock image width, by browser if necessary var lastOffset = 1; $("#nav > li a:last").width(nWidth - lastOffset); //// Adds Vertical Centering for Menu Items $("#nav").children("li").each(function () { var nh = ($(this).find("a").find(".navText").height()); if (nh < 20) { $(this).find(".navTextPadder").height(11); } else { $(this).find(".navTextPadder").height(7); } }); </code></pre> <p>The problem I run into is that IE browsers don't handle the widths as well, not sure if they can't handle decimal widths or not but it is shorter than in FF which is pretty damn exact. Is there a better way to do this?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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