htmlcssinternet-explorercompatibility
CSS positioning compatibility issues with IE
I'm having a few issues with a client's website not displaying properly in IE. I'm currently using IE 9 but there are a few bugs that still show up. The link is www.zenhomecleaning.com/ny/staff.html and I'm using IE 9 on Windows Vista.
The first issue I'm having is with div's not staying in the proper place. The page looks okay on Google Chrome but when testing it on IE 9, two div's display improperly.
The container div is "rightpanel" and here's the HTML and CSS:
<div id="rightPanel">
<div id="socialmedia">
<div><a href="http://facebook.com/zenhomeinc" target="_blank"><span id="facebook"></span></a></div>
<div><a href="http://twitter.com/zenhomeinc" target="_blank"><span id="twitter"></span></a></div>
<div><a href="http://www.youtube.com/user/zenhometherapy/videos" target="_blank"><span id="youtube"></span></a></div>
<div><a href="http://www.linkedin.com/company/1593810" target="_blank"><span id="linkedin"></span></a></div>
</div><!-- end of #socialmedia -->
<br />
<div id="customerlobby"><a href="http://www.customerlobby.com/reviews/5095/zen-home-cleaning/" onclick=
"window.open('http://www.customerlobby.com/reviews/5095/zen-home-cleaning/', 'ReviewPage',
'statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=540, height=575,left=570,top=200,screenX=570,screenY=200');
return false;" target="_blank"><img src="https://www.customerlobby.com/ctrack-5095" border="0" style="display: none;" alt=
"Statistics" /><img alt="Zen Home Cleaning Customer Reviews" src="https://www.customerlobby.com/logo-serve?id=791" border="0" /></a
><!--End Customer Lobby--></div>
<div id="phone">
<h3>Contact Us Today</h3><h1>212.462.2566</h1></div>
</div><!-- end of #rightPanel -->
and the CSS:
#header #rightPanel {
width: 500px;
height: 185px;
margin: 5px 7px 0 0;
float: right;
}
#socialmedia {
width: 153px;
height: 26px;
float: right;
margin: 10px -28px 0 0;
padding-right: 0;
}
#socialmedia #facebook {
background: url(../img/icon_facebook.jpg);
width: 26px;
height: 26px;
margin: 0 3px 0;
float: left;
}
#socialmedia #twitter {
background: url(../img/icon_twitter.jpg);
width: 26px;
height: 26px;
margin: 0 3px 0;
float: left;
}
#socialmedia #youtube {
background: url(../img/icon_youtube.jpg);
width: 26px;
height: 26px;
margin: 0 3px 0 3px;
float: left;
}
#socialmedia #linkedin {
background: url(../img/icon_linkedin.jpg);
width: 26px;
height: 26px;
float: left;
margin: 0 0 0 3px;
}
#rightPanel #customerlobby {
width: 100%;
height: 70px;
margin: 12px 0 0 0;
float: right;
text-align: right;
}
#header #phone {
width: 220px;
float: right;
text-align: right;
}
#header #phone h1 {
font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: 600;
letter-spacing: .1em;
}
#header #phone h3 {
font-size: 14px;
font-weight: 400;
letter-spacing: .1em;
margin-bottom: -15px;
}
This div should be lined up with the right side of the menu.
And for the content div, here's the HTML and CSS..
<div id="main">
<div id="content"><!-- InstanceBeginEditable name="content" -->
<h1>Meet the Staff</h1>
<div id="staff">
<div class="title">Management</div>
<div class="row-2">
<div class="staffPhoto"><h4>Operations Manager</h4><a class="various fancybox.iframe" rel="staff" href=
"staff/marina.html" ><img src="staff/img/marina-thumb.jpg" alt="Green Cleaning Services, Marina Gospodinova" /><p>Marina Gospodinova</p></a></div>
<div class="staffPhoto"><h4>Field Manager</h4><a class="various fancybox.iframe" rel="staff" href=
"staff/mariyana.html" ><img src="staff/img/mariyana-thumb.jpg" alt="Green Cleaning Services, Mariyana Nedelcheva" /><p>Mariyana Nedelcheva</p></a></div>
</div>
<div class="title">Client Services</div>
<div class="row-2">
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/lucille.html" ><img src=
"staff/img/lucille-thumb.jpg" alt="Green Cleaning Services, Lucille Manariotis" /><p>Lucille Manariotis</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href=
"staff/akia.html" ><img src="staff/img/akia-thumb.jpg" alt="Green Cleaning Services, Akia Ridley" /><p>Akia Ridley</p></a></div>
</div>
<div style="margin-bottom: -50px; "></div>
<div class="title">Quality Control Services</div>
<div class="row-4">
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/carlos.html" ><img src="staff/img/carlos-thumb.jpg" alt="Green Cleaning Services, " /><p>Carlos</p></a></div>
<div style="margin-bottom: -50px; "></div>
<div class="title">Cleaning Consultants</div>
<div class="row-6">
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/alesha.html" ><img src="staff/img/alesha-thumb.jpg" alt="Green Cleaning Services, " /><p>Alesha</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/awilda.html" ><img src="staff/img/awilda-thumb.jpg" alt="Green Cleaning Services, " /><p>Awilda</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/beverly.html" ><img src="staff/img/beverly-thumb.jpg" alt="Green Cleaning Services, " /><p>Beverly</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/carlos.html" ><img src="staff/img/carlos-thumb.jpg" alt="Green Cleaning Services, " /><p>Carlos</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/christin.html" ><img src="staff/img/christin-thumb.jpg" alt="Green Cleaning Services, " /><p>Christin</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/crystal.html" ><img src="staff/img/crystal-thumb.jpg" alt="Green Cleaning Services, " /><p>Crystal</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/daphne.html" ><img src="staff/img/daphne-thumb.jpg" alt="Green Cleaning Services, " /><p>Daphne</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/denise.html" ><img src="staff/img/denise-thumb.jpg" alt="Green Cleaning Services, " /><p>Denise</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/francis.html" ><img src="staff/img/francis-thumb.jpg" alt="Green Cleaning Services, " /><p>Francis</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/glenda.html" ><img src="staff/img/glenda-thumb.jpg" alt="Green Cleaning Services, " /><p>Glenda</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/iris.html" ><img src="staff/img/iris-thumb.jpg" alt="Green Cleaning Services, " /><p>Iris</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/ivelisse.html" ><img src="staff/img/ivelisse-thumb.jpg" alt="Green Cleaning Services, " /><p>Ivelisse</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/jovana.html" ><img src="staff/img/jovana-thumb.jpg" alt="Green Cleaning Services, " /><p>Jovana</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/kashmire.html" ><img src="staff/img/kashmire-thumb.jpg" alt="Green Cleaning Services, " /><p>Kashmire</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/leyda.html" ><img src="staff/img/leyda-thumb.jpg" alt="Green Cleaning Services, " /><p>Leyda</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/lissy.html" ><img src="staff/img/lissy-thumb.jpg" alt="Green Cleaning Services, " /><p>Lissy</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/ljumnije.html" ><img src="staff/img/ljumnije-thumb.jpg" alt="Green Cleaning Services, " /><p>Ljumnije</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/marina2.html" ><img src="staff/img/marina2-thumb.jpg" alt="Green Cleaning Services, " /><p>Marina</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mary.html" ><img src="staff/img/mary-thumb.jpg" alt="Green Cleaning Services, " /><p>Mary</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mildred.html" ><img src="staff/img/mildred-thumb.jpg" alt="Green Cleaning Services, " /><p>Mildred</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/miquel.html" ><img src="staff/img/miquel-thumb.jpg" alt="Green Cleaning Services, " /><p>Miquel</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mirjeta.html" ><img src="staff/img/mirjeta-thumb.jpg" alt="Green Cleaning Services, " /><p>Mirjeta</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/nefertiti.html" ><img src="staff/img/nefertiti-thumb.jpg" alt="Green Cleaning Services, " /><p>Nefertiti</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/raina.html" ><img src="staff/img/raina-thumb.jpg" alt="Green Cleaning Services, " /><p>Raina</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/reina.html" ><img src="staff/img/reina-thumb.jpg" alt="Green Cleaning Services, " /><p>Reina</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/teresa.html" ><img src="staff/img/teresa-thumb.jpg" alt="Green Cleaning Services, " /><p>Teresa</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/torra.html" ><img src="staff/img/torra-thumb.jpg" alt="Green Cleaning Services, " /><p>Torra</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/vanessa.html" ><img src="staff/img/vanessa-thumb.jpg" alt="Green Cleaning Services, " /><p>Vanessa</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/victor.html" ><img src="staff/img/victor-thumb.jpg" alt="Green Cleaning Services, " /><p>Victor</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/yahaira.html" ><img src="staff/img/yahaira-thumb.jpg" alt="Green Cleaning Services, " /><p>Yahaira</p></a></div>
<div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/yahaira2.html" ><img src="staff/img/yahaira2-thumb.jpg" alt="Green Cleaning Services, " /><p>Yahaira</p></a></div>
</div>
<div class="spacerXL"></div><div class="spacerXL"></div><div class="spacerXL"></div><div class="spacerXL"></div>
</div><!-- end of #staff"-->
</script><!-- InstanceEndEditable --></div>
<!-- end of #content -->
</div><!-- end of #main -->
and CSS:
#main {
display: block;
width: 100%;
max-width: 990px;
margin: 0 auto;
padding-top: 50px;
}
#main #content {
width: 95%;
max-width: 990px;
margin: 0 auto;
}
#main #content .small {
font-size: 11px;
}
#main #content p {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: .1em;
}
I've tried adjusting the div's and trying different styles to align the content properly but to no avail. Would really appreciate any guidance on these two issues I'm having. Much thanks!
Solution
To start with set a valid DOCTYPE header so that the browser knows what HTML or XHTML to expect.
I would recommend this if you want to support browsers that don't like HTML5
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
I can see more issues after this one if you don't try and be strict with your code.
Then run your page through the HTML Validator before trying to fix specific issues. When I run your URL through the validator it reports (amongst other things)
Line 1, Column 85: Comments seen before doctype. Internet Explorer will go into the quirks mode.