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: 4

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: 2234
votes: 41

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: 4

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: 61

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?

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members