I am creating a rounded corners tabs, that works fine in IE9, Mozilla and Chrome, but not in IE7/IE8.
Here is the code:
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
</ul>
</div>
</div>
#navbar {}
#holder {
border-bottom:1px solid #000;
overflow:hidden;
}
#navbar #holder ul {
margin:0;
padding:0;
list-style:none;
margin-top:15px;
}
#navbar #holder ul li { }
#navbar #holder ul li a {
text-decoration:none;
float:left;
margin-right:5px;
border:1px solid #000;
padding:15px;
text-align:center;
width:90px;
border-bottom:none;
display:block;
behavior:url(border-radius.htc);
border-radius:5px 5px 0 0;
}
#navbar #holder ul li a:hover {
background:#C09;
color:#fff;
}
Can you please let me know the code so that it works for IE7/IE8 as well?
Use jquery corner , it will work on all major browser
http://jquery.malsup.com/corner/
You can even configure the corners the way you like!!
IE 7/8 do not support border-radius. I hear IE9 does though.
This site contains a hack for getting rounded borders in IE7/8 though: http://dimox.net/cross-browser-border-radius-rounded-corners/ . You'll need to download border-radius.htc and put the following code in your CSS:
.rounded-corners {
behavior: url(http://yoursite.com/border-radius.htc);
}
There are following solutions :
CSSPie (http://css3pie.com/ but its compressed js file is 40 KB in size)
There is another solution using htc file for IE
behavior: url(http://yoursite.com/border-radius.htc);
(almost 40 KB of size)
The guide can be found here http://dimox.net/cross-browser-border-radius-rounded-corners/
Another solution that I personally recommend is :
jquery.corner.js (http://jquery.malsup.com/corner/)
It's uncompressed js file is 10 KB in size.
border radius supported ie-7, ie-8, ie-9 via javascript check this tutorial how to show border radius in ie http://davidwalsh.name/css-rounded-corners
The Internet Explorer supports the CSS border-radius property natively not until version 9. For lower version of IE, check the jQuery plugin kvijayhari mentioned, jQuery Corner.
Related
How to click the navicon image in mobile phone (not hover) and it will show up a small container which has links. Here are my codings..
HTML
<div id="nav">
<ul class="menu">
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
</ul>
<img src="nav.png">
<div class="navimage">
<img src="twitter.png">
<img src="facebook.png">
</div>
</div>
CSS
#nav {
height:70px;
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
max-width:95%;
margin:0 auto;
}
#nav-icon img {
display:none;
}
.menu {
float:left;
width:70%;
margin:0 auto;
}
.menu li {
display:inline;
}
.menu a {
padding:15px;
margin:15px 0;
display:inline-block;
text-align:center;
}
.menu a:hover {
color:#DEB887;
}
#nav a:hover {
text-decoration:none;
}
.navimage {
float:right;
margin:20px 0;
width:30%;
}
.navimage img {
width:30px;
height:30px;
margin:0 2px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
float:right;
}
RESPONSIVE CSS
#media only screen and (min-width: 480px) and (max-width: 764px) {
#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
display:none;
position:absolute;
padding:15px;
background:#fff;
border: 3px solid #DEB887;
left:30px;
top:50px;
width:30%;
border-radius:0 0 3px 3px;
z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}
Here is JSFIDDLE to check it out. The problem is I hover nav div everywhere and it shows menu. What I want is to click the navicon image and it will appear menu? Any ideas?
Thanks
You need a small bit of jQuery, which means including the library in your head and having a small piece of script in the head aswell.
First add this to the head:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
That loads the latest version of jQuery for you.
Next you need to add the jQuery code in to make the nav work. Its a simple 3 line code that checks its been clicked and then toggles the display on and off.
<script type="text/javascript">
$(document).ready(function() {
$('#nav-icon').click(function() {
$('ul.menu').toggle();
});
});
</script>
As you can see, it finds the id nav-icon and when its been clicked, runs a function which toggles the visibility of the ul.menu.
jsFiddle Demo: http://jsfiddle.net/3w63B/2/
If you go on the mozilla developer network (link) or go to the jQuery API pages (link) you can pick up the basics pretty quick. It only starts getting difficult when you start getting jumping right into the deepend of what it can all do.
Hope this helps fella.
What do you think this line of code does?
#nav:hover ul {display:block;}
Everytime you hover the nav anywhere the submenu will appear.
Instead of CSS use javascript / jQuery to make it appear on click.
$("#nav-icon").on("click", function() {
$(".menu").css("display","block");
});
Although above code isn't exactly what you want, because the submenu will stay forever. This will help you finding a solution by yourself ;). Coding is doing.
I have created a very basic hover css menu for a joomla site (I don't really want to get into jQuery if I can avoid it). It works fine in everything except IE (10,9...).
When you hover over the top level and move the move over the child menu the child menu persists in everything except IE.
How do I get IE to play ball?0
Here's the html:
<ul class="menu" id="mainMenu">
<li class="item-210"><a href="/index.php/home-2" >Home</a></li>
<li class="item-213 current active deeper parent"><a href="/index.php/xbus2" >xBus</a>
<ul>
<li class="item-214"><a href="/index.php/xbus2/vision" >Vision</a></li>
<li class="item-215"><a href="/index.php/xbus2/timetable" >Timetable</a></li>
<li class="item-217"><a href="/index.php/xbus2/xbus-mini" >xBus Mini</a></li>
<li class="item-218"><a href="/index.php/xbus2/xbus2" >xBus2</a></li>
</ul>
</li><li class="item-220 deeper parent"> etc ....
and here's the css
ul#mainMenu li {
position:relative;
}
ul#mainMenu ul {
position:absolute;
width:150px;
top:17px;
left:-9999px;
text-align:left;
background-color:#000;
z-index:5;
}
ul#mainMenu ul li {
display:block;
border-top:1px solid #999;
}
ul#mainMenu ul li:first-child {
border-top:none;
}
ul#mainMenu ul li a {
font-size:14px;
line-height:2em;
color:pink;
}
ul#mainMenu li:hover ul {
left:0px;
}
You should set the margin and padding to zero. IE has default value about this.
'ul#mainMenu ul {padding:0; margin: 0;}'
Make sure there is no margin between the elements which could be causing the issue. The IE dev tools will help with this.
Also, try applying a 1px transparent gif or png as the background of the child LI's - http://www.welovecss.com/showthread.php?s=4de6205bc9ac3ff2ead50464d123bcf4&t=6478&page=2
Hope it helps
i am trying to make a CSS menu for my webpage for school. I have been developing my site on a Mac and have got it working just the way i want it. I have tested it in safari, firefox and chrome as well as firefox on windows, all of these work fine, i hover over the links menu and it drops down.
css for menu
#menu
{
position:relative;
top:-83px;
left:60%;
font-size:30px;
width:250px;
}
#menu ul
{
position:absolute;
list-style-type:none;
background-image:url('../images/linkBG.png');
background-repeat:no-repeat;
background-position: 38px 0px;
width:250px;
}
#menu li ul
{
display:none;
list-style-type:none;
background-image:url('../images/menuBG.png');
background-repeat:repeat-y;
font-size:20px;
}
#menu a:link {color:rgb(255,0,0);}
#menu a:visited {color:rgb(255,255,0);}
#menu a:hover {color:rgb(255,0,255)}
#menu a:active {color:rgb(255,255,255);}
#menu li:hover > ul
{
display: block;
}
#menu li ul li
{
padding-left:0px;
padding-top:10px;
padding-bottom:10px;
}
When trying it on IE (ver6 and ver8) the links menu repositions it self (moves up about 50px and overlaps the heading), the background image gets moved across to the right by about 30px, and the menu no longer drops down when the mouse hovers over the text. I have heard of IE being a pain to develop for but this is just stupid. I have seen one solution that involved a bit of script to work around the issue but i cannot use script as this is for an assignment (which will be marked on a windows machine so there are high odds of it hitting IE). Along with the faulty menu is a table that i am centering using margin-left:auto and margin-right:auto once again it works fine in all browsers except IE. Is there any way i can get around this? is there an alternative to hover that will work on all browsers.
thanks.
html code for menu
<div id="menu">
<ul>
<li>Links Menu
<ul>
<li>Details</li><!--This may be #details-->
<li>Home town</li>
<li>My Course</li>
<li>Books, Music and Films</li>
<li>Timetable </li>
<li>Search</li>
</ul>
</li>
</ul>
</div>
Take a look at the margins and padding on your menu and the header above it. IE sometimes misinterprets them when objects bordering each other have both margins and padding. If you're able to replace your margins with more padding or different positioning, that might fix it.
Otherwise, the easiest way might to use IE conditional statements to give Explorer different versions of your CSS classes. I doubt they'd be considered script, but I don't honestly know. Example:
<!--[if IE]>
#menu {
/* different positioning for IE only */
top: ____;
left: ____;
}
<![endif]-->
This CSS works perfectly in Firefox but not in IE8.
.toc {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:black 1px solid;
color:white;
max-height:50%;
max-width:25%;
overflow:auto;
padding:10px 10px 10px 0;
position:fixed;
right:20px;
top:40px;
}
.toc li { color:black; list-style-type:circle; margin:5px 0;}
Instead of a floating menu on the right side, IE8 renders the menu as first paragraph on top of the page. Where is my fault?
Update:
The relevant HTML:
<div class="toc">
<ul>
<li>DOCS</li>
<li>TODO</li>
<ul>
<li>Vorlagen</li>
<li>Taeglich</li>
<li>ADVARIS</li>
<li>CRM</li>
<li>QIS</li>
<li>SAP</li>
<li>Verschiedenes</li>
</ul>
<li>URLs</li>
<ul>
<li>Dev</li>
<li>NEWS</li>
<li>Vim</li>
</ul>
</ul>
</div>
Firefox-Screenshot
IE-Screenshot
Based of Gaby's provision, when I switch IE to render in Quirk's mode, then I believe I see your problem. Check your Doctype and other things that would through you into Quirk's mode, that's probably what is causing the issue.
I would like to have an ordered list that has the text on the left and an image for each li within it on the right of the li. So I floated the image to the right and it puts the image correctly on the right and text on the left, but the image is 14 pixels too low in IE and FF. Chrome does it right. This appears to me to be IE and FF putting the float outside or underneath each LI instead of inside where it should be (like Chrome). If I adjust the position -14px (up) for IE and FF, it works fine for them, but then Chrome is messed up. 14px is the height of each LI which is why that trick works.
I don't want a single browser hack unless absolutely needed (ie, do the -14px offset for IE/FF and tell Chrome to ignore it).
#top25list{
width:185px;
cursor:n-resize;
list-style:
decimal inside;
padding:0;
margin:0
}
#top25list li{
margin:0;
padding:0 3px;
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100
}
#top25list img{
border:none;
height:13px;
width:13px;
float:right
}
#top25list li:hover{
background-color:#990100;
color:#FFF
}
Nothing special about the li's:
<li id=##>Name <img src="/images/button-x.png" alt="Remove Name"></li>
See the first LI doesn't have the image for FF/IE because it's below (where it looks like it's for #2) and the #25 image is off the bottom of the list.
I want all 3 to look like the Chrome. There is some JavaScript producing the OL/LIs, and the class=removeTeam is just for jQuery actions. This list is within a jQuery sortable and I do have the list selection disabled with jQuery (.disableSelection();). I don't think this has anything to do with jQuery or JavaScript, just simple CSS.
It's a bug that IE and Firefox share. To work around it you must move image to be before any non-floated text in its line.
<li id=##>
<a href="#" rel="##" class="removeTeam">
<img src="/images/button-x.png" alt="Remove Name">
</a>
Name
</li>
If you can't change the HTML you could try positioning instead of floats.
#top25list li{
margin:0;
padding:0 3px 10px 3px; /* add padding-right to make room for the image */
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100;
position: relative; /* for img to have position */
}
#top25list img{
border:none;
height:13px;
width:13px;
position: absolute;
top: 0;
right: 0;
}
I haven't tested this, let me know if I'm wrong.
The list-style: inside is messing it up.
Below is the code that works. I moved the float to the #top25list a and moved the to before the name.
#top25list{
width:185px;
cursor:n-resize;
padding:0;
margin:0
}
#top25list li{
margin:0;
padding:0 3px;
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100
}
#top25list a{float:right;}
#top25list img{
border:none;
height:13px;
width:13px;
}
#top25list li:hover{
background-color:#990100;
color:#FFF
}
<ul id="top25list">
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
</ul>