Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts

    header h1 image not displaying properly in IE 6/7.

    Here is my site:
    Code:
    http://nickhiebert.com/
    CSS for IE6:

    Code:
    #header h1 {
    	height: 30px; 
    	line-height: 30px;
    	vertical-align:text-top;
    	text-indent: 0;
    }
    CSS for IE7:

    Code:
    #header h1 {
    	height: 92px;
    	width: 304px;
    	margin-right: 300px;
    	margin-bottom: -89px;
    	line-height: 18px; 
    }

    Another thing that may be triggering the problem in the HTML. If i put my title in such as my name like: <div id="header">
    <h1><a href="http://nickhiebert.com/">Nick Hiebert<img src="images/logo.png" alt="header h1"/></a></h1> it just makes a bigger space (on the bottom between the banner and the nav) To note: also that the header h1 img is clickable for my home page.

    Code:
    <div id="header">
            	<h1><a href="http://nickhiebert.com/"><img src="images/logo.png" alt="header h1"/></a></h1>

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    IE 6:


    IE 7:

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello nickHiebert,
    I've never liked conditional comments and 99.999% they are unnecessary.

    I only have IE8 placed into IE7mode using developer tools to view this in but removing this bit from css/styleie7.css, quoted in red below, makes it display correctly -
    Code:
    /*CSS File for Internet Explorer 7*/
    /*Header*/
    #header h1 {
    	height: 92px;
    	width: 304px;
    	margin-right: 300px;
    	margin-bottom: -89px;
    	line-height: 18px; 
    }
    Last edited by Excavator; 12-08-2009 at 08:44 PM. Reason: spleling error
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks that worked.


  •  

    Tags for this Thread

    Posting Permissions

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