Add the min-width:800px
to the navigation
class too, take a look to that fiddle.
min-width not working on any browser
Frage
I am trying to set min-width: 800px but it is not working, I have done exactly the same thing on other projects and it has worked fine, I have tried it on both chrome and ie but no difference. I have seen a lot of people have problems with this in ie but as it doesnt work in chrome either I am stuck.
Here is a trial of it working: http://zimxtrial.ukbigbuy.com/
HI have also made a fiddle:
Some of the JS isn't working as it should in the fiddle but I doubt that's important, it works on the my tests in browser so no worries.
I'll also include the CSS here:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
min-width: 800px;
}
.navigation {
width: calc(100% - 120px);
height: 50px;
margin: 0px 60px;
position: fixed;
background-color: #f27009;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 50px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#nav-center {
width: 100%;
height: 40px;
background-color: #f27009;
margin: 4px 0px;
text-align: center;
border-bottom: dashed 1px #000000;
border-top: dashed 1px #000000;
left: 70px;
margin-left: auto;
margin-right: auto;
}
#nav-center ul {
margin: 0;
}
#nav-center ul li {
list-style: none;
margin: 0 40px 0 0;
display: inline;
}
#nav-left {
width: 70px;
height: 60px;
background-image: url(images/banner_left.png);
margin: 0px 0px;
top: 0px;
left: 0px;
position: fixed;
}
#nav-right {
width: 70px;
height: 60px;
background-image: url(images/banner_right.png);
margin: 0px 0px;
top: 0px;
right: 0px;
position: fixed;
}
.active {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
line-height: 40px;
}
a {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #000000;
text-decoration: none;
line-height: 40px;
}
#home {
background-color: #FFFFFF;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#section1 {
background-color: #1899d6;
height: 100%;
width: 100%;
}
#section2 {
background-color: #CF0;
height: 100%;
width: 100%;
}
#section3 {
background-color: #ff0000;
height: 100%;
width: 100%;
}
Any help would be great.
Lösung
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow