Question
I know there are 1000 articles out there with issues like this, but they don't seem to be solving my issues. I am working on a site that was created well before my arrival here at this company, and they basically have a placeholder to add "widgets" to a site. When a user clicks "add widget" it displays a scrolling list of them. In IE5 (Quirks Mode) somehow it works perfectly with the widgets but anything after that doesn't work. It displays the "AddWidgetContainer" div just fine, but not the div elements inside. Here is the code. There is no external css since they are doing everything inline because the image is different for every user. I have tested through and the images are available and everything through the server, but don't display;
https://stackoverflow.com/questions/19007097
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<div style="margin-left:10px; height:78px; min-height:78px;" id="AddWidgetContainer">
<div id="addaccstats" class="WidgetPanel" style="width:190; height:78; display:none; float:left; background:url(/applications/images/widgets/add/account-statistics.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onClick="addWidget('accstats')"></a>
</div>
<div id="addacct_wiz" class="WidgetPanel" style="width:190; height:78; display:none; float:left; background:url(/applications/images/widgets/add/account_wizard.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onClick="addWidget('acct_wiz')"></a>
</div>
<div id="addalerts" class="WidgetPanel" style="width:190; height:78; display:none; float:left; background:url(/applications/images/widgets/add/Alerts.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onClick="addWidget('alerts')"></a>
</div>
<div id="addassets" class="WidgetPanel viewable" style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/assets_under_mgmt.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton " href="#" onClick="addWidget('assets')"></a>
</div>
<div id="addbiz_snap" class="WidgetPanel viewable" style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/biz_snapshot.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onclick="addWidget('biz_snap')"></a>
</div>
<div id="addcomm_snap" class="WidgetPanel viewable" style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/commissions_snapshot.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onclick="addWidget('comm_snap')"></a>
</div>
<div id="addevents" class="WidgetPanel viewable " style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/conferences_events.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onclick="addWidget('events')"></a>
</div>
<div id="addcalc" class="WidgetPanel viewable " style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/tools_calculators.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton " href="#" onClick="addWidget('calc')" ></a>
</div>
<div id="addcrm" class="WidgetPanel viewable " style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/crm.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onclick="addWidget('crm')"></a>
</div>
<div id="addcrmcal" class="WidgetPanel viewable " style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/calendar.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onclick="addWidget('crmcal')"></a>
</div>
<div id="adddocs" class="WidgetPanel" style="width:190; height:78; display:none; float:left; background:url(/applications/images/widgets/add/Documents.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onClick="addWidget('docs')"></a>
</div>
<div id="addecbr" class="WidgetPanel viewable" style=" width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/ecbr.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onClick="addWidget('ecbr')"></a>
</div>
<div id="addfollow" class="WidgetPanel" style="width:190; height:78; display:none; float:left; background:url(/applications/images/widgets/add/Follow_up_required.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton " href="#" onClick="addWidget('follow')"></a>
</div>
<div id="addforms" class="WidgetPanel viewable" style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/forms.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onClick="addWidget('forms')"></a>
</div>
<div id="addholidays" class="WidgetPanel viewable" style="width:190; height:78; display:inline; float:left; background:url(/applications/images/widgets/add/holidays_events.png); background-repeat:no-repeat;">
<a class="AddWidgetAddButton" href="#" onClick="addWidget('holidays')"></a>
</div>
<table border="0" class="AddWidgetButtonContainer" style="display:inline; float:left; line-height:30px; vertical-align:middle; margin:0; width:950px; height:30px; padding:0;">
<tr><td><a id="ctl00_ContentPlaceHolder1_lnkWidgetAddReset" class="AddWidgetButtonContainerButton" href="COMMunityLink.asp">Reset to default home page</a></td>
<td style="text-align:right; float:right; vertical-align:middle; margin:0px; width:200px; height:30px; " id="addWidgetCounter"></td>
<td id="paging_buttons" style="width:75px" ><a id="widget_prev" style="background: url('/applications/images/icons/btn_widget_prev.gif') no-repeat; padding:10 12 10 12; width=20px; height:20px; background-position:right" href="#" onClick="prevels();return false"></a>
 
<a id="widget_next" href="#" style="background: url('/applications/images/icons/btn_widget_next.gif') no-repeat; padding:10 12 10 12; width=20px; height:20px; background-position:right" onClick="nextels();return false"></a></td></tr>
</table>
</div>
Not even the link elements inside the table display correctly with the background images after Quirks Mode. I also attached some pics.
Quirks Mode and IE7 Mode
any help is greatly appreciated
Solution
Thats because width & height should have measurement units, like px or mm.
width:190; height:78; => width:190px; height:78px; should fix your problems.
also, width applied to inline elements don't do anything.
consider using inlin-block for your div's instead of inline.
and, padding: 10 12 10 12 => padding: 10px 12px 10px 12px => padding: 10px 12px
and finally: width =20px => width:20px
Here a JsFiddle with those fixes
