Comments for matthewbathon.com

Comment on Rounded Corner Form Elements by Progenitura

Progenitura — Sat, 25 Jul 2009 09:27:42 +0000

Thank you. Very quick response. Now I can understand 100%, and it works. Thanks again.

Comment on Rounded Corner Form Elements by mbathon

mbathon — Fri, 24 Jul 2009 14:46:19 +0000

Thanks for the head’s up Progenitura, I must have lost those images when I uploaded the new design. Here are the links directly to them.

Comment on Rounded Corner Form Elements by Progenitura

Progenitura — Fri, 24 Jul 2009 08:13:22 +0000

Very nice effect. But I still can’t figure it out what kind of images did you used. Could you please post them here or send them to me by mail ?

Comment on New Site Design by dadd

dadd — Fri, 17 Jul 2009 21:03:55 +0000

Love the site.
I don’t understand all the things you did to get the site looking like it does, but I like the way it looks. It is easy to read and follow. You did a great job.

Comment on Transparent background PNG’s in IE: The only guide you need by Annie

Annie — Fri, 29 May 2009 14:06:09 +0000

Oh my gosh, thank you so much for telling me how to fix the timing problem! And I love that jquery site! It has great examples and explanations. Very cool.

Comment on Transparent background PNG’s in IE: The only guide you need by Annie

Annie — Fri, 29 May 2009 13:51:30 +0000

Great! Thanks for all the resources. And I like your idea of using pngs on the site and only gifs for IE6 users! If I have any more questions I’ll let you know. You are a lifesaver! I feel like I get stuck on one little thing and it eats away all my time.

Annie

Comment on Transparent background PNG’s in IE: The only guide you need by mbathon

mbathon — Fri, 29 May 2009 02:14:56 +0000

You welcome. Glad to offer the help. With the new code you should now be able to use the pngs. I just referenced the images you already had, but the pngs will now work. As for supporting IE6, this site offers some reasons why you should cut support for it. http://iedeathmarch.org/

One other option for an easier IE6 fix would be to use pngs on all sites that support them, and use the * html hack for IE6 to use the gifs. Only IE6 users will see the jagged edged gifs. This way you could put the images on the a tag instead of the li tag. The hover would then go on the a tag as well and you would not need the javascript to make the iehover event for the li.

It looks like you need to change the (c%5==0) and (c%5==1)
to (c%2==0) and (c%2==1). Since there are only two images, this should switch them the same amount of times.

Since you said you new to development I would like to encourage you try out a javascript library. They make coding things like this super easy. I like http://jquery.com. There is also a jquery plugin you can use to fade between images. http://jquery.malsup.com/cycle. Using these, there is minimal coding from your side. If you would like, I could help show you how to use this on your site. Just let me know and good luck.

Comment on Transparent background PNG’s in IE: The only guide you need by Annie

Annie — Fri, 29 May 2009 01:24:19 +0000

Wow, thank you so much for diving into this for me… so with these two sections of navigation tags, do I need to make the images gifs still? pngs are so much smoother and look better! I’m starting to think that if someone hasn’t updated their software in 5 years maybe they don’t care about website too much!! This is so much effort and I’m thinking that it’s not worth it.

Do you think you can help me with one more thing? The image gallery that I have that switches between 2 pictures, but one picture displays longer than the other… is there a way to make both pictures appear for the same amount of time?

Comment on Transparent background PNG’s in IE: The only guide you need by mbathon

mbathon — Tue, 26 May 2009 20:51:29 +0000

You are correct, the work around for this is kind of a pain. Then again, getting most issues worked out in IE 6 usually are. I guess I would first ask you if IE 6 really needs to be supported on this site. IE7 and up has full support of png transparencies. But since you are asking about it, I am guessing you need to support it. In any case, here goes:

Looking at your code, I can see you have a basic menu and you want png rollovers for them. Here is a demo I made for what you need to do. http://bathew.com/playground/pocketdots.html

- I like to use unordered list for menus. ul#navigation
- A conditional comment for IE 6 and below has been added to add an extra div for the transparency
- That is all the html you will need. The rest is css and javascript
- The first part of the css is for basic styling of list to look like your old menu.
- I am using the hover attirbute on the li. This is the reason we need the javascript. Since IE 6 does not allow hover on anything except an A tag, the javascript basically creates a class of iehover on hover and removed it on mouse out.
- Because of the transparency and the positioning and the link we will need to use that extra div in IE. Basically you remove the background from the li and place it on the div for IE. Now you can still position the li anyway you want and the modern browsers don’t have to deal with the extra code.

If I did a horrible job of explaining that, please let know. I can give more specific clarification if you need it.

Comment on Transparent background PNG’s in IE: The only guide you need by Annie

Annie — Tue, 26 May 2009 17:12:58 +0000

I tried one of the javascript options and while it eliminated the background transparency issues, it also got rid of my relative positioning and rollover images! Are there any other options? Now I’m thinking that I have to include the background on each of the images, which is a pain. If you want to see what I’m talking about my website is http://pocketdots.com

Thanks for your help,
Annie