Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #6142

    Hello, I added some images in the header of the website I’m doing with the Newscast template, as a request from my client. They look perfectly well in Chrome, Firefox and Safari but in IE9 they break all the site and the ones with a link appear with a blue box around them.

    I know that this is not exactly an issue with the Newscast template but I haven’t been able to find a solution and I thought that maybe you could help me.

    The address of the website is: http://www.edusoftinstitute.com/

    The images I added are: one with the phone number and email address (datos.png), one with the Twitter logo and a link to the Twitter account (twitter.png) and one for Facebook (Facebook.png).

    The CSS code for each of those is:

    #top .datos, #top .datos a{

    display:block;

    height:43px;

    width:344px;

    position:absolute;

    right:20px;

    top:49px;

    border: none;

    padding: 0;

    margin:0;

    z-index: 10;

    }

    #top .facebook, #top .facebook a{

    display:block;

    height:36px;

    width:122px;

    position:absolute;

    right:13px;

    top:46px;

    border: 0;

    padding: 0;

    margin:0;

    z-index: 10;

    }

    #top .twitter, #top .twitter a{

    display:block;

    height:36px;

    width:216px;

    position:absolute;

    right:71px;

    top:46px;

    border: 0;

    padding: 0;

    margin:0;

    z-index: 10;

    }

    The code in the header.php file to implement the images is:

    <h2 class=”datos ie6fix “><img class=”ie6fix” src=”http://www.edusoftinstitute.com/images/datos.png”

    </h2>

    <h2 class=”twitter ie6fix “><img class=”ie6fix” src=”http://www.edusoftinstitute.com/images/twitter.png”

    </h2>

    <h2 class=”facebook ie6fix “><img class=”ie6fix” src=”http://www.edusoftinstitute.com/images/facebook.png”

    </h2>

    I hope you can help me fix this, it’s almost the last thing I have to do to finish the site.

    Thanks a lot in advance,

    David de la Luz

    #53027
    #53028

    Thanks, but that doesn’t solve it. I had already found that article before. Thanks anyway.

    #53029

    Hey,

    as far as I know headings aren’t supposed to contain images. I’m not certain if this is why IE9 messes up but it just might be .. (Why are you using headings to display this? I believe you can solve this by using spans instead ..

    If you want to keep your heading tags you can go with image replacement:

    The way I usually go about this is creating a class/id for an image I want to create, then I’d give the class to my heading – as you’ve done. The image would be set as a background, the display would be set to block and the width & height should be set to the same size as the image. In your heading you can put your text if you’d like – usually people put a text-indent of -9999 or some big number to get this off screen.

    ^If this sounds like a lot of gibberish you can search for css image replacement in any search engine.

    #53030

    Thanks Chris, your advice helped me solve the issue!

    #53031

    Glad that Chris could help you :)

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

The topic ‘Trouble with Internet Explorer 9’ is closed to new replies.