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.
Related
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 am working on a web application that allows me to insert some custom css for the front page.
I want to have a full screen background image at the start page. I understand that I can use background-size:cover which is supported in all latest version of browsers.
body {
background-image:url(/File/Publisher/Start/startpage_background.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This works for latest version of Firefox and Chrome. However, it is not working in IE11. The background image does not shrink to cover the entire screen. It displays at its original size and is partially cropped off.
Using F12 to debug, I discover that if I disable either margin-top or margin-bottom (see screenshot), background-size property will work.
I do not want to modify the margin property introduced by the original CSS of the web application. Any way to resolve this problem?
I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :
http://codepen.io/anon/pen/oXmzLL?editors=010
Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).
Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...
The full scope of my specific issue is likely too deep to include in a question here. Instead I am looking for clues.
The nature of the problem has to do with overflow: hidden. In Internet Explorer 11 it is working sometimes and at other times not. I have an element that is larger than the body and I have set the body element to overflow: hidden. Sometimes the page loads and works exactly as expected, but in about 60% of my tests the browser just ignores this property. If I look in the inspector the property and value are present, yet are not having any affect on the rendering of the page.
I have tried using a container element instead of the body, but the same thing happens. opening the inspector panel while scrolled to the top of the page will sometimes fix the issue. Any ideas?
There is a lot going on with this layout which is why there is no fiddle. Everything else works fine in IE. There are no errors in any browser and the layout works perfectly in all other browsers I have tested (Chrome, Safari, Firefox, Opera and IE 11).
Are you using a display properly on that div or element? If you have display: inline then try to change to display:block.
I am not sure why this worked but I just positioned the body fixed. That seems to work.
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!
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?