[SOLVED] IE8 - css fine until combined on a responsive stylesheet

[PVM3]

Hi:

I have a small responsive site "done" - my process is to design 3 layouts, for desktop, pads and smart phones, and create 3 stylesheets, one for desktop, one for pads, one for smartphones, then upload to server and test in browsers and when all 3 are good I combine them into one stylesheet. For now I'm going "desktop-first", iow, making the desktop styles the default, then add media queries for the pad and smart styles.

When I created my desktop stylesheet, the pages were fine in IE8. But they aren't fine with the combined stylesheet. There's a div with phone numbers on the top that should float to the far right, but it's doesn't, and there's a div with a background image below it where the image isn't showing and text is screwy. But the style rules are exactly the same as they were on the desktop stylesheet.

homepage with desktop stylesheet can be seen at http://www.dermatologypartners.com/test/desk.html

homepage with combined stylesheet: http://www.dermatologypartners.com/wp

There's some other minor issues with some info. showing twice (I'm using display:none for certain sizes) that I will address but first I just want my top div to float properly and my main graphic area on the home to look right.

The relevant rules for the phone numbers and logo at top:

/*default - desktop and old IEs*/
#logo {padding:0 0 15px 0; float:left;}
#phones1 {float:right; padding: 0; text-align:right;}
#phones1 p {margin-bottom:5px; font-weight:bold;font-size: 18px; line-height: 20px;}
.city {font-size:14px; font-weight: normal;
}

Rules for the image in box:

/*default - desktop and old IEs*/
#staff {width: 65%; 
float:right;
clear: both; 
margin: 0 auto 20px auto; 
padding: 20px 0 20px 40px; 
background-color: white; 
background-image: url(images/modelLg.jpg); 
background-repeat: no-repeat; 
background-position: right top; 
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px; 
}

For the names of staff:

/*default - desktop and old IEs*/
.names {font-style: italic; font-size: 20px; line-height:44px; color: #162357; margin-bottom: 7px; }
.namesL {font-style: italic; font-size: 20px; line-height:44px; color: #162357; margin-bottom: 0;}

I don't know where to start -

Any help greatly appreciated!!

[PVM3]

Found the problem: the problem areas were designated as "asides" and
IE8 wasn't recognizing "asides" because I had an incomplete address in my html5shiv code in my header.

What I had was:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Checked one of my reference books and realized I didn't have the http: in front of the //html5....changed the code to:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

and hurray! IE8 was back in business!

Just one of those cut and paste errors that can drive you mad, but all is well now.