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 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Rollover gap IE

    Hi all

    I'm sure someone will be able to point a blindingly obvious solution to my problem.

    My site: http://www.virtualpa.ltd.uk/

    IE 7 renders a gap under the navigation so that the navigation and content aren't flush. It looks like it's the same height as the hidden part of the navigation sprites.

    It looks like this:

    Any ideas?

    Cheers and thanks in advance!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <?xml version="1.0" encoding="UTF-8"?>
    As a first step, remove that xml prolog from the top. IE may turn into quirks mode when it encountered anything above DOCTYPE.
    Last edited by abduraooft; 02-16-2011 at 09:05 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay, removed that.

  • #4
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Code:
    #front
    {
      width:1000px;
      height:435px;
      background-image:url("images/front_back.jpg");
      margin: 50px 0 0 0;
    }
    That's this top marging you're seeing in IE6 because it starts from the bottom of the float instead of where we are in the flow.

    you can replace it with a clear; it will force everything to take place after the float:

    Code:
    #front
    {
      width:1000px;
      height:435px;
      background-image:url("images/front_back.jpg");
      clear:both;
    }
    You page is construct like if it had been thought for a "table build". You should think differently when using css.
    Last edited by Candygirl; 02-16-2011 at 09:28 AM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wicked, thanks! That worked perfectly!


  •  

    Posting Permissions

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