I'm having some issues on my Shopify site getting the input selector dropdown to display properly in Firefox. The field shows and is clickable but doesn't fill with text. Works fine in Safari, Chrome, and IE.
Any idea what might be causing this?
http://stillmotionstore.com/products/storytelling-workshop-basic
Yes!
It fills with text, but the text isn't visible.
Your CSS says the following:
height: 24px;
padding: 1.384615385em 0.615384615em;
That's why there's no place for the text anymore .
Solutions
Increase the height
Remove the top/bottom padding
Use box-sizing: border-box so that the padding is added to the height
Try to debug such problems with the Web Developer Tools in the future (available in all browsers), and you'll find this bugs immediately!
Related
I have a video player with rounded corners which works great on all browsers except Safari when entering PiP.
In Safari when you enter Picture-in-Picture mode, it shows this placeholder with text "This video is playing in picture in picture". Which is mostly fine.
But the placeholder doesn't respect the css on the video element which is supposed to have a border-radius: 16px
I checked in the browser, and there's nothing else overriding it. I also tried adding !important and overflow: hidden to see if that did anything, but no luck.
I found this article on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture describing a :picture-in-picture pseudo selector.
I tried that but it seems extremely limited to what you can style. So far only height/width and opacity has worked. Adding border-radius does not seem to affect it at all.
Is this just a limitation in Safari? Is there no "clean" way to keep the border radius and video styles on the placeholder when entering PiP mode?
I have padding: 0 40px 0 40px on the main element of each page.
In chrome, the layout looks correct with the correct padding. Here the image shows the correct padding using the developer tools.
http://imgur.com/BButZht,TuOHanN
However in IE and safari, the padding is not present and the text/image are shifted to the outer body element.
http://imgur.com/BButZht,TuOHanN#1
I cant figure out why this is happening. The IE developer tools don't help me much either
Same padding issues for the home page and category pages.
www.luminoto.com
Thanks
IE does not have display:block in its browser stylesheet for the main element, so you have to add it explicitly in your stylesheet – otherwise it’ll just be treated as an inline element (and all the content will just “flow out” of it).
You can add it directly to your formatting for .photo_main – although the better place to do this would be inside a “reset” stylesheet meant to equalize such browser differences.
Not sure if that’s the same issue Safari is facing, but give it a try and see if it fixes that as well.
I have a web application originally designed to target IE7. I am readjusting the CSS to make the app presentable in the latest version of Chrome without breaking it for IE7 users. I've fixed mis-aligned sliding door input boxes throughout the site but there is one page where I cannot get the sliding door to align in both IE7 and Chrome. The setup is very simple:
<span>
<input type="text" ... />
</span>
In this case the span holds the left cap of the sliding door and the input holds the right cap and body. I've styled both span and input as inline-block with the same height and no margins or padding. Chrome nails it and it looks great but IE7 is rendering the input 1 pixel lower than the span like so:
need more reputation to post images
If I add -1px of top margin to the input then IE7 renders the thing correctly and Chrome renders it misaligned. I've tried comparing this instance to all of the other sliding door inputs in the app that work in both IE7 and Chrome but I cannot for the life of me see what is different here....
Anyone run into a problem like this before?
There's almost certainly a better way to fix this, but without seeing it..
Add a class to the broken input such as "ie7fix", then:
/* applies to only ie7 */
*+html .ie7fix {
margin-top: -1px;
}
http://en.wikipedia.org/wiki/CSS_filter#Star_plus_hack
i am not able to set the height of the Div of this theme to 156px;
Its inheriting css property from some place else and making it 118px
Please the following website in Chrome and firefox you will see the difference
http://jssamch.com/
It's coming from 1-default.css, line 19.
Remove the height: 118px property.
You should really be using Firebug (for Firefox) or Developer Tools (for Chrome) to figure out this sort of issue on your own.
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.