Is there a way to force Standards/Quirks mode from the browser (similar to what IE does) in Chrome, Firefox, and Safari?
Use the quirksmode stylesheets of Webkit or Gecko and toggle it on or off in one of several ways:
User Stylesheet
Style Switcher
CSSOM
DOM Level 2 Style API
I found that not including a DOCTYPE like <!DOCTYPE html> leads to quirks mode, where for example width: 100% suffices instead of width: -moz-available; width: -webkit-fill-available; width: available;
Related
My pretty simple web page has an internal stylesheet that contains:
BODY { font-family:Segoe UI; }
This works in Chrome and IE, on both desktop and mobile. Only for IOS/Safari, this doesn't work, I need an alternative font there (don't I?).
The issue: when I add any alternative font-family, Chrome on mobile no longer uses Segoe UI. E.g. when I change the style above to:
BODY { font-family:Segoe UI, Open Sans, sans-serif; }
then Chrome on mobile (tested under Oreo 8.1 with latest version Chrome) no longer uses Segoe UI. Using single or double quotes doesn't make a difference.
Any ideas about cause and/or solutions?
After looking better: on mobile, Chrome can't display 'Segoe UI'. When no alternative is mentioned in the stylesheet, Chrome chooses Roboto.
Page is not showing photos in a proper way in Firefox browser unlike other browsers which are working well , i'm using bootstrap 4
Chrome View
Firefox View
I solve the problem by adding class define the minimum width and height for images:
.img-nav{
min-width: 108px;
min-height: 64px;
}
it works well on all browsers.
I am having a strange issue with an img that only renders when the browser gets resized or dev tools are opened. The img has srcset and sizes attributes, and is inside a polymer template. It displays normally whithout the attributes, or outside of the Polymer shadow dom. The issue came up with Chrome 39, I believe, and is restricted to Google Chrome, where there are no polyfills at work anymore.
There are no errors in the console, naturally, status is 200 ok there. I am having no issues in Firefox or IE. My polymer version is 0.5.0, and I reported the issue at the Polymer github page, but maybe there is something else to it.
Lex
OK, I think I may have fixed this, though it is a bit silly that I had to do it this way. Originally I had written these with the combined declaration:
background: url(image-name.jpg) top center fixed;
When I write it long form it seems to work just fine.
background-image: url(image-name.jpg);
background-position: top center;
background-attachment: fixed;
If I have more time to look into it, I'll comment in any info I find on why this may be.
I have implemented the from which works in Chrome, Firefox and IE, but don't know why it's not working in Safari ..
Here is my plunker.
There is a bug using Safari and if css contains:
-webkit-transition: border-color, box-shadow ease-in-out .15s;
(for example: form-controll in bootstrap uses it)
The form validation becomes invalid forever.
I used Safari on PC so I have no idea if it is also happen in Mac.
I'm debugging a website for missing images. The website heavily uses GWT hence the source code is not so verbose. I started debugging it with firebug and found out that the tags are all greyed out in the firebug DOM source. If I edit the image tag in firebug console, say by adding just a space, then the image tag is not greyed anymore hence showing up on the page.
Can someone here please point out why the image tags are greyed out in firebug and how to resolve this issue.
Note: there are other images in the page which are working just fine, even they are generated using GWT in the same way.
Most likely - the image is hidden (via CSS probably). Click on the tag to see the styles applied to it - most likely you'll see display: none or something of similar effect.
As to why the image(s) are hidden - either the CSS rules got mixed up and resulted in such behaviour (Firebug should help with the investigation) or it's part of the application logic (hide the progress bar when not needed, etc).
In my case my image was grayed (greyed) out in firebug due to the image having its height and width to 0 px so effectively it was hidden on the screen. so i deduce that grayed out means its not visible on the screen.
I had the same issue with social networks icons, and it was also Ad-Blocker (under Firefox) causing it.
The alternative text of the icons had alt="Facebook" (Twitter, Instagram) in it. Changing that to alt="Facebook_xxx" was enough to solve the issue.
I was having the same problem. Firebug was showing my container element, which had an img, as grayed out. The element was displayed in Firefox (and other modern browsers), but not in IE8.
Knowing I was setting display:none; and later in the script making it block, wasn't my issue... adding a missing width and height in the style was the fix for me.
For me, it was a matter of explicitly setting the width and height on my div (that holds my img) inside the container div. I did not have width and height on my absolutely positioned div. As soon as I added that the grayed out was solid in Firebug. Also fixed my missing div problem in IE8! (Which was what set me on the debugging path in the first place)
IE8 likes width and height set, where all other modern browsers didn't care and still displayed the div. Firebug showed the element grayed out, but Firefox the browser displayed the div element just fine.
#slidesContainer {
position: relative;
width: 871px;
height: 275px;
padding: 8px 8px;
overflow: hidden;
}
#slidesContainer div {
position: absolute;
width: 871px;
height: 275px;
display: none;
}
As an FYI for other people, I was having this problem and couldn't figure it out - Firebug correctly greyed out the invisible images. I am running the AdBlock Plus add-on and it was hiding the images because they were in a folder called ads. The giveaway was that the images has classes added with random string e.g. class="auwhaezfynjjayjvlasn". I changed the name of the ads folder and voila, visible and not not greyed out in Firebug any more.
Another FYI - my FILE was named xxx-ads.swf and the file would NOT display in Firefox or Chrome but worked fine in Safari, IE and Opera.
I am running Adblock plus in Firefox and Chrome.
It seems to me that as a general software practice, Adblock is trying to be too smart in it's detection. Cost me about 2 days of debugging. Grrrr.
Thanks goodness i finally found this forum.