IE9 Compatibility Alignment of Boxes

[jamiewalden 1]

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 ( 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.

[jamiewalden 1]

Also i have the Google IE Compatibility Script option ticked.

[Rob 547]

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]

[Kate 3]

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.

[jamiewalden 1]

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?

[Rob 547]

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.

[jamiewalden 1]

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]