I am trying to use a menu on my site. So I have prepared it, it works fine on Firefox, Chrome, Safari but not on IE. Here is the link to that little html, its a menu with li items. Any idea how to make it work on IE as well? Also afaik css gradient backgrounds should work on IE, but it does not :
Related
I'm having a CSS styling problem between Chrome/Safari and Firefox. In both Chrome and Safari, the hidden drop down is correctly positioned, but in Firefox, the subnav menu is off by a few pixels. After looking into the issue with the inspection tools of both browsers, it seems that Firefox is making the #main_nav_bar ul 10px wider than Chrome. The issue I'm having is that I'm not sure how to change this while not messing up the way the nav bar looks.
The link is http://www.tamidgroup.org.
Any suggestions on a fix are much appreciated.
Definitely add a doctype in there. You could also target those browsers with a media query.
Example for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0){
//add your browser specific code here
}
That way you can target specific issues you see from one browser to the other.
I have a small image/arrow that appears under my menu items on hover. The problem is that IE and Firefox position the image differently than Chrome does. What is the problem and how might I fix this?
Here is my applied css:
img#menu-item-25{position:absolute;right:600px;top:92px;}
img#menu-item-26{position:absolute;right:510px;top:92px;}
img#menu-item-27{position:absolute;right:390px;top:92px;}
img#menu-item-30{position:absolute;right:220px;top:92px;}
img#menu-item-29{position:absolute;right:105px;top:92px;}
img#menu-item-28{position:absolute;right:15px;top:92px;}
I'm developing a new website.
Testing out the page in different browsers, I find that the nav bar renders differently depending on the browser. In Chrome and Safari it looks correct, but in Opera, IE and Firefox the nav bar renders differently. I've validated the HTML, I'm not sure what to do.
Looks like you have a problem with floats after unfloated content - very similar to a question I just answered:
CSS issue with IE8
Let me know if reviewing that question gets you going in the right direction.
Your UL is styled up in the right corner. In IE hit F12 and start going through the +'s of code and you can find under nav role, the UL is way off to the right. I would start editing CSS in the nav role and ul first.
I'm designing a navigation bar that HAS to run in IE Quirks mode (i.e. it can't have a DOCTYPE tag at the top). It also needs to work in Firefox and Safari (quirks mode for safari as well). My sample right now works in Safari and Firefox. (View source to see everything, css is in-lined).
My problem is that the border-right doesn't show up in IE! Any ideas?
Here is the working sample
Thanks!
I'm not suggesting this is the correct solution but if you remove the background color of rgb(255,255,255) of the #top-nav a style the bar becomes visible in IE - which I guess suggests the hyperlink (in IE's eyes) is overlapping the div border you have defined?
For nav use ul tag.
http://jsfiddle.net/bdVZ6/2/
Greetings -
Struggeling with a three-level css menu.
Works fine in FireFox and Opera for mac, but in Chrome and Safari the third level "sticks" or "hangs" as a watermark after you move the cursor away.
I have tried a few different things without luck.
Live demo here:
http://www.it-stud.hiof.no/~benteh/tmp/
I have cut away everything else, so this is just the menu css & html.
(PS. there are only three levels on archeology, hominins and environmental)
You may be interested to know that removing the "visibilty: hidden" rule from the ".menu ul li ul" selector (on line 105 of the CSS) fixes the problem for me in Chrome. Checked in FF3.6 and it works too - didn't check it in anything else.