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]-->
Related
I wanted to replace text on hover with css and though it didn't work, Google chrome ignored the entire :hover pseudo-class, while Mozilla firefox safely ignored content and continued to run the rest of the events
Html:
<li id="menuDebating">Debating</li>
Css:
#menuDebating a:hover{
content: "Public Speaking" !important;
color:red;
}
Fiddle: http://jsfiddle.net/FSyAv/
However I have read the css3 declaration and I know that content should not work for :hover, which isn't a big deal since implementation is easy with javascript.
But, I then looked at it further and tried using the a:hover::before psuedo-class and that's where it gets really strange
Html:
<li id="menuDebating">Debating</li>
Css:
#menuDebating a:hover::before{
content: "Public Speaking" !important;
color:red;
}
Fiddle: http://jsfiddle.net/FSyAv/1/
In Chrome, it flickers non-stop, Safari flickers, then stops for while and continues flickering, while Mozilla and Opera runs the event as intended
content can only be used with pseudo elements (before and after).
You can force it to "overwrite" the original word by setting its position to absolute:
Demo
ul li {
position:relative;
}
#menuDebating a:hover:before{
position:absolute;
top:0; left:0; right:0; bottom:0;
content: "Public Speaking";
color:red;
background:#FFF;
}
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.
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...
I'm really frustrated with this one. A few weeks ago I got it working in both firefox and ie just fine. Went back today to do some testing and found a problem with the display in firefox and I've been searching the code but can't find anything. I could use a few tips from anyone willing, I'm sure I'm looking at the wrong things. I upgraded my firefox version but I imagine my code is broke, not firefox. I'm assuming the problem is somewhere in my css file, but I'm not sure.
Here's what I've confirmed so far. There don't seem to be conflicts in other css files with < ul >'s or < li >'s that may be overriding settings. The other confirmation is that This works fine in Internet Explorer...therefore I must be an idiot, because its usually been the other way around (working in FF, but failing in IE).
Here's How it looks in IE (Notice the position of the folder icon right next to the text):
alt text http://www.redsandstech.com/ie_works.jpg
Here's how it looks in FF (Notice the folder icon is not being pushed down with its corresponding text).
alt text http://www.redsandstech.com/ff_broken.jpg
Here's the Unordered List:
<ul id="nav">
<li><a>Utah</a></li>
<ul>
<li><a>ParkCity</a>
<ul>
<li><a>Com1</a></li>
<ul>
<li class="folder_closed"><a>Timber</a></li>
<div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
</ul>
</ul>
</ul>
</ul>
Here's the CSS that is used for the whole menu:
/* MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
ul#nav div{
overflow: hidden;
}
#nav li>a:hover {
cursor: pointer;
}
#nav li > ul{
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
display:none;
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:0px;
text-indent:15px;
}
#nav li {
list-style-type:none;
list-style-image: none;
}
#nav > li{
vertical-align: top;
left:0px;
text-align:left;
clear: both;
margin:0px;
margin-right:0px;
padding-right:0px;
}
.menu_parent{
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.menu_parent_minimized{
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.folder_closed{
position:relative;
background-image: url(../images/folder_closed12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
.folder_open{
position:relative;
background-image: url(../images/folder_open12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
</ul>
You have encountered one of the greatest and most frustrating CSS differences between IE and other browsers.
My advice is to use a reset stylesheet, and to style tree icons as backgroundImages of their containers.
For example, one of your tree items might be
<div class="folder">This is a folder</div>
and have the following CSS:
.folder {
background-image: url(someImage.png);
background-repeat: no-repeat;
background-position: 0 0; /* or wherever you like */
text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}
}
I do this kind of thing always using DIVs, not UL>LI combinations. YMMV. You can do the same thing with UL>LI, but I don't like the differences in where the bullets are placed, etc., and if you use a reset stylesheet anyway, you are simply converting the LI containers to something resembling a DIV anyway.
Your markup has some errors, so it is up to the browser how to generate the DOM.
ul can only have li as child, not div or another ul. Fix the markup, and see what happens.
I've been having problems with firefox when I use overflow:hidden on my lists. Try taking out overflow:hidden and see if that changes things.
For my issue, if I use overflow hidden then it causes my ordered lists to not show their A.,B.,C. or 1., 2., 3. etc... (turns it into an unordered list, with no bullets)
Didn't test but this may have to do with the fact that FF uses margin to set the bullet marks while IE uses padding. Or is it the other way around? Forgot.
Is it possible to use markup like this
<ul>
<li><img alt="" src="/image1.jpg"></li>
<li><img alt="" src="/image2.jpg"></li>
</ul>
And do a sliding door effect? I have some CSS that looks like this:
ul li {
list-style-type: none;
margin:0; padding:0;
}
li a {
display:block;
overflow:hidden;
width:225px;
}
li a img {
float:left;
}
li a:hover img {
float:right;
}
It works in FireFox but IE7 doesn't seem to understand the float:left / float:right code. Any ideas?
Have a look at these articles on A List Apart and see if they do what you need:
Sliding Doors of CSS
Sliding Doors of CSS, Part II
They have a lot of other good articles if you can't sleep like me...
Have you tried setting the <li> to block?
ul li { display: block; }
If I recall correctly, IE had issues with lists, unless you explicitly defined the styles.
As an aside: Sliding Doors is a term that has a different meaning to what you describe - might even throw some people off =)