Link to home
Start Free TrialLog in
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 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: 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

Avatar of COBOLdinosaur
Flag of Canada image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of isaacr25


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.