Navigations issues when zoom out or in

[bruizerbeans]

Hello, I am designing a site with a drop down menu. Its a version of the suckerfish dropdown. Anyway when I zoom in or out with the browser the contact links drops to the second line under the home link. Not sure why.

I validated my css and did not find any errors with my navigations.
Here is a link to my demo site http://www.appleheadwebdesign.com/demo/index.html
Here is my css

Code:

*{
margin:0;
padding: 0;
}

body {
background-color: #fff;

}

.pageWrapper {
background: url(../images/outerPageWrap.jpg) repeat-y top;
width: 970px;
margin: 0 auto;
}

.clear {
clear:both;
}

.pageContainer {
background: url(../images/bokeh1.png) repeat-y top;
width: 950px;
margin: 0 auto;
}

.logo {
margin: 10px 0 0 40px;
width: 400px;
}

/*Navigations*/
.navigation{

width: 440px;
margin: 25px 40px 0 0;
float: right;
clear: right;

}

#trans-nav {
list-style-type: none;
height: 35px;
padding: 0;
margin: 0 auto;}

#trans-nav li {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
float: left;
position: relative;
padding: 0;
line-height: 35px;
}

#trans-nav li:hover {
background-position: 0 -35px; }

#trans-nav li a {
display: block;
padding: 0 15px;
color: #4f7a2e;
text-decoration: none; }

#trans-nav li a:hover {
background: url(../images/navhover.png) repeat-x; }

#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 235px;
background: #ccff99;
list-style-type: none;
padding: 0;
margin: 0; }

#trans-nav li:hover ul {
opacity: 1; }

#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none; }

#trans-nav li:hover ul li {
height: 30px;
line-height: 30px; }

#trans-nav li ul li a {
background: #D3FFA8;}

#trans-nav li ul li a:hover {
background: url(../images/navhover.png) repeat-x;}

/*End Navigations*/

/*Nivo Slider*/
#slider {
position:relative;
background: url(../images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider {
position:relative;
margin:30px 30px 20px 30px;
border: solid 1px #C0C0C0;
}

#slider img {
position:absolute;
top:0px;
left:0px;
}
#slider a {
border:0;
}
/*End Nivo slider*/

.content{
margin: 40px 0 0 200px;
float: left;
clear: left;
width: 450px;
}

h2 {
font-family: ‘SouciSans’, sans-serif;
font-size: x-large;
margin: 0 50px;
color: #964b00;
width: 450px;
}

p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: lighter;
line-height: 24px;
color: #964b00;
text-align: justify;
width: 447px;
margin: 10px 35px;
}
/*sidebar*/

.sideBar {
width: 210px;
float: right;
clear: right;
margin: 60px 80px 0 0;
}

.sideBar p {
width: 175px;
padding: 15px;
background: url(../images/sidebarbg.png) repeat;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: lighter;
line-height: 24px;
color: #4f7a2e;
text-align:left;
}
.sideBar p a {
color:#4f7a2e;

}

.sideBar h2 {
font-family: ‘SouciSans’, sans-serif;
font-size: x-large;
margin: 0 50px;
color: #964b00;
}

p.copyRight {
float: left;
clear: left;
width: 300px;
font-size: 13px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #7ec959;
padding: 40px 20px 5px;

}

p.webDesigner {
float: right;
clear: right;
width: 250px;
font-size: 13px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #7ec959;
padding: 40px 20px 5px;

}
p.webDesigner a {
color:#4f7a2e;

}

.clear {
clear:both;
}

[Tcooper]

It’s simply because you have a fixed layout – it will only break on browsers that don’t support full page zoom, there just isn’t room for the text to go anywhere when you make it larger so it wraps.

[Author]

Posts