CSS in https pages on Internet Explorer

driving me mad!

[lee_sufc]

I have a site set up in XHTML / CSS - all works fine IE and FF, Safari, etc.

However, on https pages, IE seems to mess up the formatting of the page - it is the only browser to do this?

Basically, everything shows up but alignment is a mess and nothing lines up as it should. This only happens with https pages.

My CSS looks like this: @charset "utf-8";
/* CSS Document */
*{ padding:0; margin:0; border:0; outline:0;}

td { line-height: 2; }

.left{ float:left; display:inline;}
.right{ float:right; display:inline;}
.block{ width:100%; float:left; clear:both;}

a{ color: #369; text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3,h4,h5,h6{ font-weight:normal;}

body{
background:#b7cdda url('images2/bg-body.jpg') repeat-x;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.5;
margin-left: auto;
margin-right: auto;

}

body
{
text-align: center;
}

#container
{
margin-left: auto;
margin-right: auto;
width: 750px;
text-align: left;
}

#header, #menu, #content,#content-bottom, #footer,#sr-top,#sr-mid,#sr-bot{
width:100%; float:left; clear:both; }

#header{
background:url('images2/header.jpg') no-repeat;
height:133px;
margin-left: auto;
margin-right: auto;
}
#header a{
width:300px;text-indent:-9999px; margin-left:52px; height:110px; margin-top:15px;
}
#header h1{ display:none;}

/* Menu */
#menu{
margin-left: auto;
margin-right: auto;
width:712px; height:39px;
background:url('images2/bg-menu.jpg') repeat-x;
padding-left:39px;
}

#menu a{
float:left; display:inline;
background: url('images2/bg-links.jpg') no-repeat;
width:112px; height:26px; font-size:12px;
text-align:center; padding-top:13px; padding-bottom:13px;
font-family:Tahoma; color:#fff;
}
#menu a:hover,
#menu a:active,
#menu a.active-link{ color:#a7cdf4; text-decoration:none;}

#spacer{
border-right:1px solid #899fb6;border-left:1px solid #899fb6;
background:#fff; width:750px; height:8px;

}

#content{
border-right:1px solid #899fb6;border-left:1px solid #899fb6;
width:729px; padding:8px; padding-bottom:0; padding-top:0; padding-right:13px;
background:#fff url('images2/bg-content.gif') repeat-y;

}

/* Sidebar Left */
#sidebar-left{
margin-left: auto;
margin-right: auto;
width:228px;
}
#sidebar-left h3{
float:left; clear:both; width:194px; height:25px;

background: url('images2/bg-titles.gif') no-repeat;
padding-left:34px; padding-top:9px;
font-size:13px; color:#b6cdda; font-weight:normal; font-family:Tahoma;
}
.links-services, .links-free-advice{ margin:5px 0; margin-bottom:10px;}
.links-free-advice{ margin-bottom:10px;}
.links-services a,
.links-free-advice a{
float:left; clear:both;
margin-left:20px;
width:198px; font-size:11px;
color:#254464; padding:2px 0;
padding-left:10px;
background:url('images2/list.jpg') no-repeat left center;
}
.links-free-advice a{ background:url('images2/list.jpg') no-repeat left center;}

.contact{
width:188px;
padding:8px 20px 0 20px; line-height:16px;
}
.contact span,
.contact span a{font-weight:bold; color:#254464;}

/* Sidebar Right */
#sidebar-right{ width:490px; }

#sr-top{ background:url('images2/bg-top-sr.gif') no-repeat; height:10px; }
#sr-mid{
width:458px; padding:0 15px;
border-left:1px solid #899fb6;border-right:1px solid #899fb6;
}
#sr-mid h1{
float:left; clear:both; width:438px;
background:url('images2/list-title.jpg') no-repeat left center;
padding-left:20px;color:#254464; padding-top:5px;
font-size:18px; font-weight:bold; margin-left:-10px; display:inline;
}
#sr-mid h1 span{color:#779cbc;}

#sr-mid h2 {font-size:14px; font-weight:bold;}
#sr-mid h2 span{color:#254464;}
#sr-mid h3 {font-size:12px; font-weight:bold;}
#sr-mid h3 span{color:#254464;}

#sr-mid p{ margin-bottom:10px; }

.services-box{
float:left; clear:both; width:448px;
padding:10px 0 10px 0; border-bottom:1px dotted #999;
margin-bottom:10px;
text-align:justify
}

.content-box{
float:left; clear:both; width:448px;
padding:10px 0 10px 0;
margin-bottom:10px;
text-align:justify

}

.packages{ border:0;}
.packages p.left{ margin-left:25px; }
.packages p.right{ margin-right:25px; }

#content ul {
margin: 0 0 10px 15px; line-height:150%; list-style-type: circle;
}

#content-bottom{ background:#fff url('images2/bg-content-bottom.gif') no-repeat; height:21px; line-height:0; }

#footer{
text-align:center; font-family:Tahoma;
font-size:11px; color:#345b83;
line-height: 1.5;
padding:10px 0;
}
#footer p{ margin-bottom:10px;}
#footer a{ color:#345b83; margin:0 10px;}

[Marshall]

It seems to me you have a lot of conflicting declarations. At one point you have the header floating left and clearing, and then centering.

Also, on your line-heights, you do not specify an increment: px, em or %.

Bottom line - seems you are making the layout a lot more complicated than need be.

Marshall

[swa66]

I don't have a https server handy to test things on, but are you saying it works fine till you use https, and it works for exactly the same content ok in http ?

If so, do you serve the css in https too? with the correct media type?

[lee_sufc]

Yes, the CSS is served in CSS too - the same file as used for http pages.

[pageoneresults]

This could be an issue with DOCTYPE. It may be an issue with a hard coded http references for the CSS? Have you run both the html and css through validators?