Grow your CSS skills. Land your dream job.

Blogger code and Internet Explorer?!?!?

  • # June 24, 2010 at 9:41 am

    Hello,

    Can anyone out there help me to solve this problem with a Blogger template layout?
    It all works perfectly well in every browser except Internet Explorer. Is there any clever conditional hack or CSS that would solve the problem of elements being displaced?

    I really hope you can shed some light on this…

    I’ve attached my code below, the URL IS:
    http://webdesignalchemy.blogspot.com
    … and thanks in advance of your help.

    Code:
    < ?xml version="1.0" encoding="UTF-8" ?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    <data:blog .title></data:blog> <data:blog .pageName></data:blog> | <data:blog .title></data:blog>

    < ![CDATA[/*

    * {
    margin: 0;
    padding: 0;
    }

    /**************** Body *********************/

    body {
    background:#ffffff;
    font:12px Arial, Helvetica, sans-seriff;
    background-image: url(http://www.graphicalchemy.co.uk/lsblog/blogimages/lsblogbg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    color: #999999;
    }

    /**************** Links *********************/

    a:link, a:visited {
    text-decoration:none;
    color: #6C8ABD;
    }

    a:hover {
    color:#79A47F;
    }

    a:active {
    position: relative;
    top: 1px;
    }

    a img, a:active, a:focus, a:hover, a img.preview {
    border: none;
    text-decoration: none;
    padding: 0;
    outline:none;
    }

    .feed-links {
    display: none;
    }

    .navbar {
    visibility: hidden;
    display: none;
    }

    clear {
    clear:both;
    }

    /**************** Wrapper *********************/

    #wrapper {
    width:980px;
    margin: 40px auto 50px auto;
    }

    /**************** Menu *********************/

    #templatemo_menu_panel{
    width:960px;
    height: 39px;
    margin: 0 auto;
    color: #7C99C5;
    }
    #templatemo_menu_panel #templatemo_menu_section{
    width: 930px;
    height: 39px;
    margin:0 auto;
    color: #7C99C5;
    }
    #templatemo_menu_section ul {
    float: left;
    width: 930px;
    margin: 0;
    padding: 0px;
    list-style: none;
    }
    #templatemo_menu_section ul li{
    display: inline;
    }
    #templatemo_menu_section ul li a{
    float: left;
    width: 150px;
    line-height: 39px;
    margin-right: 5px;

    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #7C99C5;
    }
    #templatemo_menu_section li a:hover, #templatemo_menu_section li .current{
    color: #ffffff;
    }

    /**************** Header *********************/

    #header {
    width: 980px;
    height: 302px;
    margin: 0;
    }

    /**************** Subheaderstrip *********************/

    #subheaderstrip {
    width: 950px;
    height: 32px;
    position: relative;
    text-align: right;
    padding-right: 30px;
    padding-top: 8px;
    }

    .emaillink {
    font-size: 20px;
    font-weigt: normal;
    color: #6C8ABD;
    font-family:"Times New Roman", Times, serif;
    }

    /**************** Subheaderstriptwo *********************/

    #subheaderstriptwo {
    width: 950px;
    height: 24px;
    position: relative;
    text-align: right;
    padding-right: 30px;
    padding-top: 6px;
    }

    /**************** Media Container *********************/

    #mediacontainer {
    width: 980px;
    height: 350px;
    margin: 0;
    position: relative;
    }

    /**************** Slider *********************/

    #slidercontainer {
    width: 710px;
    height: 350px;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0px;
    top:0px;
    }

    .stripViewer .panelContainer .panel ul {
    text-align: left;
    margin: 0;
    }

    .slider-wrap {
    margin: 20px 0;
    position: relative;
    width: 100%;
    }

    .csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
    .csw .loading {margin: 200px 0 300px 0; text-align: center}

    .stripViewer { /* viewing window */
    position: relative;
    overflow: hidden;
    border: 1px solid #ffffff;
    margin: auto;
    width: 600px;
    height: 300px;
    line-height: 130%;
    clear: both;
    background: #ffffff;
    }

    .stripViewer .panelContainer { /* Long container used to house end-to-end divs. Calculated and specified by the JS */
    position: relative;
    left: 0; top: 0;
    width: 100%;
    font-size: 11px;
    list-style-type: none;
    -moz-user-select: none;
    }

    .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
    float:left;
    height: 100%;
    position: relative;
    width: 600px; /* Also specified in .stripViewer above */
    }

    .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
    padding: 10px;
    }

    .wrapper {width: 250px;height: 280px;float: right;margin:0 auto;background: url(http://www.graphicalchemy.co.uk/gablog2/blogimages/slide-wrapper.png) no-repeat top left;color:#ffffff;}

    .wrapper p{float:left;width: 225px;text-align:left;margin:3px auto 5px}
    .wrapper h3{font-size: 110%; color: #768DB9; font-family:Arial, Helvetica, sans-serif; font-weight: bold;letter-spacing: 0;padding:0px;}

    .stripNav { /* This is the div to hold your nav (the UL generated at run time) */
    margin: auto;
    }

    .stripNav ul { /* The auto-generated set of links */
    list-style: none;
    }

    .stripNav ul li {
    float: left;
    margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
    }

    .stripNav a { /* The nav links */
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 32px;
    background: #748CE4;
    color: #fff;
    text-decoration: none;
    display: none;
    padding: 0 15px;
    }

    .stripNavL, .stripNavR { /* The left and right arrows */
    position: absolute;
    width: 35px;
    height: 300px;
    top: 0px;
    z-index: 1;
    text-indent: -9000em;
    }

    .stripNavL a, .stripNavR a {
    height: 300px;
    width: 60px;
    display: block;
    border-style: hidden;
    }

    .stripNavL {
    left: 20px;
    }

    .stripNavR {
    right: 20px;
    }

    .stripNavL {
    background: url("http://www.graphicalchemy.co.uk/lsblog/blogimages/arrowright.png") no-repeat center;border:none;
    }

    .stripNavR {
    background: url("http://www.graphicalchemy.co.uk/lsblog/blogimages/arrow.png") no-repeat center;border:none;
    }

    .cross-link{display: none}

    #introcontainer {
    width: 200px;
    height: 350px;
    margin: 0;
    position: absolute;
    left: 730px;
    top:0px;
    padding: 0;
    }

    .introtextbold {
    font-family:"Times New Roman", Times, serif;
    color: #768DB9;
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
    }

    .introtext {
    font-family: Arial, Helvetica, sans-serif;
    color: #999999;
    font-size: 13px;
    line-height: 130%;
    font-weight: normal;
    }

    /**************** Content *********************/

    .content {
    float: left;
    width: 670px;
    padding: 0px 0px 0px 20px;
    min-height: 1000px;
    margin: 0;
    }

    /**************** Posts *********************/

    .post-info{
    width: 600px;
    height: 20px;
    padding-top: 5px;
    text-align: left;
    background-color: transparent;
    }

    .post {
    margin: 0;
    padding: 30px;
    height: 100%;
    text-align: left;
    color:#333333;
    font: 12px Arial,verdana, sans-serif;
    line-height: 130%;
    text-decoration: none;
    }

    .post h2 {
    color:#768DB9;
    padding-bottom: 4px;
    margin-bottom:20px;
    margin-bottom:20px;
    font-weight:normal;
    }

    .post h2 a {
    color:#768DB9;
    text-decoration: underline;
    }

    .post h2 a:hover {
    color:#3A527B;
    text-decoration: underline;
    }

    .date {
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    font: normal 12px Arial, sans-serif;
    color: #999999;

    }

    .postmetadata {
    margin: 0px;
    padding: 10px 40px 0px 10px;
    height: 25px;
    font: normal 12px arial, helvetica, sans-seriff;
    text-align: right;
    color:#999999;
    }

    .post a:link,
    .post a:visited {
    color: #768DB9;
    text-decoration: underline;
    }

    .post a:hover {
    color: #3A527B;
    text-decoration: none;
    }

    /**************** Sidebar *********************/

    .sidebar {
    float:right;
    width:220px;
    text-align: left;
    margin: 0px;
    font-size:12px;
    padding-left: 0px;
    padding-right: 20px;
    display: inline-block;
    color: #999999;
    }

    .sidebar h2 {
    height:30px;
    width: 200px;
    line-height:30px;
    font-size:12px;
    color:#768DB9;
    margin: 0;
    padding: 0;
    }

    .sidebar ul {
    list-style-type: none;
    margin: 0 ;
    padding: 0;
    text-align: left;
    }

    .sidebar ul li {
    text-align: left;
    }

    .sidebar ul li a:link, .sidebar ul li a:visited {
    color: #999999;
    text-decoration: underline;
    font: arial, helvetica, sans-serif;
    text-align: left;
    font-size: 11px;
    line-height:120%;
    }

    .sidebar ul li a:hover {
    color:#666666;
    text-decoration: underline;
    text-align: left;
    }

    .sidebar p {
    margin:0;
    text-align: left;

    }

    #ads125 li {
    padding:10px 10px 10px 10px;
    color: #999999;
    }

    #ads125 li a {
    padding:10px 10px 10px 10px;
    color: #999999;
    }

    #ads125 li a:hover {
    padding:10px 10px 10px 10px;
    color: #666666;
    }

    #topsearch {
    margin:20px 0px 20px 30px;
    color: #999999;
    }

    #ls {
    width:148px;
    padding:5px;
    font-family: Arial, Helvetica, sans-seriff; font-style:italic;
    color: #999999;
    }

    /* (comments elements) */

    .comments {
    text-align: left;
    padding: 0 20px 0 20px;
    color: #999999;
    margin-left: 30px;
    }
    .comments form {
    background-color: #ffffff;
    }
    .comments textarea {
    width:90%;
    height:156px;
    background:#999999;
    border:1px solid #999999;
    color:#cccccc;
    padding:10px;
    overflow:auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    }
    #commentform {
    padding-left:20px;
    }
    #commentform input {
    background:#999999;
    border:1px solid #999999;
    color:#ddd;
    padding-left:10px;
    }
    .comments input#submit {
    padding:0;
    width:72px;
    height:29px;
    }
    .comments h2 {
    font-size:20px;
    line-height:30px;
    margin:25px 0 0 20px;
    padding:0;
    font-weight:normal;
    }
    .comments ol li p {
    padding:0;
    margin:10px 0;
    color:#cccccc;
    }

    .comments-box{
    width: 582px;
    background-color: #FCE650;
    padding: 5px 10px 12px 15px;
    background-image: url( );
    color: #666666;
    margin: 0 0 40px 0;
    }

    .comments-title{
    width: 587px;
    background-color: #FCE650;
    margin: 0 0 1px 0;
    color: #666666;
    padding: 5px 5px 5px 15px;
    }

    .comment-body{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    }

    .comment-footer{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    }

    #blog-pager-newer-link {
    float:left;
    margin-left: 30px;
    }
    #blog-pager-older-link {
    float:right;
    margin-right: 30px;
    }
    #blog-pager {
    text-align:center;
    }

    .avatar-image-container avatar-stock img{
    border:1px #999999 solid;
    float: right;
    width: 48px;
    height: 48px;
    }
    .avatar-image-container img{
    border:1px #999999 solid;
    float: right;
    width: 48px;
    height: 48px;
    }

    #footer {
    margin: 0 auto;
    height:300px;
    width: 980px;
    background-image: url(http://www.graphicalchemy.co.uk/lsblog/blogimages/footerbg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    color:#999999;
    font-size:12px;
    font-weight:normal;
    text-align: left;
    }

    #footer a {
    color:#6C8ABD;
    }

    #footer a:hover {
    color:#79A47F;
    text-decoration: none;
    }

    .designcredits {
    position: relative;
    margin:5px auto 0px auto;
    width: 970px;
    height: 10px;
    padding: 0px;
    text-align: right;
    color: #999999;
    font-size: 10px;
    font-weight: normal;
    }

    . designcredits a {
    color:#6C8ABD;
    font-weight: bold;
    text-decoration: none;
    }

    . designcredits a:hover {
    color:#79A47F;
    font-weight: bold;
    text-decoration: none;;
    }

    /**************** Newsticker *********************/

    #newsticker-demo {
    width:170px;
    padding:20px 20px 20px 10px;
    font-family: Arial, Sans-Serif;
    font-size:11px;
    margin:30px 100px 30px 0px;
    border: 1px solid #79A47F;
    }

    #newsticker-demo a { text-decoration: underline; color: #6C8ABD; }
    #newsticker-demo a:hover { text-decoration: underline; color: #79A47F; }
    #newsticker-demo img { border: 2px solid #79A47F; }

    #newsticker-demo .title {
    text-align: left;
    font-size:11px;
    font-weight:bold;
    padding:5px;
    }

    .newsticker-jcarousellite { width:180px; }
    .newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:4px; margin-bottom:5px; }
    .newsticker-jcarousellite .thumbnail { float:left; width:67px; height:50px; }
    .newsticker-jcarousellite .info { float: right; width:100px; }
    .newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#999999; }
    .clear { clear: both; }

    ]]>










    Title 1

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Title 2

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Title 3

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Title 4

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Title 5

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Title 6

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Title 7

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Title 8

    Praesent eum, delenit ad sciurus eros feugiat qui. Vero elit dolor dignissim elit euismod, iusto ad duis nostrud esse ea dolor enim qui, duis aliquip dolor nibh erat duis ullamcorper vulputate. Dignissim minim ex qui wisi consequat, nibh sed illum, commodo eum exerci, feugait in minim. At autem sed, in feugiat duis, vel nisl dolore wisi consequat lobortis duis luptatum ad eu. Suscipit, volutpat feugait eum quis augue dolore.

    Welcome to the online journal of Living Spirit…

    Odio ut feugait duis facilisi exerci in. Molestie hendrerit minim ut vel dignissim augue ut ex vel consequat ut enim crisare.

    Odio ut feugait duis facilisi exerci in. Molestie hendrerit minim ut vel dignissim augue ut ex vel consequat ut enim crisare.

    © Copyright 2010 Living Spirit
    Creative, bespoke website and blog design by Graphic Alchemy


    # June 24, 2010 at 12:35 pm

    1) Please describe the problem you are having – if you aren’t specific, people won’t know what to help you with!

    2) Please provide a working example of the problem, in other words, provide a link to the page in question – it’s much easier to provide help to a problem that we can see ourselves.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".