Need help? Check out our Support site, then


Site Title looking weird in Internet Explorer 9

  1. I'm starting a blog and I'm using Css in order to style the website. Everything goes in Chrome and Mozilla, but in Internet Explorer 9 I have one problem: While the Site-title is at the baseline of the #site-title div, in Internet Explorer 9 is all the way up looking weird an asymmetric.

    This is the code that I use for the site-title

    #site-title {
    outline:red dotted thin;
    background:url('http://directoroscarortiz.files.wordpress.com/2012/02/76021_163966696972385_163862090316179_277525_3458689_n1.jpg') no-repeat 90% 30%;
    border:#EB8921 solid thick;
    padding:5px;
    }

    As you can see, it has a background image of a Mexican skull and a text bubble that I made with paint... Maybe that is the problem??

    So I want to find a way to push the site-title to the baseline in IE9
    Could you help me please?

    Thank so much.

    The blog I need help with is directoroscarortiz.wordpress.com.

  2. thesacredpath
    Staff

    I don't have Internet Exploder, so I can't look at things in it, but try getting away from % positioning and see if that doesn't do it.

  3. I used IE8 and I don't see anything problematic aside from these:
    1. There is no WordPress.com Admin bar on the top of the blog and we arn't allowed to remove it.
    2. The theme is so wide there is a scrollbar I have to use to see the whole page and my screen resolution is the average size. 1024x768

  4. thesacredpath
    Staff

    Number of people worldwide on 1024 width resolutions: 20% (20.4% in US only).

  5. Thanks guys, I'll modify the width and chage the % and I will let you know wat is going on...
    One more thing... So tthe width of the page should me 800px?.... Please give me a number...

    Take Care.

  6. thesacredpath
    Staff

    In general, until the number of people using 1024px wide screens drops below say, 15% I would recommend the side be no wider that 990px to 1000px. 990 gives room for the borders/scroll bar on a browser window. Don't worry about 800px wide monitors, they have dropped down under 5% and that isn't enough to worry about.

  7. Hey guys I fixed the the problem. Thanks so much. However I got myself into a bigger trouble.

    The site is the same http://directoroscarortiz.wordpress.com , and its looking very nice if you see it in Chrome, Mozilla Firefox and IE 9......BUT

    for some reason, when I try to see it in IE8 or earlier its a disaster. I tried to separate each post in boxes with orange border as you can see. In order to do that I targeted the tag <article>.... It is that the problem???, I was reading that is a HTML 5 tag...

    If that is the problem... is there another way that I can get the same effect in a reliable way for older browsers....

    Here is my entire Css

    body {
    background:url('http://directoroscarortiz.files.wordpress.com/2012/02/telon2.jpg') no-repeat #020200;
    min-width:1250px;
    }

    #page {
    width:1000px;
    background:url('http://directoroscarortiz.files.wordpress.com/2012/02/tio-tigre1.jpg') no-repeat 750px 0;
    position:relative;
    margin:auto;
    }

    #content {
    color:#000000;
    width:670px;
    margin-left:50px;
    padding:5px;
    }

    #content a {
    color:#000000;
    }

    #main .widget-area {
    color:#FFFFE0;
    }

    #colophon {
    clear:both;
    }

    #site-title a {
    font-size:2em;
    font-weight:bold;
    text-decoration:none;
    margin-left:200px;
    }

    #site-title {
    background:url('http://directoroscarortiz.files.wordpress.com/2012/02/telon1.jpg') no-repeat 670px;
    padding:5px;
    }

    a:link {
    color:#FFFFE0;
    }

    a:visited {
    color:#FFFFE0;
    }

    a:hover {
    color:yellow;
    }

    #access {
    background:#020200;
    width:600px;
    margin-left:150px;
    }

    #access ul li {
    float:right;
    margin-right:10px;
    border-right:white solid 2px;
    }

    #access ul li a {
    font-size:1.5em;
    }

    aside ul {
    border-bottom:#EB8921 solid thin;
    padding:5px;
    }

    #site-description {
    color:#FFFFE0;
    font-size:1.9em;
    float:right;
    }

    .blog #page article {
    background:url('http://directoroscarortiz.files.wordpress.com/2012/02/limelight1.jpg') no-repeat 420px 0;
    background-color:white;
    border:#EB8921 solid thick;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
    color:#000000;
    margin:10px;
    padding:5px;
    }

    .single #page #content {
    width:670px;
    background-color:white;
    border:#EB8921 solid thick;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
    }

    .entry-title {
    margin-top:80px;
    padding:5px;
    }

    .single #page #content .entry-title {
    margin-top:10px;
    padding:5px;
    }

  8. thesacredpath
    Staff

    Can you take a screenshot, upload it to your media library and then post the URL here so we can see it? I don't have IE of any flavor.

  9. My friend I just discover this online tool and is very reliable....

    http://browserling.com/

    You can test online your sites in different browser... only add the address of my blog and you will see what happens in IE8 and earlier...

    Let me know

    http://directoroscarortiz.wordpress.com

  10. http://directoroscarortiz.files.wordpress.com/2012/02/screenshot.jpg

    Here is the screen shot.... as you can see, the article tag doesn't get displayed with the css rules that I wrote.

    I thought that is because I was targeting a HTML 5 tag (article), but then I realized that I also targeted a HTML tag (aside) for the orange underscore in the widget area and i works ... so I don't know... I hope you can help me...

  11. aside HTML 5 tag

  12. thesacredpath
    Staff

    First off in IE8, try switching between compatibility view on and off and see what happens.

    Then drop back to just this and see what happens and again check in and out of compatibility view.

    .post {
    background: white;
    color: #000000;
    margin: 10px;
    padding: 5px;
    }
  13. No results... the same happens... only this time when I press the compatibility view it looks full of white blocks after I used your code (it makes a block for each line of text almost), like It would look IE7 or older....

    I declare myself totally lost....

  14. thesacredpath
    Staff

    I'm afraid I'm lost as well. Perhaps @designsimply will see this thread and drop by with some ideas or insights.

  15. Thanks anyway man... How Can I contact @designsimply?

Topic Closed

This topic has been closed to new replies.

About this Topic