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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Header image displaced in FF but not in IE7

    Hi all

    My site is displacing the header image down in FF but looks fine in EI7. The html for this bit looks like this:

    <body>
    <div align="center">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="766">
    <tr>
    <td>
    <div id="header">
    </div>


    and the CSS like this:

    /*Overall look*/
    body {height: 100%; background: #ede6c3 url(images/strip.gif) repeat-x; font-family: Verdana, Arial, Helvetica, Sans Serif;}
    .clr {clear: both;}

    /*Image Sections*/
    #header {float: left; padding: 0px; width: 718px; height: 200px; background: #ede6c3 url(images/header2.gif) no-repeat}


    Hope this is enough code. Any ideas would be gratefully received

    Tassie

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    its probably not enough code but I'll take a stab at saying it's the default padding/margin set on the page in each browser.

    for kicks add:
    Code:
    html, body {
    padding: 0;
    margin: 0;
    }
    to the top of the css and see if it gets you anywhere.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear hOTV

    Thanks this actually moved it down slightly more but the good news (I think) is that they both now look uniformly out of sync.

    many thanks for the quick response, I will fiddle around with the parameters a bit, but any other suggestions most welcome

    Tassie

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear hOTV

    Thanks - I learned that sometimes its just as important to specify zero values rather than no values. Problem solved !

    Tassie

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Hey tassie,

    I'll assume your relatively new to this. As you go along you'll encounter more issues like this. All browsers have default padding and margin on elements and, sadly, they all differ. A lot of people out there preach the global reset
    Code:
    * {
    padding: 0;
    margin: 0;
    }
    It's used to take the padding and margins off everything.

    I actually used to a be a proponent of this. I have since changed my mind. Maybe because my work is touched by so many other people and doing this and not redefining all the settings leaves them clueless. Plus unless you really have your head around it, it can make things actually more difficult. Its a good idea but you really need to know what it does and how it affects all the elements.

    Eric Meyer has a reset as well. It handles most of the elements, but again, unless you understand what it does, it can be a pain to handle.

    And some more intresting reading if interested

    have fun and if you need more help just shout.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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