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/
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 having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.
Please consider this snippet: http://fruple.com/kemper/test/categorie.html
Firefox screenshot:
Chrome screenshot
why are some of the right borders not showing up?
Try changing the display property for the li elements from inline to inline-block.
It's possibly related to this bug: http://code.google.com/p/chromium/issues/detail?id=58105
You should avoid triggering quirks mode in any case and add a DOCTYPE.
We're having a problem with our website at www.tonerize.com, in regards to the blue menu at the top center of the page. In IE / Firefox / Most browsers, the menu displays correctly and has a background image.
However, in Webkit based browsers (Chrome, Safari, etc), the menu doesn't have a background and it seems like the padding is not being used. Is there any reason for this?
We figured this out. Webkit wasn't liking on of the tags in the CSS, which other browsers apparently ignored.