I have an issue with a website being programmed in WordPress. A drop down menu is showing correct in Chrome but not in Safari. See attached images, we want a clean drop down with symbol ∨ and not with arrows.
Any help would be greatly appreciated.
Best,
Don
Correct drop down as shown in Chrome
Incorrect drop down as shown in Safari
Inputs have a default style on each browser, this is normal behaviour, you should take a look at this stackoverflow article How do I style a <select> dropdown with only CSS? to customize it accross all browsers.
Remember also to do some research first before asking question, most of the time, answers are already out there.
Related
I should start by saying I'm no expert when it comes to code and web design. That said, I have recently upgraded to OS X 10.9 Mavericks. After updating I'm experiencing a weird bug, specifically on my website and others like it using the wordpress theme WPfolio Two. When you hover over a link, the link jumps and drops to the next line. As soon as you move your mouse away from the linked text the text link hops back up to the line it's supposed to be on. This only happens using Chrome or Safari, it does not seem to happen in Firefox. For an example hover over any link on on either of these two pages http://jasonirla.com/category/news/ or http://notlaura.com/wpfolio-two/read-me/ Thie bug does not seem to effect drop down navigation menus or some (but not all) links in sidebar widget menus.
The bug makes it practically impossible to click the jumping link. I'm not experienced enough to say if this is a browser bug, a OS X bug, a problem with the code in the wordpress them I'm using or what. I am comfortable editing and writing small additions to the theme code using a child theme CSS but in this instance I have no idea where to start or what I'm looking for (to fix). All I know is that this problem did not occur when I was still running 10.8 mountain lion on my mac.
If anyone has any experience with problem like the one I'm experiencing and could offer me some advice I'd really appreciate any help you can offer. I've been searching all over for a week now and haven't been able to find any answers and nothing I've tried seems to make a difference. Thank you for any help or advice you are able to offer.
Can't leave a comment, so I hope this will help you:
Check your font-style on this hover link, is it bold on hover?
Do you use another font-size on hover?
Do you use a iOS compatible font on hover? (using a font that only works on windows systems will be transformed on iOS devices and could cause this bug.
I was contacted by the designer of the WP theme (WPfolio Two), there's a style on 193 of the CSS "display:compact" which is the problem. I put block comments around that line /* display:compact */ and the bug is fixed. Thanks for the initial help #lickmycode – user1544398 just now edit
i have spent 3 days trying to figure out this issue and cannot come up with a viable solution.
ive even tried using javascript to load stylesheets tailored to each browser, but even that didnt work.
my problem is my horizontal menu (http://mydomainsample.com/fire_rebuild) is displaying perfectly fine i n chrome, but when i load in safari or firefox, the child menu is way out of position. oddly enough IE(9) is closer to being correct than the other two, but even thats not quite correct.
i have played with the stylesheet trying to figure it out, but when i get it right in fff, safari, or ie its screwed up in chrome.
i cant seem to find a solution that works in all browsers.
can someone please help me find a solution to this?
ive tried using a different menu but this one looks the best and any vertical drops ive used give me z-index problems between the menu and the slideshow that i cant seem to fix.
I do not think src is an optional attribute for link tags. Replace it with hrefs like the first two. When I look at the page in firefox, I do not see two files above being imported.
The order of the files in those link tags are very important as well.
href="stylesheets/reset.css"
href="stylesheets/coda-slider-2.0.css"
I do not know if you already have them but firefox and chrome has the firebug and web developer plugins that makes life easier.
jQuery has been updated to v1.7.2; I would update all your plugins & see if that helps.
First of all, remove all the javascript you applied to match for different browsers.
Then Remove the width:750px; and left: 548px; on style.css line 83 (ul#nav li:hover > ul)
Hope this will solve your problem
Also your page width is 1220px. Stick with the 960px width in order to compatible with small screen sizes.
When looking at this site in IE7, the header banners and nav menu seem to randomly appear and disappear. Have look at several posts regarding this, but have not been able to solve it. I am hopeful someone could help pinpoint the issue, as the page appears correct at times, and not at most others.
Thanks.
You are using two separate style sheets.
http://steamsaunadepot.com/media/css/cb5ec47641853ec8a1ca38b845e6e92e.css is for FF and
http://steamsaunadepot.com/media/css/36fe96c008dc78bed45bceb2c9cde999.css is for IE7
Specifically, the styles for top and left on .header-notice and .header-banner are wrong in IE7. If they were just set the same as they are in FF, the header and footer generates correctly.
I'm getting a wierd bug in Safari 5.0.5 for windows. When I apply my styles the down arrow in the select box button disappears. I tried removing classes and it seems multiple classes trigger the bug. Any help would be much appreciated. You can see an example at http://jsfiddle.net/fbsRY/2/
You cannot reliably style select elements using CSS as browsers try to stick to the operating systems defaults. If you MUST style these elements, you'll probably have to find a JS based alternative.
Not a full solution, but I did find more details about the problem at http://www.codingforums.com/showthread.php?t=179464. It seems that it might be a bug related to the Windows Classic Theme. I'm kind of a geek that way. Love my flat gray interface :)
I'm having a problem with CSS not displaying correctly between IE and Firefox... The big problem is that we have a ridiculous number of CSS files (and this isn't something that is currently scoped to fix), and I can't seem to find what style is being applied.
Any way, here's what I'm looking at: On the shopping cart page for our site, we have a table (yes, I know) where each row is an item in the cart. On IE, Chrome, Opera and Safari, this table renders fine - everything looks good, borders are all hidden, it looks great. On Firefox, however, while the outer border on the table remains hidden, lines separating columns/rows inside the table are displayed.
I don't have direct links to show the problem, but if you go to
https://store.petango.com/Roc-P6986.aspx
and click the "Add to cart" button, it brings you to the cart page (where you can see the lines showing in FFox, but not in IE).
For what it's worth, this is a third party E-Commerce package that we purchased, and on top of that we hired out our web design to a DIFFERENT third party web developer. Hence the jumbled mass of CSS files/confusion. Trying to look at the CSS for specific TD elements (in Firebug) is basically impossible to read it's so long, but I can't see anything obvious in there either.
I would be thrilled if this is just something stupid I'm missing, and there's a well known mistake that has been made in our CSS that lets it render fine in every browser but Firefox - any help would be greatly appreciated.
A bit of poking around in Firebug reveals that removing the border-collapse:collapse style from the ctl00_wpm_Basket_ctl04_BasketGrid table removes the borders. I'm not even going to try to explain this - the style should be completely unnecessary, as like many of the other applicable styles it's set and reset multiple times at multiple levels... I suspect you're encountering some subtle difference between how styles are applied in Gecko and other browsers; it's probably a bug, but I would encourage you to slim down the test case if you decide to report it...
this isn't something that is currently scoped to fix
It probably should be... Otherwise, you'd better get comfortable using Firebug.
"We fully recognize that IE is behind the game today in CSS support."
ieblog