Unusual visual change between IE and Firefox...

I have come across an unusual visual change between viewing a page in IE 8 and Firefox 3+.

The page is: http://www.impactwebdesign.us/sitetemp1/index-test.php .

In Firefox it shows up as a single line that rotates. In IE 8 it shows it correctly as it is coded and appears to me in Dreamweaver.

Any ideas? And thank you in advance for your help.

 

Sorry, Im not seeing your problem?

In FF I am seeing an empty box with one line of text, "One of the biggest problems people have after downloading scripts from the Internet is; getting them installed, configured, and modified, when needed, to work with their site. With our experience, we can install your script at your site and once installed, get the script configured and working. When a script needs to be modified, our Developers can modified the script to fit the needs of your site. "

On IE I am seeing the same box with images and text that you scroll using left and right arrows.

What part of the page are you referring to?

 

The part that is rotating in the middle of the page...

 

Sorry, I can't see anything rotating in the middle of the page In FF?

 

that is the whole point. i don't understand why.

 

If it works in IE, but not Firefox, your markup is wrong. Never, ever use IE as a reference for how things should work.
You have too many HTML and CSS errors. Validate for those lists that need correcting. Also, look through the error console for all the javascript warnings/errors.

 

I don't see any major errors...

It just doesn't want to work in Firefox on that page... when it work on another domain I have on a html page... http://www.pcanswers-usa.com/

 

First of all... go back to w3schools.com and learn HTML/CSS.

Your table layout is not the way to go, CSS is for layout, not tables.

You call yourself "webdesigner"? Then you should know how to code correctly:

http://validator.w3.org/check?uri=http://www.impactwebdesign.us/sitetemp1/index-test.php

35 errors, mixing XHTML and HTML (doctype is HTML 4.01 Transitional).

(I know, it's easy to slice the PhotoShop design and finish it with DreamWeaver... with tables)

There is no need to rename your files to .php ... just because it looks cooler, no? More professional, eh?

The layout itself is not cool anymore, 3 years ago maybe.

Back to your "site".

Your "slider" does not even work in Google Chrome, because you just did everything wrong!

#slider li {
width : 700px;
height : 500px;
}

Code (markup):

But you are defining

.slider { width:700px; height:284px; margin:0 auto; padding:0;}

Code (markup):

I would say you try it again with the slider on an empty test site.

Your site is loading 804KBytes images... 1MByte in total...

That's how it should'nt be.

#fail

 

Well, pardon my ignorance...

 

Take an empty html page and insert the slider there. See if it works then (in FF it is not correctly shown for me)

 

http://www.impactwebdesign.us/sitetemp1/index-test2.php

There you go....does it rotate for you now?

That proves it has to be in the pre-existing css code for the site. I would think anyways.

 

Definitely the CSS. I added the extra CSS from the site back in and it all went to crap. i will just add the old CSS back in section by section till i get the problem and adjust it there.

 

I found the 2 CSS properties that were causing the problem... I took them out and the rest of the site looks fine and unaffected. So after I tweak it to fit the area I want it looks like it should work fine in Firefox. I will check the others b4 I look in IE.

Thank you for your advice and criticism.

 

Still does not work in Google Chrome