I am building a website from a bought theme, and in FF and in Chrome it looks perfect.But,on IE9 in compatibility mode, i am having a big problem.
One menu item has dropdown, and on IE, that dropdown menu is moved bellow the next menu item, and it is very hard to click o it.I tried "playing" around with CSS navigation and menu setting, but no luck...
Can anyone help:
/* Mainmenu Styling */
#mainmenu{
width:680px;
margin:1px 0px 0px 0px;
float:left;
}
.navigation{
width:630px;
margin-top:38px;
padding-left:160px;
float:left;
list-style-type:none;
}
.navigation ul{
margin:0px;
padding:0px;
list-style-type:none;
position:left;
clear:both;
}
.navigation li{
list-style-type:none;
padding:0px;
margin:0px;
float:left;
z-index:100;
position:relative;
}
.navigation li a{
font-size:16px;
text-decoration:none;
color:#a7a6a6;
display:block;
padding:10px 30px 16px 8px;
float:left;
z-index:100;
margin-right:0px;
}
.navigation li.current a, .navigation li a:hover, .navigation li.current li a:hover{
text-decoration:none;
color: #d23a3b;
}
.navigation li.current li a{
text-decoration:none;
color:#a7a6a6;
}
.navigation li li{
margin:0 0 0px 0px;
padding:0px;
position:relative;
z-index:100;
}
.navigation ul{
display:none;
position:absolute;
top:45px;
width:159px;
padding-bottom:5px;
z-index:100;
background-color:#fafafa;
border-top:none;
border-bottom:1px solid #d3d3d3;
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
}
.navigation li ul a{
width:109px;
height:auto;
float:left;
padding:0px 15px 8px 15px;
font-size:14px;
color:#a7a6a6;
line-height:24px;
z-index:100;
text-decoration:none;
}
Link is : http://goo.gl/LHDtg
try the below css for desired IE version
.navigation ul {
background-color: #FAFAFA;
border-color: -moz-use-text-color #D3D3D3 #D3D3D3;
border-style: none solid solid;
border-width: medium 1px 1px;
display: none;
padding-bottom: 5px;
position: absolute;
top: 85px; /* in your website it is 45px but for IE i just tried 85px which work fine*/
width: 159px;
z-index: 100;
}
see image for demo: I tried it in IE8
Related
I might be going about this the wrong way, but what I'm trying to achieve is a list style horizental that links in with some js that changes the navigation from one tab to another. The tab headings should have a counter before the text within a css circle using radius and I've got this far.
What I can't seem to resolve is how to then place this circle within a box the same colour as the li text background and ensure it changes colour when hovered/selected.
Here's my code so far:
OL.evotab {
counter-reset:li;
list-style: none;
float:left;
width:100%;
padding:0px;
}
OL.evotab LI {
list-style:none;
position:relative;
display: inline;
float:left;
margin:0 0 6px 2em;
padding:4px 8px;
}
ol.evotab > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-radius:50%;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
OL.evotab LI A {
background-color: #f8f8f8;
color: #28343d;
text-decoration: none;
padding-top: 30px;
padding-left:20px;
padding-right:20px;
padding-bottom:30px;
border-bottom:5px solid #dfdfdf;
}
OL.evotab LI A.selected,
OL.evotab LI A:hover {
background-color: #f8f8f8;
color: #e51f38;
padding-top: 30px;
padding-bottom:30px;
border-bottom: 5px solid #e51f38;
}
OL.evotab LI A:focus {
outline: 0;
}
FIDDLE
Its a little difficult to see what you mean without any HTML....but have a look at the fiddle linked for an idea.
HTML
<a href='#'>This is an Item</a>
CSS:
a {
background:grey;
border:1px solid black;
display:inline-block;
padding:20px;
color:white;
text-decoration:none;
position:relative;
}
a:before {
content:'7';
color:black;
position:absolute;
display:inline-block;
background:yellow;
border:1px solid black;
border-radius: 999px;
left:-5px;
width:20px;
text-align:center;
line-height:20px;
height:20px;
}
a:hover, a:hover:before {
color:red;
}
I have created a nav menu myself for my website, I'm no expert but I think the menu turned out great ... I would like for my the menus to open a little slower then instant, maybe have a .5s transition ... I have tried to implement myself but I just don't seem to be able to figure it out .... I have created a jsfiddle to show my nav bar ... I was hoping to someone could show me how to had a transition to all the drop down menus if its possible ... Thank You
jsfiddle : http://jsfiddle.net/vRdEp/ (its a little broken on here)
my site : www.curious-howto.com
My css:
ul#navitemul {
border-radius: 0px 20px 20px 20px;
margin:0px!important;
width:500px;
}
.belownav {
top:0px;
left:183px;
position:absolute;
z-index:100;
box-shadow: 0 0 10px #000 inset;
border-radius: 5px 0px 0px 5px;
padding:20px!important;
background:#282828!important;
}
.navitem a {
margin-right: 10px;
border: 1px solid #424242!important;
text-overflow:ellipsis;
display:block;
overflow:hidden;
border-radius:5px;
width:200px!important;
padding:0px!important;
float:left;
height:40px;
background:#424242!important;
}
.navitem a:hover {
border:1px solid #585858!important;
background:#000!important;
}
img.fl {
float:left;
}
span.marleft {
letter-spacing:1px;
font-size:12px!important;
text-decoration:none;
color:white!important;
margin-left:15px!important;
line-height:38px;
}
li.marright{
float:left!important;
margin-bottom:10px!important;
margin-right:10px!important;
}
.ontop{
color:white;
font-size:28px!important;
margin-bottom:20px!important
}
ul#loginmenu {
border-radius:0px 0px 30px 30px;
z-index:1000;
left:200px;
width:500px!important;
overflow:auto;
max-height:600px;
left:-100px!important;
}
li.logo {
margin:0px!important;
line-height:10px!important;
border-radius: 30px 0px 0px 0px;
padding:10px 40px 10px 40px!important
}
span#navlogo {
font-size:20px;
}
#menu{
position:relative;
top:10px;
width:80%;
max-width:750px;
min-width:660px;
height:47px;
border-radius: 30px 30px 0px 0px;
background-color:#172322;
margin:0px;
padding:0px;
list-style:none;
color:#fff;
display:inline-block;
float:right;
z-index:1000;
}
#menu a {
color:#fff;
text-decoration:none;
}
#menu > li {
transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
/* Safari */padding: 13px 0px;
background:#172322 none repeat scroll 0 0;
cursor:pointer;
float:left;
position:relative;
}
#menu > li a:hover {
color:#B0D730;
}
#menu .logo {
background-color: #7cb7e3;
width:87px;
padding:0px;
}
/* sub-menus*/
#menu ul {
padding:0px;
margin:0px;
display:block;
display:inline;
}
#menu li ul {
position:absolute;
left:-24px;
top:0px;
margin-top:45px;
line-height:16px;
background-color:#172322;
color:#0395CC;
/* for IE */ display:none;
}
#menu li:hover ul {
display:block;
}
#menu li ul li{
display:block;
margin:5px 20px;
padding: 5px 0px;
list-style-type:none;
}
#menu li ul li:first-child {
border-top: none;
}
#menu li ul li a {
display:block;
color:#0395CC;
}
#menu li ul li a:hover {
color:#7FCDFE;
}
/* main submenu */
#menu #main li {
text-align:center;
margin:10px 10px 10px 10px!important
}
#menu #main {
border-radius: 0px 0px 30px 30px;
width:167px;
left:0px;
top:-20px;
padding-top:20px;
background-color:#7cb7e3;
color:#fff;
z-index:999;
}
/* search */
.searchContainer div {
background-color:#fff;
display:inline;
padding:5px;
}
.searchContainer input[type="text"] {
border:none;
}
.searchContainer ul {
vertical-align:middle;
}
The problem is that transitions animate a property when that property changes. For example, if I had a div that was 100px wide, then added a class to it that switched it to be 300px wide, you could set transition: width 3s and it would grow over that 3 second period.
In your case, all that's changing is display:block / display:hidden
To get it to transition, you'll need to change things so that, rather than hiding it with display:hidden, you're hiding it by shrinking it to be really tiny and growing, or changing the opacity, etc.
I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
display:inline-block;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:33%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.nav a:hover {
background:#A26A42;
border:none;
width:32%
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
End of CSS
<ul class="nav">
<li>Search</li>
<li>Legend</li>
<li>Info</li>
</ul>
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>
Thank you for any help.
I'd rework your CSS like this jsFiddle example.
CSS
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
Try this:
* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)
.nav li {
display:block;
float:left;
width: 33%;
}
.nav li a {
display:block;
text-align: center;
}
Fiddle: http://jsfiddle.net/kboucher/duaa6/
On "hover" you make the menu items narrower than normal. Plus you remove ther border which will narrow it even more. Also, It looks like you are using a 1px border left and right for spacing. If this is the case use margin instead. Use jsfiddle to practice.
Try this:
ul.nav {
width:100%;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:32%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
margin-left: 1px;
background: #62564A;
}
.nav a:hover {
background:#A26A42;
}
ul.nav li:first-child a{
margin-left: 0;
}
http://jsfiddle.net/mVv75/4/
menu in webpage when zoomed in and out doesnt stay fixed to header image shown in figure:
the css script for this one is as follows
#navmenu{
z-index:99999;
margin-top:40px;
position:absolute;
width:100%;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
float:left;
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
font-size:16px;
color:#000000;
}
#navMenu li a{
height:15px;
float:left; display:inline;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-weight:900;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
#navmenu li.item1{background-image: url(img/about.JPG);}
#navmenu li a:hover {
color:33CCFF;
}
what is the solution to this?
if you use position:fixed; then it will not move when scrolled which is what i assume you are looking for, also when zoomed same thing, it will stay position fixed to where you want it , add maybe top:0; left:0; depending on where you want this to be positioned at-- maybe try adding some html ? other than that this is about all i can help you with
#navmenu{
z-index:99999;
margin-top:40px;
position:fixed;
width:100%;
top:0;
left:0;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
top:0;
left:0;
font-size:16px;
color:#000000;
}
#navMenu li a{
position:fixed;
height:15px;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
what have I done wrong that in IE the menu doesnt work as in other browsers it does work.
In IE the menu buttons are vertical instead of horizontal.
Link to a test subdomain : http://test.beterlopenwinkel.nl/leiderdorp.php
And I cant get rid of that list style in IE neither.
CSS:
#navigation{
width:200px;
background-image: -moz-linear-gradient(left, orange, #f3980b); /* FF3.6 */
background-color:orange;
border-radius:8px;
font-size:16px;
font-weight:bold;
text-align:center;
width:1000px;
height:30px;
}
#navigation ul{
margin:0px;
padding:0px;
}
#navigation ul li{
display:inline;
list-style-type:none ;
padding:5px 10px 5px 10px; //dropmenupadding
margin-left:15px;
position:relative;
}
#navigation li a{
color:#fff;
text-decoration:none;
padding:5px 10px 5px 10px;
display:inline;
}
#navigation li a:hover{
text-decoration:none;
//background-color:orange;
//border-radius:15px;
//border:solid 2px #333;
color:#333;
}
#navigation li ul{ //dropmenu
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:35px;
background-color:orange;
border-radius:15px;
box-shadow:0px 0px 5px #000;
}
#navigation li:hover ul{
display:block;
width:160px;
}
#navigation li li{
list-style:none;
display:list-item;
}
#navigation li li a{
color:#fff;
text-decoration:none;
padding:10px;
}
#navigation li li a:hover{
text-decoration:none;
}
For starters, you might want to make sure your HTML is valid. Check the W3 Validator here:
http://validator.w3.org/check?uri=http%3A%2F%2Ftest.beterlopenwinkel.nl%2Fleiderdorp.php&charset=%28detect+automatically%29&doctype=Inline&group=0
Invalid markup is the #1 reason why CSS behaves in unexpected manners in different browsers (not just IE)
First, you need to fix the HTML:
<ul>
<li>Solidus</li>
<li>Finn Comfort</li>
<li>Think!</li>
<li>Footnotes</li>
<li>MBT</li>
<li>Vabeene</li>
<li>Meindl</li>
<li>Stadler</li>
<li>Fit Flop</li>
<li>Durea</li>
<li>Van Lier</li>
<li>Schneider</li>
</li> **THE LI SHOULD BE CLOSED AFTER THE UL, LIKE YOU DID FOR OTHER SUBMENUs**
</ul>