Avatar of isaacr25
 asked on

CSS positioning off in Internet Explorer

Hey guys,
I'm having some trouble getting a portion of my site to line up correctly with CSS, in Internet Explorer (I'm using IE 9). Take a look at www.mwebdev.com/ft.html. The block on the right with the large countdown timer is what I'm trying to position.

In Firefox and Chrome, it is positioned the way I want it. But in IE, it's positioned lower than intended. See this screenshot: www.mwebdev.com/block.jpg. Why is IE interpreting my CSS lower than the other browsers? And how can I fix it?

I've also attached my snipped of CSS code that deals with this block. Thanks in advance for your guidance.

#block-jquery-countdown-jquery-countdown {float:right; width:306px; height:412px; margin-top:16px; background:url(images/header-bg-right.png) no-repeat;}
#block-jquery-countdown-jquery-countdown .content {padding:0 20px 10px 20px;}
.hasCountdown {background:none; border:none; padding-top:17px;}
.countdown_show4 .countdown_section {width:100%;}
.countdown_section {font-size:25px; padding:23px 0 13px 0; border-bottom:1px dotted #e5e4e4; text-transform:lowercase;}
.countdown_descr {font-size:20px; text-transform:uppercase; padding-top:12px;}

Open in new window

CSSWeb Languages and StandardsWeb Browsers

Avatar of undefined
Last Comment

8/22/2022 - Mon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

I'll replace the doctype and test right away.

Interestingly enough, now Chrome and IE align the same, but Firefox has the lower alignment. Any other suggestions?

I the link is no longer working so I can look at the page.  If it has been validated then there may be some minor something in the CSS not being interpreted the same, or if it is off by a small amount, it may just be natural behavior that we have to live with when we support browsers from multiple manufacturers who don't always do the math the same way.

Your help has saved me hundreds of hours of internet surfing.