SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Manchester, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image won't center in IE6 and IE7

    Hi,

    I'm trying to get the image on this page to center:
    http://www.jindesigns.com/testcss/we..._stingers.html

    I wrote another thread about this a few weeks ago (http://www.sitepoint.com/forums/showthread.php?t=454074)
    and someone kindly helped saying I should change the DOCTYPE from this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    to this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w.org/TR/html4/strict.dtd">

    This page is an iframe and changing the DOCTYPE causes the iframe to not display properly in IE7. It's ok in IE6 but looks bad in IE7. You can see on this page: www.jindesigns.com/portfolio_logos.html - if you click on any of the logo links on the right you'll see what I mean.

    Is there another way to solve this problem and get the image to center?

    Many thanks.

  2. #2
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kate26 View Post
    Hi,

    I'm trying to get the image on this page to center:
    http://www.jindesigns.com/testcss/we..._stingers.html

    The image could be center (.css as follows) as except underneath of your text.

    #iframe h2 {
    position:absolute;
    color:#FFF;
    width:124px;
    height:160px;
    top:0px; right:-500px; margin:0px;
    background:url(image/logo_stingers.gif) 50% 50% no-repeat;}


    #iframe h2 span {
    visibility:hidden;}


    and you must separate these text by <div> as like this:

    <div id="iframe">
    <h2><span>MANCHESTER STINGERS WFC LOGO</span></h2>
    <div id="text">
    <h4>Our work</h4>
    <p>After continuing success on the pitch.....</p>


    css;

    #text {
    position:absolute;
    margin:180px;
    padding:0px;
    color:#ccc;}

    #text h4 p {
    text-align:center;}



    hope this help.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Manchester, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help. Does this mean I have to put the logo in as a background image? I'm not sure I can do this for this problem because I have about 15 different logos to display so each one would need a separate div wouldn't they?

    This may sound like a daft question - but can you have two different DOCTYPES in one file? The reason I ask is because the image was centering in IE6 when I changed the doctype from transitional to strict. But that's when it messed up in IE7. Can you have both?
    Last edited by kate26; Feb 20, 2007 at 06:46.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Manchester, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, after hours of messing about with this, the only way I can work out to get the image to center is to revert back to the old method <div align="center">. If there's another way then lord knows what it is.

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kate26 View Post
    Thanks for your help. Does this mean I have to put the logo in as a background image?
    Yes and I just replaced text with an image (background image) and that is useful.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •