On this site, I have a search form whose submit button has a background image
But when I view the site in IE8, the image doesn't appear.
Is there anything I can do to persuade IE8 to show the image (that doesn't cause it to disappear in other broswers)?
It appears that the image is present, but barely visible. Try setting the height and width of the input. This makes the image visible for me:
.searchform INPUT[type='submit'] {
width: 18px;
height: 18px;
}
I got it working in IE8 in this fiddle
I didn't see anywhere in your code that the background image is actually set in IE8. It shows in Chrome. Are you using multiple style sheets based on browser? Or browser specific rules in your styles?
Related
I'm trying to hide captions on a video element:
I'm using the following css:
video::cue {
visibility: hidden;
}
It works fine in Chrome, but on Safari it only hides the text, and still renders the caption background, like this:
I tried adding background: none as well, but there's no change.
How else can I hide the captions on Safari, besides modifying the text track list programmatically? Could this be a Safari bug?
One solution is already mentioned here: Hiding a video text track with Safari. That is, if what you're trying to do is not display your captions directly in the video anyway, just use the track kind "metadata". In my case:
<track default label="English" kind="metadata" srclang="en" src="../static/captions/mexicocity_en.vtt" >
I think you need to target the parent element of video::cue and hide it. By the way display:none can also be used for hiding though I am not sure
As you can see from the image below, the browser (both Chrome and Firefox) insists on applying width:24px / height 24px for the icon.
However, I have already changed the values on the CSS file. In fact, if you click on the file the browser says the width/height are coming from, the browser inspector itself show the updated values of width:150/height:40, as the image below shows.
So basically the inspector is contradicting itself! I can't solve this clearing the cache.
Any ideas on what is going on? Could it be related to this being a .scss file?
You can check it live here: https://www.chatbotforums.com/ . I am trying to change the size of the Facebook login icon, inside the "Welcome" box.
Your banner is overflowing. You will have to modify the CSS for the box container and then the icon.
Modify width and height style to min-width and min-height.
img {
min-width: 250px;
min-height: 250px;
}
<img src="https://www.google.ca/images/branding/product/ico/googleg_lodp.ico">
Solved it.
For some reason the browser inspector was saying that the width/height were being pulled from the _style.scss file, but that was not the case.
They were being pulled from another file, the standard style.css, so I had to tweak the values there instead.
Strangely this incorrect information appeared on inspectors of both Chrome and Firefox.
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!
I use Twitter Bootstrap for my website but also AD Gallery as Image Gallery (http://coffeescripter.com/code/ad-gallery/).
I have several tabs made with bootstrap on my page, the gallery is on the second tab. I found out, that there is a problem with IE 9 (it works in Firefox and Chrome) to not show the images in the gallery.
I debugged this and found out that this is due to a css command in the Bootstrap reset:
img {
height: auto;
}
If I remove this line, everything works fine also in IE9.
I don't want to remove this line completely but override it in my own CSS for this specific gallery div. The funny thing is, that "auto" is already the default value for this attribute.
So how can I reset it to "not set" as it is, if I comment out this line in Bootstrap?
Checking the IE9 default stylesheet confirms img height is not set to anything, which to me implies auto so this is strange.
Does height:inherit work? Edit: No it does not.
In Internet Explorer the background of the webpage moves without the rest of the page's content, I need the background to be fixed with the content, so when I resize it the background doesn't move, like the content inside it, here is the link to the website:
Website Link
This error only appears in Internet Explorer. I have an internet explorer-only stylesheet you can view in the source of the website.
I believe instead of (or in addition to) position: fixed, you can use
background-attachment: fixed;
Hope that helps.