Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS in https pages on Internet Explorer

driving me mad!

9:46 am on Sep 1, 2008 (gmt 0)

Preferred Member

10+ Year Member Top Contributors Of The Month

joined:Aug 16, 2004
votes: 1

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;}

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

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


text-align: center;

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; }

background:url('images2/header.jpg') no-repeat;
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 */
margin-left: auto;
margin-right: auto;
width:712px; height:39px;
background:url('images2/bg-menu.jpg') repeat-x;

#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;}

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


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 */
margin-left: auto;
margin-right: auto;
#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;
width:198px; font-size:11px;
color:#254464; padding:2px 0;
background:url('images2/list.jpg') no-repeat left center;
.links-free-advice a{ background:url('images2/list.jpg') no-repeat left center;}

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; }
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; }

float:left; clear:both; width:448px;
padding:10px 0 10px 0; border-bottom:1px dotted #999;

float:left; clear:both; width:448px;
padding:10px 0 10px 0;


.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; }

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;}

10:10 am on Sept 1, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2203
votes: 34

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.


1:05 pm on Sept 1, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

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?

3:37 pm on Sept 1, 2008 (gmt 0)

Preferred Member

10+ Year Member Top Contributors Of The Month

joined:Aug 16, 2004
votes: 1

Yes, the CSS is served in CSS too - the same file as used for http pages.
3:45 pm on Sept 1, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts: 12172
votes: 60

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?