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.
Related
When one selects an image in the fckeditor or ckeditor in webkit browsers ( chrome, safari ) and others like opera, the image is overlaid with a transparent gray mat, presumably as a visual cue to the user that the image is selected ( reference attached images ). The problem is this makes it impossible to apply any css effects to the image efficiently within the editor. This seems to be a browser default user agent style issue, as firefox actually works as desired. How can one target, override and disable this?
Annoying mask on image selection in editors on webkit / opera browsers
Preferred image selection without mask in editor on firefox / IE browsers
Alright, looks like the answer to this is just a matter of styling ::selection afterall.
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'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 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/