Javascript, Slices & IE 7 Problem

moonlit

New Member
Ok, this is really confusing, I'm not sure what the problem is...

When I visit the site I'm in the process of making it will display fine in Firefox, Netscape & Safari. When I visit the site in IE 7, my slices are not aligned properly and my drop down menu navigation using CSS & Javascript won't work. Here's the link:

http://www.classicengraving.org/New Layout 6/layoutv7.html

I'm not an expert but know mainly HTML and some CSS. Can anyone help me pinpoint the problem?

Thanks.
 

jnjc

New Member
I've had a quick look at this. Focusing on the line through the logo. The Logo image is split across two rows of a table. Both the image and the row have a explicit height. I found if you increase the height of the image but not the row (by 1px) on both sections the line disappears. I have seen these 1px differences between FF and IE. I tend to try and design things so that the 1px doesn't matter.

I won't go into the argument that you shouldn't use tables for layout, do a search on it if you want to know more....

What ever you used to slice the images made some poor choices which I think ultimately is going to give you headaches. You should look at having one row which contains your logo and menu and another row that contains you rounded corner etc... this way a pixel here or there will make no difference...
 

moonlit

New Member
Thanks for the tip. If I kept the logo & menu bar in one slice, how would I go about coding the drop down menu with the image menu bar? Would I use image mapping instead of actual individual slices?

Also, just curious...how would my layout work in CSS instead of tables? I know you probably can't explain it all to me but maybe some basic info would help. Thanks.
 
Last edited:

jnjc

New Member
Thanks for the tip. If I kept the logo & menu bar in one slice, how would I go about coding the drop down menu with the image menu bar? Would I use image mapping instead of actual individual slices?

Doesn't necessarily have to be one slice, but one row. At the moment your logo is split over two rows, which is causing you a problem. So if you where using tables you'd have

<tr><td> Logo</td><td>Menu Logic</td></tr> .......



Also, just curious...how would my layout work in CSS instead of tables? I know you probably can't explain it all to me but maybe some basic info would help. Thanks

Taking you heading with the logo as an example (and writing this off the top of my head).
Start with a div with fixed width of say 750px, set the background image to be your logo and have it no repeat, position middle, left . Then within this div put another div to hold your menu. Set the menu div to be position relative and then use top and right properties to position it where you want.

There are other ways to do it but this should work and give you an idea of the concepts behind using .css to layout your page.

HTH,
JC
 

moonlit

New Member
Ok, I've resliced my site. It displays fine as far as slices are concerned. However, I still can't get the drop down menu to work in IE 7, it works in Firefox 3 just fine. I've completely started over again & haven't added all the drop down menu nav just yet...only added the "about us" part. I checked code validation in Dreamweaver & got this message: No errors or warnings found.[HTML 4.0]. I went to the Markup Validation and just received a message about displaying an ALT tag which isn't all that necessary for me. Here's the link to my site: http://www.classicengraving.org/New%20Layout%208/layoutv9.html

Help please!
 
Top