SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Borrow's Avatar
    Join Date
    Jul 2004
    Location
    Australian living in London, UK.
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image in wrong location on IE7 - but ok on Firefox

    Hi CSS Guru,

    I have created background image in the centre of header section of the homepage. They look nicely in Firefox but it is off-set to right side in Internet Explorer browser.

    See screen shot images taken from Firefox and IE browsers:

    Firefox:


    IE:


    Or link to website to view: www.deafbasketball.org.uk

    Is there CSS coding tricks to correct it to make the same look as Firefox?

    The current code for CSS and HTML as follows:

    CSS:
    Code:
    /* Logo */
    
    #headerbanner {
    	z-index: 1;
    	position: absolute;
    	float: left;
    	margin-left: -50;
    	margin-top: 0;
    	background: url(http://www.deafbasketball.org.uk/wp-content/themes/stylized/images/headerbanner-v2.png);
    	background-repeat: repeat-y;
    	width: 895px;
    	height: 147px;
    	background-position: center;
    }
    
    #logo {
    	/* width: 874px; */
            width: 895px;
    	height: 147px;
    	margin: 0 auto;
    }
    
    #logo h1 {
    	z-index: 2;
    	position: relative;
    	float: left;
    	padding: 70px 37px 0 0;
    	height: 54px;
    	background: url(images/img02.gif) no-repeat 100% 63px;
    	font-size: 38px;
    	font-weight: normal;
    	letter-spacing: -2px;
    }
    
    #logo h2 {
    	z-index: 3;
    	position: relative;
    	float: right;
    	padding: 98px 0 0 0;
    	text-transform: none;
    	font-weight: normal;
    	font-size: 16px;
    	color: #FFFFFF;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #FFFFFF;
    }

    HTML:
    Code:
    <body>
    <div id="logo">
    	<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    	<h2 class="description"><?php bloginfo('description'); ?></h2>
    	<div class="headerbanner" id="headerbanner"></div>
    </div>

    Let me know, thanks.


    Lyndon
    Last edited by Borrow; May 28, 2008 at 06:05. Reason: Correction

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you put the banner image on the background of the logo, and take out the div with class="headerbanner", you don't need this.

    What is happening in IE is the extra div that you don't need is being pushed over by the h1.

    #logo {
    background: url(http://www.deafbasketball.org.uk/wp-...anner-v2.png);
    }

    Just add this to the logo

  3. #3
    SitePoint Enthusiast Borrow's Avatar
    Join Date
    Jul 2004
    Location
    Australian living in London, UK.
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by craig9001 View Post
    Why don't you put the banner image on the background of the logo, and take out the div with class="headerbanner", you don't need this.

    What is happening in IE is the extra div that you don't need is being pushed over by the h1.

    #logo {
    background: url(http://www.deafbasketball.org.uk/wp-...anner-v2.png);
    }

    Just add this to the logo
    Aaah! Thanks for that *blushed* - got it and it's perfect now. Cheers.


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
  •