0

I am designing a website with the width of 1085px

now I am facing a problem every time on full width menu it works fine on Mozilla but when i use chrome and in opera the same menu's width is making it too large i am attaching a picture here of my menu you will notice that in firefox the width works fine but in chrome and opera it will increase the width i wanna know what i do wrong every time in full width menu how do i fix it please help me css code also added here

Problem of Menu Bar in different browsers
[img]http://i44.tinypic.com/oqxg07.jpg[/img]

Css code

nav{
text-align: center;
display:block;
margin:0 auto;
padding:0;

}
.menu_website {
padding:0;
width:1085px;
}
.menu_website ul {
display:inline-block;
width:100%;
background-color: #FE9711;
  background: -moz-linear-gradient(top, #FE9711 0%, #E17310 100%); 
  background: -webkit-linear-gradient(top, #FE9711 0%, #E17310 100%); 
  background: -ms-linear-gradient(top, #FE9711 0%, #E17310 100%); 
  background: linear-gradient(top, #FE9711 0%, #E17310 100%); 
}

.menu_website li{
list-style: none;
float: left;
position: relative;
height: 40px;

}

.menu_website>li{
background-color: #FE9711;
  background: -moz-linear-gradient(top, #FE9711 0%, #E17310 100%); 
  background: -webkit-linear-gradient(top, #FE9711 0%, #E17310 100%); 
  background: -ms-linear-gradient(top, #FE9711 0%, #E17310 100%); 
  background: linear-gradient(top, #FE9711 0%, #E17310 100%); 
border-left: 1px solid #ffa32b;
border-right: 1px solid #b05a0d;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; 
}

.menu_website li:first-child{
border-radius: 1px 0px 0px 1px;
border-left: none;
}

 .menu_website li:last-child{
border-radius: 0px 1px 1px 0px;
 border-right: none;
 }

.menu_website a{
display: block;
text-decoration: none;
color: white;
text-transform:uppercase;
padding: 0 25px;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
position: relative;
font-size: 13px;
font-weight:bold;
line-height: 40px;
}


.menu_website li:hover{
-webkit-box-shadow: inset 0 0 10px #470000;
-moz-box-shadow: inset 0 0 10px #470000;
box-shadow: inset 0 0 10px #470000;
background-color: #3f3f3f;
background-image: -webkit-linear-gradient(#565656, #373737);
background-image: -moz-linear-gradient(#565656, #373737);
background-image: -o-linear-gradient(#565656, #373737);
background-image: linear-gradient(#565656, #373737);
color:#fe5956;

}

.menu_website li:hover span:after{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}

ul.menu_website-hover{
visibility: hidden;
position: absolute;
top:100%;
opacity: 0;
height: 0;
margin-left:1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.menu_website li:hover .menu_website-hover{
visibility: visible;
height: 100%;
opacity: 1;
}

.menu_website-hover li{
height: 100%;
border-bottom: 1px solid #696969;
background-color: #2a2a2a;
border-left: none;
border-right: none;
}

.menu_website-hover li:hover{
background-image: -webkit-linear-gradient(#2a2a2a, #434343);
background-image: -moz-linear-gradient(#2a2a2a, #434343);
background-image: -o-linear-gradient(#2a2a2a, #434343);
background-image: linear-gradient(#2a2a2a, #434343);
box-shadow: none;
}

.menu_website-hover a{
color: white;
}

.menu_website a span:after{
content: "";
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid white;
position: absolute;
top: 30px;
right: 35px;

-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; 
}

.menu_website-hover li:first-child, .menu_website-hover li:last-child{
border-radius: 0;
}

.menu_website a:after {
    background: rgba(255,255,255,.07);
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}
2
Contributors
2
Replies
22
Views
4 Years
Discussion Span
Last Post by hallianonline
0

Without seeing the html along with it, preferrably in a working state, this may be difficult to pin point...

At a quick glance, you have a bunch of stuff absolutely positioned... could you be inadvertantly collapsing an element by removing it's content from the flow of the page?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.