Currently, I am in the process of designing a webpage that features a logo and a menu in the header section. However, I have noticed an issue where, upon zooming in or out, some of the menu items shift to a second row instead of remaining on a single row as intended. Interestingly, this problem seems to only occur in Chrome and not in Firefox.
To provide a visual representation of the problem, I have extracted a portion of my code. The HTML and CSS snippet below generates a blue box with 8 menu items inside it. When I adjust the zoom level in Firefox, all 8 menu items consistently stay on a single row, regardless of the level of zoom. On the other hand, when I zoom out multiple times in Chrome, occasionally the last menu item will unexpectedly move to the second row. It appears that the width of the row of menu items is fluctuating in relation to the width of the menu box, unlike in Firefox where the width ratio remains consistent.
If you want to get a clear understanding of the issue, I recommend viewing the following code in both Chrome and Firefox, and experimenting with zooming in and out to observe the discrepancy.
My goal is to replicate the seamless behavior observed in Firefox within Chrome. Do you have any suggestions on how I can accomplish this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#header {
width: 1000px;
margin: 0 auto;
height: 96px;
position: relative;
background: blue;
}
#menu {
display: block;
position: absolute;
left: 119px;
}
#menu li {
display: block;
float: left;
padding: 0 8px 0 14px;
text-transform: uppercase;
letter-spacing: -1px;
font: 14px/27px Arial, Helvetica, sans-serif;
background-color: transparent;
}
</style>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
<li>menu item 5</li>
<li>menu item 6</li>
<li>menu item 7</li>
<li>menu item 8</li>
</ul>
</div>
</div>
</body>
</html>