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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS float too far right in Ie7

    http://www.genesiskitchen.co.uk/testindex.html

    Displays fine in ie8, safari, chrome, ff, etc.

    In ie7 the find us section is floating too far right and the
    navigation is aligned to the left (the padding doesn't seem to be working)

    CSS for Find Us Section
    [CODE]
    #layoutinfo {
    width: 235px;
    float: right;
    border: 2px solid #fdea9d;
    webkit-border-radius: 15px;
    moz-border-radius: 15px;
    border-radius: 15px;
    margin-right: 10px;
    PADDING: 10px;
    [CODE]

    Any Ideas,

    Cheers
    Simon

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Try to adjust padding/margin

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    First thing's first when trying to wrestle with fine-tuning CSS: validate your page. There are currently 17 errors and 4 warnings. You have invalid ID names and ID's being used more than once in a page. Cleaning those up might not fix what you're seeing here, but it's still best to get your IE out of quirks mode.

    Now for solving this specific issue, I'm guessing that this is a problem with margins/padding/overall width of your #layoutinfo not playing well with the width of your #rightcol div.

    Your "box model" is out of whack. Your #layoutinfo div has a base width of 235px, plus 10px padding each side, plus 2px border each side, plus right margin of 10px. (235+10+10+2+2+10=269px of overall width, but #rightcol is only 250px wide). So you're trying to cram 269px of contents into a 250px box. IE7 is starting the content on the left edge of #rightcol and letting the overlapping width run out of the right-hand side of the container. Other browsers are giving more consideration to the right-hand margin you gave to #layoutinfo, and that's why the appearance is different across different browsers.

    Just for fun, let's try increasing the width of the #rightcol div to accommodate

    teststyle.css (line 139):
    Code:
    #rightcol {
    	width:269px;
    	float:right;
    }
    Let me know if that works.
    Last edited by Rowsdower!; 08-04-2011 at 02:01 PM. Reason: cleaning up code reference
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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