Different in IE than FF

cpawebmaster · 05-03-2010, 11:53 PM

Website: http://www.charityparade.org
CSS: http://www.charityparade.org/style.css

The problem is that the search bar in IE appears about 5 pixels lower than in FF. I've tried using top:5px; for the div with a separate css for IE with no success. An idea might be the <--[if IE]--> conditional statements which I tried but I think I did something wrong. Also in IE the marquee is not centered (off to the right) unlike FF. If anyone has any ideas your help will be greatly appreciated.

Thank you,
CPAWebmaster - www.charitableprofitarrangement.org

abduraooft · 05-04-2010, 08:43 AM

Starts with fixing the errors in your markup, http://validator.w3.org/check?uri=ht...ityparade.org/

cpawebmaster · 05-15-2010, 09:34 PM

Only errors are related to the marquee's attributes like no class, truespeed, scrollspeed, and such. Doesn't explain why it has shifted off to the right. Any other ideas? If you look at the search bar now... it is under 1 div container but the box is low and the submit image is high (yet they have a single padding setting applied for both)... Thanks though!

Lori700698 · 05-16-2010, 03:01 PM

Let me share my FF & IE "learned the hard way"

Lesson 1, FF is forgiving and IE is not, if you are missing a closed tag FF will many times still deliver the page, IE won't and everything appears bonkers.

Lesson 2, FF and IE won't space the same so you have to watch those exactly placed items. Test in both browsers often as you are coding, it truly blows to finish a page just to realize that your perfectly aligned menu in FF is sitting in your banner in IE. Sometimes you have to find the happy medium.

I didn't look real hard at your code but you have a lot of tags, go through and match them all up would be my first check. Padding is the content inside the box/container. margin-bottom:15px; Will serve you better

Lori

drhowarddrfine · 05-16-2010, 05:13 PM

There is no such thing as marquee in HTML, though most browsers support it. How they position it might be a different story. Try adding 'vertical-align:bottom' to the CSS for that element and see what happens.