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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Form submit causing div to drop down.

    Hey Guys,

    Was wondering if anyone had experienced this problem before? I've done some simple markup for a site I'm working on ( http://www.blackoutmedia.co.uk/site ) and for some reason when you click on either Submit or Clear on the form to the bottom right, the containing div drops onto the next row so to speak.

    Any ideas?

  • #2
    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
    Hmm, I'm not experiencing that issue here. What browser are you working in? Also, it's a good first step at this stage to go ahead and validate all of your HTML (http://validator.w3.org/check?uri=ht...ss=1&verbose=1).

    You currently have 25 listed errors and 4 warnings. These might be contributing to your problem. Once you're using valid code post back so we can take a look at a clean page.

    P.S. Welcome to the forums!
    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

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Hmm, I'm not experiencing that issue here. What browser are you working in? Also, it's a good first step at this stage to go ahead and validate all of your HTML (http://validator.w3.org/check?uri=ht...ss=1&verbose=1).

    You currently have 25 listed errors and 4 warnings. These might be contributing to your problem. Once you're using valid code post back so we can take a look at a clean page.

    P.S. Welcome to the forums!
    Just ran through the validation and it's all fine now, still dropping the div down though :s

  • #4
    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
    Quote Originally Posted by omgsmith View Post
    Just ran through the validation and it's all fine now, still dropping the div down though :s
    Ok, that's a good start. Still, what browser are you seeing this in?
    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

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Ok, that's a good start. Still, what browser are you seeing this in?
    Firefox 3.0.9 on OSX.

  • #6
    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
    OK, I'll go ahead and hit you with this suggestion:
    Code:
    #main_content {
    clear:both;
    color:#828282;
    margin:auto;
    overflow:auto;
    padding-bottom:10px;
    padding-top:10px;
    width:950px;
    }
    This might be related to your problem in FF3, but in any case this fixes a breakdown in your layout in FF2 in XP. Let me know if this takes care of your FF3 issue as well...
    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

  • Users who have thanked Rowsdower! for this post:

    omgsmith (04-27-2009)

  • #7
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    OK, I'll go ahead and hit you with this suggestion:
    Code:
    #main_content {
    clear:both;
    color:#828282;
    margin:auto;
    overflow:auto;
    padding-bottom:10px;
    padding-top:10px;
    width:950px;
    }
    This might be related to your problem in FF3, but in any case this fixes a breakdown in your layout in FF2 in XP. Let me know if this takes care of your FF3 issue as well...
    Spot on buddy, thanks!

    Fixed a couple of safari issues too

  • #8
    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
    Quote Originally Posted by omgsmith View Post
    Spot on buddy, thanks!

    Fixed a couple of safari issues too
    Glad to help. Just FYI, the problem was with your previous and next buttons (e.g. div#prevBtn). They extended below the bottom edge of their containing element so the content in question was still trying to let them float. This pushed the content right and made the 950px width of the container insufficient to house all three of the div's within, thus dropping the last one onto the next "line."
    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


  •  

    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
    •