I'm having issues with trying to add a background image to my website,
The background showes up in Firefox but I have to reload the page 2 time before I can see it :/ and on Chrome, it does not show up at all :/
Here is my code:
html {
/*-------------------------- Fond De Pages --------------------------*/
--blue-back: fixed url("/medias/images/blue_back.jpg");
--christmas-back: fixed url("/medias/images/christmas_back.jpg");
--mlg-back: fixed url("/medias/images/mlg.png");
/*-------------------------------------------------------------------*/
background: var(--christmas-back); /* Changer le fond ICI */
text-decoration: none;
color: inherit;
font-family: 'Roboto', sans-serif;
display:inline-block;
}
body {
text-decoration: none;
color: inherit;
margin: 0;
padding: 0;
}
I've found the problem: In some versions of chrome, CSS variables are not supported !
I've had to directly enter the url of the background image and no, it's working properly !
Related
So I am following along with a youtube tutorial to set up my VSCode on front-end development for beginners. Heres the link to the video. https://www.youtube.com/watch?v=aydFCQiUW44&list=WL&index=10&ab_channel=CoderCoder
My issue is that as I follow along step by step when it's time to check my page to ensure that everything is showing live, everything is showing except the background color. The uploader has her comments turned off so I can't ask what I am missing so I am searching here for help. Here's the code. I am using the live sass compiler by Glenn Marks. the Live sasscompiler by Ritwick Dey prompts me to use that one instead, and I am also using the Live server by Ritwick Dey.
html {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3;
margin: 0px;
padding: 0px;
background-color: #202020;
color: #ffffff;
}
was expecting to see the background in black (dark grey) with white text. but instead its just white background with black text.
Chrome and Opera render my page properly without issue, however IE11 and Edge do not.
I am using pure CSS to expand/collapse 3 section headings. It was my understanding IE 11 had more support for CSS3/webkit and I definitely thought Edge would of stepped up it's game.
https://jsfiddle.net/x0c5fsqh/
CSS Snippet
summary::-webkit-details-marker {
background: url(/images/toggle-expand.png) center no-repeat;
color: transparent;
font-size: 125%;
margin-right: 2px;
}
details[open] summary::-webkit-details-marker {
background: url(/images/toggle.png) center no-repeat;
color: transparent;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 28px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 16px;
}
Rendered Properly
How IE/Edge renders it
All of the headings overlap in to the content of the previous sections that should be hidden and the toggle images do not appear at all. Just looks like the above CSS is completely ignored.
Any ideas?
From what I can see the <details> and <summary> elements are not supported in IE and Edge. It has nothing to do with supporting CSS3 features. It looks like those elements are part of the HTML5.1 spec.
Reference: MDN, WebPlatform, caniuse.com.
Take a look at the Resources tab on caniuse.com. There's a few links pointing to some polyfills.
As others have noted, CSS properties prefixed with -webkit- won't work in IE/Edge. Just as -o- or -ms- wouldn't work in Chrome.
I have a simple <a class="button"> element, and I noticed on Firefox, the text wasn't as vertically aligned as on Chrome.
Here is some sample code:
Here is my CSS:
body {
font-family: sans-serif;
}
.button {
font-size: 3em;
display: inline-block;
padding: 0.6em 1em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #333;
background-color: #7d8cdd;
}
.button > span {
background-color: #8cd5ed;
}
<span>CLICK ME</span>
Now what I'm not sure, is why Firefox is rendering the text so poorly. That is, it is putting a lot of space beneath the text, but not a lot above it.
Here are some screenshots:
Firefox:
Chrome:
Searching around, I wasn't able to find much reading material on the subject.
Anyone have any ideas why Firefox renders text with space at the bottom, but not at the top? Thanks.
NOTE: I am running Mac OS X Yosemite (10.10.5).
Figured it out. When putting font-family: sans-serif;, Chrome will choose Helvetica Neue, whereas Firefox will choose plain Helvetica. That difference of space is in the font files themselves.
Explicitly declaring
body {
font-family: "Helvetica Neue", sans-serif;
}
instead "fixes" the issue on Firefox, aka, makes it so FF and Chrome will use Helvetica Neue as the render font (assuming it is available).
When I view the site I'm working on using firefox for android, it looks OK if the site is viewed landscape.
However, when the site is viewed portrait, the color defined in body {background: #185fa0;} continues on, making the page unnecessarily long. The image is an example, I would like the blue background to finish much closer to the content, like it does in every other browser. Can anyone advise?
My CSS:
body {
margin: 0px;
padding-top: 0px;
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
background: #185FA0;
padding: 0;
margin-bottom: 0;
}
An example:
Thank-you!
UPDATE:
I found this earlier today, suggesting that it is a bug with firefox, but I don't know how to fix it. https://support.mozilla.org/en-US/questions/1045459
This problem exists ONLY on Mac Safari.
Other browsers / other OS works properly.
The problem:
Observe the font weight of the top navigation here: http://www.octa.com (WordPress)
Then observe the font weight of the top navigation here: http://www.octa.com/products (Magento)
Note that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.
Here's the relevant bits of the css:
nav.menu li a {
font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
font-size: 20px;
text-align: left;
}
nav.menu li a, #subnavwrapper nav li a {
color: #FFFFFF;
font-weight: normal;
height: 50px;
line-height: 50px;
padding: 0 46px 0 0;
}
nav li a {
display: block;
line-height: 1em;
text-decoration: none;
}
body {
color: #000000;
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans- serif;
font-size: 14px;
line-height: 1.55em;
text-align: center;
background: black;
}
Note that the font is imported using #font-face.
I've tried everything - many answers here on SO and other articles. Note that none of the below styles gleaned from other answers / resources corrected the font display.
font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
Try -webkit-font-smoothing: antialiased;
I've found that this simple change made Safari's font-weight property much more reliable.
(I cannot post comments so I can only add my findings to the conversation by posting.)
I have found that text in fixed position elements appears lighter weight than other types of positioning in Safari. Therefore could not be ignored as suggested in other places.
Adding --webkit-font-smoothing: antialiased does solve this , but then it looks lighter than in Firefox. Which can be fixed with -moz-osx-font-smoothing: grayscale
fiddle here to show the problem - Safari only
With the comments / prodding from #JukkaK.Korpela, I discovered a few things:
First, the root of the problem is this:
-webkit-backface-visibility: hidden;
Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker
Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.
Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:
Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"
With that tool, I was able to troubleshoot and solve this quickly.