Web design question (used Dreamweaver, but looks different in IE / Firefox)

[Emily]

Hi,

I have a web design question.

I designed a website in Dreamweaver and everything looks perfect in Internet Explorer, but when I load it in Firefox, some colors are missing and the layout seems to have a mind of its own.

I looked a bit online and found this "code validator" thing that I'm running my code through, but if that doesn't work, I'm looking for alternatives. I'm just not sure how to fix it really, since it looks fine in Dreamweaver..

Any suggestions? I know this has probably been discussed on a zillion websites, but I thought I might get some good, direct answers here.

Thanks so much,
Emily

[cutout]

Can you post a link?

If colors are outright missing in Firefox, it's sometimes because you forgot the pound-sign (#) before your hex value.

[erika]

cutout is probably right.

Send a link and I'll take a look at it for you... it might also have to do with your stylesheets. Plus, Firefox does react differently (i.e. sometimes ignores) table border colors for some reason.

[Emily]

cutout is probably right.

Send a link and I'll take a look at it for you... it might also have to do with your stylesheets.

...my what?

yeah, cutout is right, I did a silly thing when I selected my colors, I figured the color code box had like a character limit, so I just held down the letter "CCCCCCCCCCCCCCCCC" until I figured it reached the limit, but apparently there's no limit, so... I have a lot of deleting to do. so embarrassing.

Just sharing this info so no one else makes the same mistake..

I still have to double check all the tables later.

Thanks guys!

[erika]

Here's a good guide to colors

http://www.blythe.org/webwork/numbercolor.html

[cutout]

Erika, are you a designer/developer also? Seems like there's plenty of them among the FoTs.

[erika]

Yah I'm a web content manager/project manager/sorta designer type person.

I majored in multimedia design but have been doing marketing and project management for 9 years or so. I still get to do some fun photoshop and html stuff though

It's good to be a geek...

[Emily]

Thanks guys. My colors are fine now. My tables are kinda screwy .. but I think I'm letting that one slide.

However, I have a ton *hotspots with information about images & none of them are working in Firefox (working fine in Explorer) -- any tips?


Thanks sooo much.

[senorcorazon]

Thanks guys. My colors are fine now. My tables are kinda screwy .. but I think I'm letting that one slide.

However, I have a ton *hotspots with information about images & none of them are working in Firefox (working fine in Explorer) -- any tips?

Thanks sooo much.

When you say hotspots, do you mean that when you mouseover the area it's not changing like it's supposed to?

If you can get away with it, learn CSS and DIVs instead of TABLES. Everything is moving that way and once you're used to tables it gets hard to switch. 

This is a good site for references on EVERYTHING: http://www.agencytool.com/dashboard/

[cutout]

Emily, can you post a link?

[Emily]

When you say hotspots, do you mean that when you mouseover the area it's not changing like it's supposed to?

If you can get away with it, learn CSS and DIVs instead of TABLES. Everything is moving that way and once you're used to tables it gets hard to switch. 

This is a good site for references on EVERYTHING: http://www.agencytool.com/dashboard/

I'm not looking to swap images -just for text to appear over an image on a mousover. Like if I have a group photo and I want the personal names to come up when the cursor is hovering over a specific person. But I'm not linking them to anything -it just for information.

I used the Hotspot feature in Dreamweaver to draw little blue hot spots on the people's heads. But they're not working in Firefox..


Sorry I can't post a link yet because it's not online..

Thanks for your help! I really appreciate it.

[KickTheBobo]

When you say hotspots, do you mean that when you mouseover the area it's not changing like it's supposed to?

If you can get away with it, learn CSS and DIVs instead of TABLES. Everything is moving that way and once you're used to tables it gets hard to switch. 

This is a good site for references on EVERYTHING: http://www.agencytool.com/dashboard/

I'm not looking to swap images -just for text to appear over an image on a mousover. Like if I have a group photo and I want the personal names to come up when the cursor is hovering over a specific person. But I'm not linking them to anything -it just for information.

I used the Hotspot feature in Dreamweaver to draw little blue hot spots on the people's heads. But they're not working in Firefox..


Sorry I can't post a link yet because it's not online..

Thanks for your help! I really appreciate it.

It takes some hand-coding, but CSS image maps might be what you are looking for.

article and tutorial here: http://www.frankmanno.com/ideas/css-imagemap/#ex

[Emily]

Thank you!

I guess I can post a link now, I'm a little nervous because it still has kinks & jumps around a lot..


Thanks so much to anyone who looks at it.


Also, I recognize that it's not the most coherently structured site..


The "hotspots" I was talking about are on this page (view in Explorer) when you mouse over the medals (not working in FF):

http://lbi.org/WWI/ExhibitWWIPart3_01.html


Ok, last edit! I just wanted to clarify - I'm not asking for anyone to do any work on this AT ALL. I'm just asking if anyone happens to notice any glaring reason for my layout issue. Just to point that out, if it's something very obvious to you, and if you feel like commenting on it.

Thank you so much.

[erechoveraker]

I took a snapshot of how the page looks in the latest Safari, and scribbled some notes on it.

If you can, you should truncate World War 1 to WWI if you can to avoid that line break. Or add a new wider table before the other table to let it fit.

Also, the links up and downedness looks weird. There is a button in dreamweaver in the properties window that'll do that for you, align or valign (I forget which one) to top etc.

(snip image removed)


Other than that, it looks pretty good.

EDIT - I just looked at your source code, and those links are valigned to top, it must be something else causing the funk. Something in a stylesheet maybe?

Also, that World War 1 line break isn't happening in firefox for me, but you still might want to widen the table for that just because.

[Emily]

Thank you Erechoveraker! I really appreciate your help.