CSS div shrinks on zoom out - html

Question

I am using a div for my site's breadcrumbs. It remains a constant size on the actual size of browser window and on zoom in. But on zoom out the div is shrinking.
This is the code am using. Do I require an edit in it somewhere?
<style>
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Lucida Sans Unicode;
text-align: center;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 11px 0 11px 55px;
background: #327ea4; /* fallback color */
background: #327ea4;
position: relative;
display: block;
float: left;
width: 15.12em;
/*width: 15.1185em;*/
cursor: default;
border-top-left-radius: .4em;
pointer-events: none;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #327ea4;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 30px;
}
.breadcrumb li:nth-child(2) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(2) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(3) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(3) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(4) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(4) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default; }
.breadcrumb li:last-child a {
/*background: white !important;*/
/*color: black;*/
pointer-events: none;
cursor: default;
border-top-right-radius: .4em;
}
.breadcrumb li:last-child a:after { border: 0; }
</style>
<div style="width:75em;" oncontextmenu="return false" >
<ul class="breadcrumb">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
</div>
Thanks in advance.

Answer 1

when you define the height or width of an element in EM's, like in the following snippet...
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 11px 0 11px 55px;
background: #327ea4;
background: #327ea4;
position: relative;
display: block;
float: left;
width: 15.12em; /* <-- RIGHT HERE */
cursor: default;
border-top-left-radius: .4em;
pointer-events: none;
}
... you're actually binding the the size of the element to the font-size for that element.
When you increase the browser "zoom", all that's happening is in the font size is being increased (in pixels).
Example:
font-size: 10px, therefore width: 2em == width: 20px.
Zoom (increase font-size)
font-size: 12px, therefore width: 2em == width: 24px.