Jump to content
Sign in to follow this  
jamiewalden

IE9 Compatibility Alignment of Boxes

Recommended Posts

jamiewalden

Hey guys, For some reason, IE9 Compatibility mode is bumping my boxes about 20 pixels to the right. I wish I didn't have to account for ie compatibility, but some of our application products are used in that mode so i have to. If you don't have IE (a) lucky you, and (B) here's a link to the a screenshot: http://blogstage.americandatanetwork.com/wp-content/uploads/2011/10/ie-compatability-alignment.jpg I'm not totally versed in the jedi ways of coding, so here's the custom box code I trialed and errored my way into to get the box header images to span the width of the content. Perhaps there's something wrong with it.

.dcol_4 {
	width: 229px;
	margin-left: 10px;
	margin-right: 2px;
	margin-top: -12px;
	margin-bottom: -20px;
	}

The site is: blogstage.americandatanetwork.com Thanks very much for your help.

Share this post


Link to post
Share on other sites
jamiewalden
Also i have the Google IE Compatibility Script option ticked.

Share this post


Link to post
Share on other sites
Rob
Jamie, the good news is below. The bad news is, I couldn't fix it as its not really broken. [img]http://www.epicurus.com/wp-content/uploads/2011/10/adn.png[/img]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Kate
Please try commenting out what you have (as posted above) and trying this instead: [code].fbox{width:236px !important;margin-left:10px !important;} .fboxinfo{width:230px !important;} .fboxgraphic{width:236px !important;} .fbox .dcol-pad{padding:0px !important;padding-bottom:10px !important;} #boxes .content{width:986px !important;} .dcol_container_4{width:986px !important;float:left !important;} #fbox_745{margin-left:2px !important;}[/code] [b]Edit:[/b] Looks like Robert posted at the same time :) I would still try this code instead. The code you're using may not always render reliably across different browsers as the widths/calculations are off.

Share this post


Link to post
Share on other sites
jamiewalden
Thanks for the response. That code makes it perform the same across all browsers, but the outer edges don't align with the feature box. Could we tweak your code to make it do so?

Share this post


Link to post
Share on other sites
Rob
Jamie, Everything in IE9 that I've checked out shows up perfectly aligned. I must therefore conclude that your browser has either an odd setup or a very full cache that needs to be cleared. Likely, very, very few people would see any misalignment. You must consider that all browsers have slight variables and all computers do not show perfect color resolution. A single color on one computer might look lighter or darker on another. I'm not sure if you've done it, but perhaps you should shut down IE entirely (close all instances), wait ten minutes, then start it up again. If you see the same results you do now, then the problem is likely your computer and some setting. Kate's one of our best moderators so if she didn't see some specific cause, there likely isn't one.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jamiewalden
My content width is 960px, not 986px, so I tweaked the code and it seems to be aligning right now. Thanks so much for both of your help! For future readers, here's want i tweaked the code to: [code].fbox{width:230px !important;margin-left:11px !important;} .fboxinfo{width:230px !important;} .fboxgraphic{width:230px !important;} .fbox .dcol-pad{padding:0px !important;padding-bottom:10px !important;} #boxes .content{width:960px !important;} .dcol_container_4{width:960px !important;float:left !important;} #fbox_745{margin-left:0px !important;} #fbox_742{margin-right:0px !important;} [/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×