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.
Related
I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.
I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.
I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.
Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.
Chrome renders:
Safari renders:
I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.
notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.
I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.
I added a child div with the class required and it worked perfectly
add a min-height to <ul> seems to fix the issue
nav ul { ... min-height:50px; } /* < add */
tested on Safari 5.1.7 (7534.57.2) for PC
bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1
I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
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 :
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;}
The site is here. I've spent 3 days making it compatible with IE so I guess its time to ask for help.
Here are the three important major discrepancies between IE and other browsers such as Chrome, Firefox and Opera:
IE8 navigation buttons on the right most does not have a shadow (FIXED)
IE8, IE9 :active styles are not working; I'm informed that it will not work in IE7.
IE9 drop shadow for triangle not showing up (FIXED)
Please let me know any changes in css code that will help address these issues. I don't have plans to support IE 6.
#UrBestFriend: Changing position: relative to position: absolute for .nav_shadow {} fixes the issue for me in IE8.
To fix vertical-align: middle not working on .box_abilities p {} for me in IE7, I just added margin-top: 55px; to make it position more or less in the centre of the container.