I FIXED IT!!!!!!! YAAAAAAAAY!!!!
So I found this thing yesterday online (one of the biggest parts of programming is learning how to use google... ;) ) and it's an htc file which uses Javascript that makes IE compatible with the :hover command. So yesterday I was playing with it, and it wasn't working, and that made me mad. Today I went back to it to play with it some more, and after viewing the source on a site I knew worked, I copied their code and pasted it into my htc file. Then I referenced it in my external style sheet, and refreshed my website.
AND IT WORKED!!!!!!!!!!!!!!
XDD
So I'm a little excited... :D my gallery is here if you want to see it! Now whether in IE or Firefox, it should work!
Thanks to http://www.xs4all.nl/~peterned/csshover.html for the code!
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
2.20.2010
Computer Adventures part 1
So I have an AWESOME web design class right now, it's definitely one of my favorites! Using http://w3schools.com/, we're going through tutorials with CSS and HTML. HTML is fun to refresh, my coding skills are pretty outdated. I mean, it's the same HTML, but I've never played with the div tags and the span tags. I've missed out a lot apparently, 'cuz they're super fun. If you want to see the website I'm building (and keep in mind, this is my experimental playground, so nothing is really serious... ;) ) the URL is http://shcheidi.webng.com/
But I'm having some trouble with the Internet Explorer non-support of the :hover tag in CSS. And it's starting to bug me. I have an awesome gallery of flowers which are all images, and when I hover over them in Firefox, they go to full opacity, but in IE, they don't.
Now, I could just copy/paste the following code into my HTML:
and it works in both browsers flawlessly. The problem is, what if I have 40 images in my gallery? That would take tons of time to copy/paste it for every single one... and that would be really impractical if I suddenly decided to decrease or increase opacity. I'd have to edit every one of them.
So yesterday I asked my brother, who is a genius and knows CSS better than I do, and he found the following code for me to put into my external style sheet:
img#flower {
opacity:0.4;
filter:alpha(opacity=40);
border: none;
}
img#flower:hover {
opacity:1.0;
filter:alpha(opacity=100);
border:none;
}
and it works perfectly in Firefox. And I only have to edit the style sheet for it to work in my web page. The reference I have in my HTML is:
<img id="flower" src="http://www.blogger.com/flowers/flower2.jpg" />
with the id="flower" I reference my CSS external style sheet. It's pretty awesome, I'm still thrilled with that ability to do that... :D
BUT it doesn't work in IE. So I'm going to keep researching and find out what I can do about that. Believe me, if I find a break though, you'll be the first to know.
And hopefully you guys won't stop following me after this post... it's a bit weird to read... haha
Now, I could just copy/paste the following code into my HTML:
<img src="flowers/flower1.jpg" style="opacity: 0.4;"
onmouseover="this.style.opacity=1;
this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;
this.filters.alpha.opacity=40"
/>
and it works in both browsers flawlessly. The problem is, what if I have 40 images in my gallery? That would take tons of time to copy/paste it for every single one... and that would be really impractical if I suddenly decided to decrease or increase opacity. I'd have to edit every one of them.
So yesterday I asked my brother, who is a genius and knows CSS better than I do, and he found the following code for me to put into my external style sheet:
img#flower {
opacity:0.4;
filter:alpha(opacity=40);
border: none;
}
img#flower:hover {
opacity:1.0;
filter:alpha(opacity=100);
border:none;
}
and it works perfectly in Firefox. And I only have to edit the style sheet for it to work in my web page. The reference I have in my HTML is:
<img id="flower" src="http://www.blogger.com/flowers/flower2.jpg" />
with the id="flower" I reference my CSS external style sheet. It's pretty awesome, I'm still thrilled with that ability to do that... :D
BUT it doesn't work in IE. So I'm going to keep researching and find out what I can do about that. Believe me, if I find a break though, you'll be the first to know.
And hopefully you guys won't stop following me after this post... it's a bit weird to read... haha
Subscribe to:
Posts (Atom)