Jump to content

Template Doesn't Render Correctly in IE7


Zad

Recommended Posts

I started to use this template but discovered that some of the CSS doesn't work in IE7 (as can be seen by pasting the URL into NetRenderer).

 

In IE7, most of the linked text doesn't show applied styles - only plain blue underlined HTML links are displayed. This doesn't happen in Firefox, Chrome, and newer versions of IE. The CSS appears to validate OK. Does anyone know what's wrong?...

 

Here's the CSS:

 

@import  url(http://fonts.googleapis.com/css?family=Vollkorn);
@import  url(http://fonts.googleapis.com/css?family=Lobster);

* {
   padding: 0;
   margin: 0;
}

body {
   background: #242424;
   font: 14px Georgia, "Times New Roman", Times, serif;
   color: #242424;
}

#topbanner {
   height: 80px;
   border-bottom: solid 1px #f2efe9;
}

#pagewrap {
   background: url(images/bg.jpg) repeat;
   padding-top: 10px;
   padding-bottom: 10px;
}

#wrap {
   width: 1010px;
   margin: auto;
}

.clear {
   clear: both;
}

#homeheader {
   height: 350px;
}

#mainimg {
   width: 700px;
   height: 330px;
   padding: 10px;
   float: left;
   border: solid 1px #ac9f87;
}

#rightboxes {
   float: right;
   width: 272px;
   float: right;
}

#rightboxes .box1 {
   background: url(images/rightimg1.jpg) 10px 10px no-repeat;
   width: 250px;
   height: 90px;
   padding: 10px;
   margin-bottom: 8px;
   border: solid 1px #ac9f87;
}

#rightboxes .box2 {
   background: url(images/rightimg2.jpg) 10px 10px no-repeat;
   width: 250px;
   height: 90px;
   padding: 10px;
   margin-bottom: 8px;
   border: solid 1px #ac9f87;
}

#rightboxes .box3 {
   background: url(images/rightimg3.jpg) 10px 10px no-repeat;
   width: 250px;
   height: 90px;
   padding: 10px;
   margin-bottom: 0;
   border: solid 1px #ac9f87;
}

#maincontent {
   padding: 10px 10px 0;
   font-family: Vollkorn !important;
}

#threecol .col1 {
   width: 300px;
   float: left;
   padding: 10px;
}

#threecol .col2 {
   width: 300px;
   float: right;
   padding: 10px;
}

#threecol .col3 {
   padding: 10px;
   margin: 0 335px;
}

#maincontent h2 {
   font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
   margin-bottom: 10px;
   text-shadow: #fff 1px 1px 1px;
}

#maincontent p {
   font: normal 14px Vollkorn;
   line-height: 22px;
}

#topbanner .container {
   width: 1010px;
   margin: auto;
}

#sitename {
   width: 250px;
   float: left;
   display: block;
   color: #f3ebd9;
   font: normal 32px Lobster;
   padding: 13px 0 0 10px;
   line-height: 32px;
}

#sitename span {
   display: block;
   font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
   line-height: 17px !important;
   color: #999;
   clear: both;
}

#sitename a {
   color: #f3ebd9;
   text-decoration: none;
   display: block;
   float: left;
   padding: 0 20px 0 0;
}

#sitename a:hover {
   background: url(images/homelinkicon.gif) right 8px no-repeat;
}

#mainnav {
   float: right;
   float: right;
   height: 80px;
   color: #ccc;
   min-width: 600px;
}

#mainnav ul {
   list-style: none;
}

#mainnav li {
   display: inline;
   font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#mainnav li a {
   color: #827b6e;
   text-decoration: none;
   padding: 25px 30px 0;
   height: 55px;
   display: block;
   float: left;
}

#mainnav li a span {
   display: block;
   font: normal 14px Vollkorn, Georgia, "Times New Roman", Times, serif;
   color: #6c675e;
   text-transform: capitalize;
}

#mainnav li a:hover {
   color: #f3ebd9;
}

#mainnav li a:hover span {
   color: #827b6e !important;
}

#mainnav li.active a {
   color: #f3ebd9;
   background: url(images/menuactive.gif) center bottom no-repeat;
   text-shadow: #222 1px 1px 1px;
}

#page {
   width: 640px;
   float: left;
   padding: 0 10px 10px;
   border-right: solid 1px #ac9f87;
}

#sidebar {
   width: 300px;
   float: right;
   padding: 10px;
}

.bordered {
   border-bottom: solid 1px #ac9f87;
}

.subhead {
   font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
   background: url(images/subheadh2bg.jpg) left bottom no-repeat;
   padding: 8px 10px 4px 25px;
   height: 20px;
   color: #b3a893;
   margin: 0 0 25px -10px !important;
}

.rotate {
   -moz-transform: rotate(-1.5deg);
/* FF3.5+ */
   -o-transform: rotate(-1.5deg);
/* Opera 10.5 */
   -webkit-transform: rotate(-1.5deg);
/* Saf3.1+, Chrome */
   filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.9996573249755573,M12=0.02617694830787315,M21=-0.02617694830787315,M22=0.9996573249755573);
/* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573)";
/* IE8 */
   zoom: 1;
}

.post p {
   margin-bottom: 15px;
}

.posthead {
   margin-bottom: 15px;
}

.posthead p,.posthead h3 {
   margin-bottom: 0 !important;
}

.posthead .date {
   font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
   color: #8b7f6c;
}

.post .posthead h3 {
   display: block;
   font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #c83d26;
   text-shadow: #fff 1px 1px 1px;
}

.posthead h3 a {
   color: #222 !important;
   text-decoration: none;
}

.posthead h3 a:hover {
   background: #f5eee2;
}

.posthead .postmeta {
   display: block;
   font: italic 11px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
}

#maincontent a {
   color: #222;
}

#maincontent a:visited,#maincontent a:active {
   color: #333;
}

#maincontent a:hover {
   color: #000;
   text-decoration: none;
}

.post {
   background: url(images/subheadbg.gif) left bottom repeat-x;
   padding-bottom: 10px;
   margin-bottom: 10px;
   padding-top: 10px;
}

#sidebar ul {
   list-style: none;
   display: block;
   margin-bottom: 15px;
}

#sidebar ul li {
   display: block;
}

#sidebar .menu {
   font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#sidebar ul.menu li {
   display: block;
   height: 37px;
   background: url(images/sidebarbullet.jpg) 3px 10px no-repeat;
}

#sidebar ul.menu li:hover {
   background: url(images/sidebarbulleth.jpg) 1px 8px no-repeat;
}

#sidebar ul.menu li a {
   display: block;
   height: 30px;
   padding: 5px 5px 0 35px;
   background: url(images/subheadbg.gif) left bottom repeat-x;
   text-decoration: none;
   text-shadow: #fff 1px 1px 1px;
}

#sidebar ul.menu li a:hover {
   color: #000;
}

#sidebar .posts li {
   display: block;
   padding: 5px 10px 8px 0;
   background: url(images/subheadbg.gif) left bottom repeat-x;
}

#sidebar .posts li span {
   display: block;
   font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #222;
   padding: 3px 0 0 35px;
}

#sidebar .posts a {
   display: block;
   font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
   text-decoration: none;
   background: url(images/starblt.gif) 3px 2px no-repeat;
   height: 12px;
   padding: 3px 0 7px 35px;
}

#sidebar .posts a:visited,#sidebar .posts a:active {
   text-decoration: none;
}

#sidebar .posts a:hover {
   color: #000 !important;
   background: url(images/starblt2.gif) 3px 1px no-repeat;
}

#sidebar h2 {
   display: block;
   font: bold 18px Vollkorn;
   padding: 5px;
   border-bottom: dashed 1px #c8bead;
}

#bottom {
   padding: 10px 0 0;
   color: #c2b7a2;
   border-top: solid 2px #111;
}

#bottom a {
   color: #ece6db;
}

#btmcontent {
   width: 1010px;
   margin: auto;
   padding-bottom: 25px;
}

#footer {
   padding: 40px;
   text-align: center;
   background: #111;
   border-top: solid 1px #000;
}

#bottom .col1,#bottom .col2 {
   width: 30%;
}

#bottom .col1 {
   float: left;
}

#bottom .col2 {
   float: right;
}

#bottom .col3 {
   margin: 0 34%;
}

#bottom .col1,#bottom .col2,#bottom .col3 {
   padding: 10px;
}

#bottom h2 {
   display: block;
   font: normal 22px Lobster !important;
   text-shadow: #222 1px 1px 1px;
   color: #e0d8c9 !important;
   margin-bottom: 15px;
}

#bottom p {
   font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
   line-height: 16px;
   margin-bottom: 15px;
}

#bottom ul {
   list-style: none;
   font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
   text-transform: capitalize;
}

#btmcontent ul {
   display: block;
}

#btmcontent li {
   display: block;
   height: 27px;
   background: url(images/btmlibg.gif) left bottom repeat-x;
}

#btmcontent li a {
   display: block;
   height: 20px;
   padding: 5px 10px 0 40px;
   background: url(images/btmblt.gif) 8px 8px no-repeat;
   text-decoration: none;
}

#btmcontent li a:hover {
   text-decoration: underline !important;
}

#footer p {
   font: normal 14px Lobster;
   margin-bottom: 5px !important;
}

#footer span {
   display: block;
   font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#pageheader {
   background: url(images/normalheader.jpg) 10px 10px no-repeat;
   height: 200px;
   padding: 10px;
   border: solid 1px #ac9f87;
   margin-bottom: 10px;
}

.post ul {
   list-style: square;
   padding: 0 15px 0 35px;
   margin-bottom: 15px;
   line-height: 18px;
}

.post ol {
   padding: 0 15px 0 35px;
   margin-bottom: 15px;
   line-height: 18px;
}

.post ul,.post ol {
   font-family: Vollkorn;
}

.post h4 {
   display: block;
   font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #333;
   margin-bottom: 15px;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.post img.alignleft,.post img.alignright {
   display: block;
   padding: 10px;
   border: solid 1px #ac9f87;
   margin: 0 15px;
}

blockquote p {
   margin-bottom: 0 !important;
}

blockquote {
   margin: 10px;
   border: solid 1px #ac9f87;
   padding: 10px 10px 10px 55px;
   background: url(images/bloqckquote.gif) 10px 10px no-repeat;
   display: block;
}

blockquote cite {
   font: bold italic 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #111;
}

blockquote.alignleft {
   float: left;
   width: 200px;
}

blockquote.alignright {
   float: right;
   width: 200px;
}

.post code {
   font: 12px "Courier New", Courier, monospace;
   white-space: pre !important;
   padding: 10px;
   margin: 10px;
   color: #fff !important;
   background: #706a5f;
   display: block;
}

form {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.form2 {
   padding: 10px;
}

.formpadding {
   padding: 10px;
}

.formstyle {
   padding: 15px 0;
}

.formstyle label {
   display: block;
   padding: 3px 3px 3px 0;
}

.textfield input,.textfield textarea {
   display: block;
   padding: 3px;
   border: solid 1px #ac9f87;
   background: #f5efe3;
}

.textfield input:hover,.textfield textarea:hover {
   background: #fff;
}

.textfield input:focus,.textfield textarea:focus {
   background: #fff;
   border: solid 1px #222;
}

.textfield input {
   width: 98%;
}

.textfield textarea {
   width: 98%;
}

.fields {
   margin-bottom: 5px;
}

.infobox {
   width: 38%;
   float: right;
   padding-top: 25px;
   font-size: 10px;
   margin-bottom: 5px;
}

.fieldsets {
   padding: 15px;
   border: solid 1px #ac9f87;
   margin: 5px 10px 20px;
}

.fieldsets h3 {
   display: block;
   font: bold italic 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #222;
   background: url(images/bg.jpg) repeat;
   float: left;
   padding: 3px 8px;
   margin: -25px 0 0 5px;
}

.fieldsets .info {
   font-size: 10px;
   color: #555;
   font-style: italic;
   margin-bottom: 5px !important;
}

.fields .selectmenu {
   width: 280px;
   display: block;
   padding: 3px;
   border: solid 1px #ac9f87;
}

.fields .smallselect {
   padding: 3px;
   border: solid 1px #ac9f87;
}

.widefields {
   padding: 3px;
   margin-bottom: 5px;
}

.textadblock2 {
   padding: 5px;
   background: #ffc;
   border: solid 1px #666;
   margin-bottom: 8px;
   margin-right: 35px;
}

.btn1 {
   background: #706a5f;
   padding: 8px 10px;
   text-align: center;
   font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #efe9df;
   border: none;
}

#comments h2 {
   background: #c7bdaa;
   padding: 10px;
   font-size: 18px !important;
}

#comments .entry {
   padding: 10px;
   background: #c7bdaa;
   margin-bottom: 10px;
}

#comments .entry p {
   display: block;
   margin-bottom: 8px !important;
}

#comments .entry .avt {
   float: left;
   width: 55px;
   margin-right: 10px;
}

.avt img {
   background: #706a5f;
   padding: 5px;
}

#comments .entry .con,#comments .entry .name,#comments .entry .date {
   margin-left: 70px;
   font: italic 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#comments .entry .con blockquote {
}

h3#respond {
   color: #fff;
   font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
   margin-bottom: 15px;
}

.comments-form {
   background: #706a5f;
   padding: 10px;
}

.formid,.formuri,.formemail {
   padding: 3px;
   height: 25px;
   background: #f2ebdd;
   border: solid 1px #1C1B17;
   width: 250px;
   color: #999;
   font-size: 16px;
}

.comments-form label {
   padding-left: 15px;
   color: #FFC;
}

.comments-form .button {
   display: block;
   background: #333;
   border: none;
   padding: 8px;
   font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #fff;
}

.comments-form textarea {
   padding: 3px;
   background: #f2ebdd;
   border: solid 1px #1C1B17;
   color: #999;
   font-size: 16px;
}

.postheader {
   margin-bottom: 18px;
}

.widepage {
   width: 970px !important;
   border: none !important;
}

#rightboxes div p {
   display: block;
   padding: 55px 20px 0 0;
   font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#rightboxes div a {
   color: #fff;
   text-decoration: none;
}

#rightboxes div p a span {
   background: #000;
   padding: 3px;
   font-size: 14px;
}

#rightboxes div p a:hover {
   color: #ffc;
}

 

...Thanks

Edited by Zad
Link to comment
Share on other sites

IE7 and IE6 don't like the rotate code and just stop applying font styles at that point. I found that if I deleted the code for IE6, IE7 then IE7 displayed the correct font styles but without the rotation:-

.rotate {
		-moz-transform: rotate(-1.5deg);  /* 
FF3.5+ */
      	-o-transform: rotate(-1.5deg);  /* Opera 10.5 
*/
 		-webkit-transform: rotate(-1.5deg); 
/* Saf3.1+, Chrome */
       /*filter:  
progid:DXImageTransform.Microsoft.Matrix
(sizingMethod='auto expand', 
                M11=0.9996573249755573, 
M12=0.02617694830787315, M21=-0.02617694830787315, 
M22=0.9996573249755573); deleted*/ /* IE6,IE7 */
       -ms-filter: 
"progid:DXImageTransform.Microsoft.Matrix
(SizingMethod='auto expand',M11=0.9996573249755573, 
M12=0.02617694830787315, M21=-0.02617694830787315, 
M22=0.9996573249755573)"; /* IE8 */
              zoom: 1;}

there may be a way to correct the code for IE6 and IE7 rotation but I'm not sure what it is.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...