Having a trouble with styling on our company's intranet specifically in IE8 or lower. The border and padding are showing up despite using border:none;, margin:0!important;, and padding:0!important;. This is causing the content to shift to the right and a horizontal scroll bar to appear.
The situation involving "panels" in the screenshot above on our asp-based intranet adds complexity. There is an option to insert HTML into the SQL database cell for a panel, but it's recommended to store complex html in a file.html and pull it into the panel using an iframe. Could the issue be related to the iframe reference or css used in the file.html?
iframe reference in SQL database:
{top|Members,Forum,HTML($$Summit 2013 Information$$<iframe src="http://www.myexternalsource/WORKING_FOLDER/Summit2013/Summit2013.html" width="768" height="1926" style="border:none!important; margin:0px!important; padding:0px!important;"><p>Your browser does not support iframes.<br /><br /><a href="http://www.myexternalsource/WORKING_FOLDER/Summit2013/Summit2013.html" target="_blank">Click here to open in a new window</a></p></iframe>)}{middleLeft|}{middleRight|}{bottom|}{hidden|Announcements,Items,Tasks,Collections,WhatsOn,Activity,RSS,QuoteOfDay,Absentee}
Summit2013.html with irrelevant styles and html removed
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#iframe-wrapper {
display: block;
width:760 px;
padding:0px;
margin:0 auto;
}
...
</style>
</head>
<body style="margin:5px 0 0 7px !important;">
...