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;}
Related
I want to CSS style my scrollbars in Safari (particularly iPhone).
I guess it's doable in FF (div 2) and Chrome (div 3) but in Safari I can't see any scrollbars.
Divs have overflow-x: scroll.
Div 2 has FF specific properties (scrollbar-width and scrollbar-color)
Div 3 has Chrome specific pseudo classes (::-webkit-scrollbar ...)
Here is the example (you can open it in various browsers to get the picture):
https://codepen.io/dalibor123/pen/bGoNYLQ
I was asked if this answers my question, but it doesn't: CSS customized scroll bar in div
because it only deals with Safari on Mac, but I was asking preferably for mobile Safari - iPhone etc
Please open my example with iPhone Safari
The following HTML/JS video gallery works fine on Safari, Firefox and Chrome, but fails to render properly in IE (who would have guessed)
http://vimeography.com/themes/journey/
The thumbnails have an absolutely positioned a element that should appear on mouseover
The video poster frame image has a span title that should be appearing over the top of the poster frame, but instead, the title appears to the right of the image.
How can I properly adjust this CSS for compatibility in IE8 and 9?
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'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/
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.