...

View Full Version : Having a hard time!!



Ibanez
11-14-2008, 11:01 AM
Hi all!

Im a bit of a noob and Im having a bit of an issue that I hope somebody could help with.
I designed website using PNG graphics. As everyone knows, IE is less that friendly when it comes to alpha transparency. So I included an awesome script I found here http://www.twinhelix.com/css/iepngfix/ that enebles IE to render PNG's correctly.

The issue Im having now is as follows:
My navbar "got stuck" on overstate in IE (using dreamweaver's script for navbars). I then removed the generic script and did it manually as rollovers.
What Im left with now is a mouseover and mouseout sate, I'm unable make the onmousedown or onmouseclick work! I believe this is due to the iepngfix script.

Here is what I have now : <img src="nav/janup.png" name="janup" width="61" height="21" border="0" class="border" onmousedown="this.src'nav/jandown.png';" onmouseover="this.src='nav/jandown.png';" onmouseout="this.src='nav/janup.png';"/>

Could someone please offer me some advice?
Sorry to give you a long story aswell:D
Thanks!!!

effpeetee
11-14-2008, 11:31 AM
We really need all your code.

abduraooft
11-14-2008, 11:42 AM
Let me ask another question.. Why don't you use a CSS based rollover rather than a javascript based one(which is not reliable)?

Ibanez
11-14-2008, 11:54 AM
Here is my code effpeetee
(I know its messy hehe, it was done in dreamweaver)

<table align="left" border="0" cellpadding="0" cellspacing="0" width="61">
<tr>
<td><img src="nav/garden_r1_c2.png" alt="" name="garden_r1_c2" width="61" height="61" border="0" id="garden_r1_c2" /></td>
</tr>
<tr>
<td><a href="pages/jan.html" target="garden"><img src="nav/janup.png" name="janup" border="0" onmousedown="this.imgsrc='nav/jandown.png'" onmouseover="this.src='nav/jandown.png';" onmouseout="this.src='nav/janup.png';"/></a></td>
</tr>
<tr>
<td><a href="pages/feb.html" target="garden"><img src="nav/garden_r3_c2.png" class="border" onmouseover="this.src='nav/garden_r3_c2_f2.png'" onmouseout="this.src='nav/garden_r3_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/march.html" target="garden"><img src="nav/garden_r4_c2.png" class="border" onmouseover="this.src='nav/garden_r4_c2_f2.png'" onmouseout="this.src='nav/garden_r4_c2.png'"/></a></td>
</tr>
<tr>
<td><a href="pages/april.html" target="garden"><img src="nav/garden_r5_c2.png" alt="" name="garden_r5_c2" width="61" height="21" border="0" id="garden_r5_c2" onmouseover="this.src='nav/garden_r5_c2_f2.png'" onmouseout="this.src='nav/garden_r5_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/may.html" target="garden"><img src="nav/garden_r6_c2.png" alt="" name="garden_r6_c2" width="61" height="21" border="0" id="garden_r6_c2" onmouseover="this.src='nav/garden_r6_c2_f2.png'" onmouseout="this.src='nav/garden_r6_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/june.html" target="garden"><img src="nav/garden_r7_c2.png" alt="" name="garden_r7_c2" width="61" height="21" border="0" id="garden_r7_c2" onmouseover="this.src='nav/garden_r7_c2_f2.png'" onmouseout="this.src='nav/garden_r7_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/july.html" target="garden"><img src="nav/garden_r8_c2.png" alt="" name="garden_r8_c2" width="61" height="21" border="0" id="garden_r8_c2" onmouseover="this.src='nav/garden_r8_c2_f2.png'" onmouseout="this.src='nav/garden_r8_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/aug.html" target="garden"><img src="nav/garden_r9_c2.png" alt="" name="garden_r9_c2" width="61" height="21" border="0" id="garden_r9_c2" onmouseover="this.src='nav/garden_r9_c2_f2.png'" onmouseout="this.src='nav/garden_r9_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/sep.html" target="garden"><img src="nav/garden_r10_c2.png" alt="" name="garden_r10_c2" width="61" height="21" border="0" id="garden_r10_c2" onmouseover="this.src='nav/garden_r10_c2_f2.png'" onmouseout="this.src='nav/garden_r10_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/oct.html" target="garden"><img src="nav/garden_r11_c2.png" alt="" name="garden_r11_c2" width="61" height="21" border="0" id="garden_r11_c2" onmouseover="this.src='nav/garden_r11_c2_f2.png'" onmouseout="this.src='nav/garden_r11_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/nov.html" target="garden"><img src="nav/garden_r12_c2.png" alt="" name="garden_r12_c2" width="61" height="21" border="0" id="garden_r12_c2" onmouseover="this.src='nav/garden_r12_c2_f2.png'" onmouseout="this.src='nav/garden_r12_c2.png'" /></a></td>
</tr>
<tr>
<td><a href="pages/dec.html" target="garden"><img src="nav/garden_r13_c2.png" alt="" name="garden_r13_c2" width="61" height="21" border="0" id="garden_r13_c2" onmouseover="this.src='nav/garden_r13_c2_f2.png'" onmouseout="this.src='nav/garden_r13_c2.png'" /></a></td>
</tr>
<tr>
<td><img src="nav/garden_r14_c2.png" alt="" name="garden_r14_c2" width="61" height="62" border="0" id="garden_r14_c2" /></td>
</tr>
</table>

I'm a beginner and I dont really know how abduraooft. :-/
Would it not interfere with the iepngfix?

Ibanez
11-14-2008, 12:12 PM
Dunno if links are allowed here but the url to my site is here http://www.hadeco.co.za/

abduraooft
11-14-2008, 12:23 PM
Hi Ibanez, I'd recommend you to read "Why tables for layout is bad (http://www.hotdesign.com/seybold/)?"

Doctor_Varney
11-14-2008, 12:23 PM
Here is my code effpeetee
(I know its messy hehe, it was done in dreamweaver)

I'm a beginner and I dont really know how abduraooft. :-/
Would it not interfere with the iepngfix?

Yes sir, it is possible to style your menu with CSS, using images in the hover part. This is much more efficient and reliable than using Javascript and especially, Dreamweaver produces very inefficient code. A quick search or perhaps take a look at the W3C Webschools should put you right on this.

Don't worry too much about the fact your code is messy for now. Of course, tables are just messy anyway, though looking towards some simpler CSS to position your elements, will bode well for the future. That all depends on how often you need to edit your site.

Doctor_Varney
11-14-2008, 12:35 PM
Hi Ibanez, I'd recommend you to read "Why tables for layout is bad (http://www.hotdesign.com/seybold/)?"

Meaning absolutely no offence at all, towards Abduraooft; though I'd advise caution with answers like this. Although the information within is absolutely correct and the poster is absolutely right to lead you there, if you know no CSS as yet, you could be in for a long and steep learning curve, which could set you back, if you need your site to move along quickly for now.

Take a look at transitional design to begin with(described at the above link). For instance, you can still style tables, relatively efficiently in CSS - at least, better than you can with Dreamweaver. I'd advise to start by enhancing your HTML with some inline styles and later step this up, gradually, into a full CSS design, when you have the chance to sit down and learn fully, with few distractions.

You should be able to bring some menu styling in, which I think will be a great introduction to using CSS, whilst creating you a very nice little menu system, without the convoluted and unreliable mess of DW Javascript.

Unless, of course, you have the desire to put your site's progress on a backburner for a little while and devote some time to learning the concepts of CSS before re-launching. It's up to you.

But DO be sure to read the excellent article Abdura links to. It's very worthwhile to discover how much work you could save yourself in the longterm scheme of things.

Just my opinion.... Take it or leave it.

Hope this helps in some way,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Ibanez
11-14-2008, 12:45 PM
I've heard that tables are the root of all evil abduraooft, but I would rather have a root canal done than to rebuild this site AGAIN :eek: (you have no idea how many times I had to do this)

Doc_V the site will change on a monthly basis. I have used CSS alot in the site, to make my life easier when I have to change it, but as for menu's I have alot more to learn. I know the site is flawed in many many ways, but apart from that... Is there simply NO way to add a down state...? I just cant spend more time on this to rebuild the site...:(

Doctor_Varney
11-14-2008, 12:50 PM
Is there simply NO way to add a down state...? I just cant spend more time on this to rebuild the site...:(

Believe me, Ibanez, I Do sympathise with your position here. I know how frustrating it can be, when all you want is a swift fix to a problem.

However, I'm sure that by rooting out the mouseover states from the Dreamweaver document, you can bring in a simple CSS menu. The code is really not all that complex to create the image-swapping effect you desire.

But hang on...

I've had a look and to be honest, it seems to work very nicely, both in Firefox and IE. The menu text expands and turns red when mouseovered and stays red, when clicked and the links all seem to be operating correctly. I do apologise if this seems like a stupid question, but what exactly is the problem?

Regards,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Ibanez
11-14-2008, 01:05 PM
Yeah you right!!
Ok so Im gonna go muck with CSS now and try to get this fixed by the end of the day...
Ill let you know how it went ;-)
So let me just make sure Doc... This will in no way mess with the IEPNGFIX script? Because I really need that to work more than anything! What I mean is Does CSS not interfere with JS?
Oh and thanks for the advice dude!

Doctor_Varney
11-14-2008, 01:27 PM
So let me just make sure Doc... This will in no way mess with the IEPNGFIX script?

Well, I wouldn't like to say for sure, but I very much doubt it. All CSS does is style the elements you put in your HTML. It's not scripting, so no reason for it to interfere with any scripting you do have, although with CSS image swapping in your links, you won't need any scripts at all.


Because I really need that to work more than anything!

Um... What exactly does it DO? What's the effect you're after? Did you know, you can actually apply translucency, via filters in CSS (if that's what you're after)? Though how well supported it is, I'm unsure.


What I mean is Does CSS not interfere with JS?

It shouldn't do. Do what I do, and make a testing folder. Reproduce your site there and work on isolated parts of it.

If you need a good code editor, for manual coding, try this (http://notepad-plus.sourceforge.net/uk/site.htm).


Oh and thanks for the advice dude!

No problem. I had no idea how much CSS knowledge you already had. More than I thought.

As it is, the site does look pretty damn good, to my eyes. If it's just a slight visual enhancement you want, remember - what the viewer does not see, he does not grieve over.

Good luck!
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

abduraooft
11-14-2008, 01:50 PM
Meaning absolutely no offence at all, towards Abduraooft; though I'd advise caution with answers like this. Although the information within is absolutely correct and the poster is absolutely right to lead you there, if you know no CSS as yet, you could be in for a long and steep learning curve, which could set you back, if you need your site to move along quickly for now. The actual title of that page is

Why tables for layout is stupid: problems defined, solutions offered

Doctor_Varney
11-14-2008, 05:04 PM
Like I said, Abdura, no offence - and I think it's a great place to start, too, because it does offer solutions.

However, if you know tables and you've got a limited deadline, it can be just as stupid to drop all you know and dive into CSS. I know, because I did exactly this, thinking I could tackle the project quickly. How wrong I was. Steep learning curve and I only just got away with it, but I like to think I've come out of it, better.... Albeit slightly mad... :D

Thankfully, the staff in this here asylum have been very helpful.
(I get by with a little help...)

Regards,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Millenia
11-14-2008, 05:22 PM
Meaning absolutely no offence at all, towards Abduraooft; though I'd advise caution with answers like this. Although the information within is absolutely correct and the poster is absolutely right to lead you there, if you know no CSS as yet, you could be in for a long and steep learning curve, which could set you back, if you need your site to move along quickly for now.

I'm sorry but I have a different opinion about that. I would much rather have a generally better site, by putting more effort into making it. Making it move quickly now, will make it move slower in the future.


I've heard that tables are the root of all evil abduraooft, but I would rather have a root canal done than to rebuild this site AGAIN :eek: (you have no idea how many times I had to do this)

Well I think doing it again would be worth it...Besides, just read on a CSS tutorial, and you won't have to do you're layout again. Just change you're tables to divs. Just try it :)

Good luck

Apostropartheid
11-14-2008, 05:34 PM
I'm sorry but I have a different opinion about that. I would much rather have a generally better site, by putting more effort into making it. Making it move quickly now, will make it move slower in the future.
Couldn't put it better myself. I sympathize with the position you must have been in and you probably should've finished the site first, but the OP should read up on CSS and semantic, clean layout in his spare time.

The majority of a web designers' job is learning, and it will always be this way. Stuff never stays the same, and that's why you're paid, right?

Ibanez
11-17-2008, 12:45 PM
Thanks to everyone who commented :)
There was a limitation to the png fix I was using which prevented me from doing it in CSS initially however I managed to get it sorted:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum