EDIT 10:04 PM I RESOLVED THIS
Yeah I figured this out, but the forum software here doesn't let me post an answer to my own question until 8 hours have elapsed. Anyway, I found the solution here. It uses a pure HTML approach and I tested it successfully in all 5 browsers. Just had to put in the HTML: <img src="starter1.jpg" onmouseover="this.src='starter2.jpg'" onmouseout="this.src='starter1.jpg'" />
I'm trying to set up a page (eventually several pages) featuring this:
1) A default image loads when the page loads.
2) When you mouse over, a slightly different image loads.
3) When you move away from that, it goes back to the original image.
I figured this was easy with a little CSS, and it is, except when it comes to Internet Explorer. Here's what I have (it just shows 2 pictures of a broken starter from my car):
<html>
<head>
<style>
#pic1
{
width:500px;
height:500px;
background:url("starter1.jpg")no-repeat;
}
#pic1:hover
{
background:url("starter2.jpg")no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
It works just fine in Firefox, Chrome, Safari, and Opera, but not in Internet Explorer 8. In fact, in IE8, neither image loads. I just get a blank white screen. Am I missing a detail? Is there a way to get this to work on all browsers? I read something about wrapping it in an anchor tag but that didn't do anything either.
EDIT:
I can't seem to comment on any post without the code looking terrible, so here goes. I tried this:
<html>
<head>
<style>
#pic1
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
#pic1:hover
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
Now the first image shows up but the hover over image doesn't. IE keeps telling me "To protect your security, Internet Explorer has blocked this website from displaying content with security certificate errors." as soon as I open up (IE, before going to the page with my pictures), then asks if I want to view only content that was delivered securely. I always just say "No".
Lastly, if I try this:
<html>
<head>
<style>
#pic1
{
background: #FFFFFF url(starter1.jpg) no-repeat fixed center;
}
#pic1:hover
{
background: #FFFFFF url(starter2.jpg) no-repeat fixed center;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
I get nothing at all, no images of any kind in any browser.
You need to use proper syntax. Here is the proper syntax.
element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}
Notice there are no double quotes ("")
Related
Padding property started behave strange (in browser) after i had tried to create one-page scrollable website. Basically initially I had my index.html file linked to the styles.css file. I wanted to create one-page site so I googled it and found this site:
https://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/
I followed the instructions: created side-bar and some sections to test it, but without using js script. It all worked perfectly except 1 thing: titles in side bar werent highlithing when scrolling, so I tried to implement the script (I created new file and paste the code from tutorial) and this is the part when it started to behave strangly: basically my title which was located also in side bar got much larger and padding around all page elements appeared. BUT THATS NOT ALL: that padding is still there (even after I deleted all elements and created everything from scratch), which I suppose shoudnt be there.
I want to get rid of it. Here is screenshot from my browser:
here
On the screenshot you can see 1 elemeent with some text. The thing is that I suppose that this text should be in the very top left corner but it is not.
Here are my index.html and styles.css files:
HTML:
<!doctype html>
<html>
<head>
<title>RA TOOLKIT</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-menu">eha</div>
</body>
</html>
CSS:
body{
background-color: red;
display: flex;
flex-direction: row;
padding-top: 0px;}
.nav-menu{
background-color: white;
transition: all .2s;
width: 25vw;
min-height: 100%;
box-sizing: border-box;}
.nav-menu:hover{
background-color: greenyellow;}
Thanks in advance!
(sorry for my english : D )
When I tried to inspect element the page, i found that your html body has an 8px margin that you thought was the padding. I don't really know what caused this, but you can just overwrite the styling by giving a
body {
margin: 0px
}
to your html body. You can always use inspect element to figure out your final style render of your page
Currently when I use the new API for the personalised sign in with google button, when the button is centered vertically in a flex container, when it is loading it flickers up and down.
Example code is shown below, just in html and css for simplicity, however building this in react - same thing happens.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css"
></link>
</head>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="./script.js"></script>
<div
id="g_id_onload"
data-client_id="920029725372-e913v434vc2hfbb6cfkrs7qhiuvuita6.apps.googleusercontent.com"
data-callback="handleCredentialResponse"
></div>
<div class="button-wrapper">
<div class="g_id_signin" data-type="standard"></div>
</div>
</body>
</html>
CSS:
body {
width: 100vw;
height: 100vh;
margin: 0;
}
#font-face {
font-family: "Google Sans";
src: url("https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtzCwM.ttf")
format("truetype");
}
.button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Any help would be greatly appreciated! Sorta wish google would allow for custom buttons or at least an API so that issues like this could be avoided instead of forcing devs to use an <iframe/>, also the new API isn't awesomely documented (I'm assuming because of how new it is but hopefully this will get better with time.
For some reason, Google created two div's to house identical buttons. The second, with the iframe, replaces the first when the proper font loads. The order in which the css is modified by Google means that no matter how you try to correct the flash with pure css, it will still show up in some way. I went so far as to overlay the div's using position:absolute but the margin gets modified on the first div so it still shifts up before vanishing.
The only thing I found to work is hide one of the div's permanently. Either way works, the difference is the button font. This one lets the iframe only version load:
.g_id_signin > div > div:first-child{
display: none;
}
This one loads the initial div only, so the font is off, but it shows up faster and the auth flow still works:
.g_id_signin > div > div:last-child{
display: none;
}
You could probably catch and handle the flicker via javascript, but I'm not spending that much time on this. I'll use this css fix until Google updates their code.
The best solution I found is to wrap the Sign In with Google button in a div and make that div's height 44px i.e. the height of the button. That way as the button loads additional content, it won't move anything up and down.
As the old generic sign in with google button disappears and new sign in with name and email appears, that unloading and loading seems to cause the flicker.
.GoogleLoginButtonContainer {
height: 44px;
width: auto;
}
I am trying to mask an image using CSS and the WebKit property ( -webkit-mask-image ) .
But due to some reason, the mask doesn't work when I use it from local files on my PC or even when I upload it to a website of mine and use the link. If I use the mask image directly from the tutorial website I followed the mask works fine.
In the below code you can see I have commented out a webkit-mask-image and if you run the code as it is you would see nothing whereas if you uncomment it and comment out the second webkit-mask-image it would start working. Same thing happens if I use the file path of my PC instead of the tutorial URL.
Please help me out with this. seems really weird.
<!DOCTYPE html>
<html>
<head>
<style >
html, body {
height: 100%;
}
img.two {
height: 50%;
width: auto;
}
.mask4 {
/*-webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");*/
-webkit-mask-image: url("https://3dmetalart.com/wp-content/uploads/2020/05/image-mask.png");
-webkit-mask-size: 400px 600px;
}
</style>
</head>
<body>
<h1>Image mask using png </h1>
<img class="two mask4"src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg"><br>
</body>
</html>
I hesitate to say that there’s a bug in wordpress but this has gotten me stumped. When I view the following in chrome as a html file it works perfectly. When I try to do this in wordpress I have all sorts of issues on different mobile devices. Essentially, the left and right id’s are not taking up the width that’s being assigned. I deactivated all plugins except add css code and I did a healthcheck, neither yield any insight to the problem. Here’s the code:
<!DOCTYPE html>
<html>
<head>
<style>
#container{
display:flex;
justify-content:start;
width:100vw;
font-size:3vw;
}
#left{
width:35vw;
border:solid black 1px;
border-shadow:border-box;
}
#right{
width:65vw;
border:solid black 1px;
border-shadow:border-box;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="left">mobile</div>
<div id="right"> different devices have problems</div>
</div>
</body>
</html>
The page I need help with: https://www.sustainablewestonma.org/test-2/
On your website, there's a CSS rule for html, body which contains min-width: 490px
This causes your body to be wider than the screen on small devices (i.e. more or less any smartphone in portrait orientation). The right/left rules apply, but their percentages are calculated from body width 490px.
I created some pages to display a simple picture gallery, just the picture in the middle with next and back to click on either side of it. The picture sizes average about 800X1050, which fit great on my 1920X1200 monitor. What I needed was a way to automatically resize the picture to the browser height for use on smaller monitors, and I managed to get that to work after much searching on this site and others. I tested this on my wife's laptop and was happy with the results. However, when I tested it at work on our IE8 browsers (don't ask me why...), it doesn't work. Some of the people I will be sharing this gallery with will have to view it on our woefully outdated computers, so I've been trying the past couple of days to get it work and I can't. Here's the sample code I currently have for each of the gallery pages. There could very well be some unnecessary / redundant bits as I cobbled this together from many sources. Any help for this problem, and possibly even any improvements would be greatly appreciated!
<html>
<title>Picture Gallery</title>
<head>
<style>
.numbering {
vertical-align: top;
}
img {
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body bgcolor="silver">
<center>
<img src="10.png" class="numbering">
<img border="0" src="back.png">
<img src="picture.jpg">
<img border="0" src="next.png">
<img src="spacer.png" class="numbering">
</center>
</body>
</html>
As the Max-width property works in ie8, Use width: inherit; to make it work with pure CSS in IE8.
like this
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed for the code to work. */
height: auto; /* Add !important if needed. for the code to work */
}