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 Coder
    Join Date
    Apr 2009
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post

    Form disrupting page flow in IE

    i have a form located under the "contact us" link here:
    adamspaintcompany.com

    It looks fine in Firefox but when viewed in IE it is throwing the left nav section off all the way to the bottom of the page.

    HELP?!?!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello admhays,
    I don't have IE6 available right now so I'm probably not going to be much help. You can have a look at this page and see if you can figure out which IE6 bug your invoking - http://www.positioniseverything.net/explorer.html

    Have a look at the links about validating in my sig below. They can help you with a lot of problems.

    Here's one thing I see, not the cause of your float drop though.
    Your floats aren't cleared. Put a background color on #page2 and you'll see what I mean.
    Try this -
    Code:
    #page2 {
    	width: 770px;
    	margin: 0px auto 0px auto;
    	padding: 0px;
    background: #f00;
    	position: relative;
    }
    Should be a red background...but it's not.
    Clear the floats like this and you see the red background -
    Code:
    #page2 {
    	width: 770px;
    	margin: 0px auto 0px auto;
    	padding: 0px;
    background: #f00;
    overflow: auto;
    	position: relative;
    }
    Here's a page that shows how that works - http://www.quirksmode.org/css/clearing.html
    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

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    i am a noob so please explain the purpose of clearing floats?

    I was unable to find the IE bug I am encountering

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I was unable to find the IE bug I am encountering
    Your approach to make a 2 column layout is not so good. take a look at http://bonrouge.com/2c-hf-fixed.php

    Just reverse the markup order of your content and sidebar and then apply a float+width to your sidebar. After that apply a suitable margin-left to your content. This way, you could avoid the box model bug of IE.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Apr 2009
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    ok I was able to switch the divs and this makes the #sidebar appear where it is supposed to. However now the #content div has dropped I think because it is too wide.

    Additionally there is a strip of the page2 background below the footer

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by admhays View Post
    ok I was able to switch the divs and this makes the #sidebar appear where it is supposed to. However now the #content div has dropped I think because it is too wide.

    Additionally there is a strip of the page2 background below the footer
    You did it differently than what ab was suggesting, as well as being different than the link he provided.
    If you must specify a width and float for both columns, you have to be sure they fit in the container.
    Your #page2 is 777px wide
    #sidebar is 180px wide and #content is 631px wide. That totals up to 811px and doesn't fit it your #page2.

    See how to figure widths using the box model.
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Fix your background image repeating past your footer by closing #page before #footer.
    Add the closing tag highlighted in red like this -
    Code:
    <div class="entry"><img style="display: none;" src="web_images/int_paint.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/int_paint_over.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/ext_paint.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/ext_paint_over.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/tile.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/tile_over.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/deck.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/deck_over.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/land.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/land_over.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/fence.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/fence_over.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/roof.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/roof_over.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/irr.jpg" alt="" height="152" width="158"><img style="display: none;" src="web_images/irr_over.jpg" alt="" height="152" width="158"><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
    </div>
    <!-- End conditional statement --></div>
    </div>
    <!-- end id="page" --></div>
    <!-- end id="page2" -->
    <div id="footer">
    <div id="footer-wrap">
    <div id="footer-left"><!-- blank --></div>
    <div id="footer-right"><!--
    <p>Copyright (c)2009  &amp; JustHost.com</p>
    -->
    <div id="footer-meta">
    <div class="footnav"><span><a href="index.php?p=1_7">Interior Painting</a> | <a href="index.php?p=1_8">Exterior 	Painting</a> | <a href="index.php?p=1_9">Custom Tile</a> | <a href="index.php?p=1_13">Landscaping</a> | </span><br><span> <a href="index.php?p=1_11">Decking</a> |  <a href="index.php?p=1_12">Fencing</a> | <a href="index.php?p=1_6">Roofing</a> | <a href="index.php?p=1_10">Irrigation Systems</a></span><br></div>
    <ul>
    <li><br>© Adams Paint Company 2009 </li>
    </ul>

    ======================
    That demonstrates why you want to clear your floats.
    Add that overflow:auto; like we talked about before -
    Code:
    #page {
    	background-image: url(http://adamspaintcompany.com/images/page-background.gif);
    	background-repeat: repeat-y;
    	background-position: center;
    	margin: 0px auto 0px auto;
    overflow: auto;
    	}
    You will need to re-think your #footer next. Padding it up 90px and pulling it down again with negative margin...
    Although your image is 140px tall, it looks like the space available for text is only about half that. Try putting your links in the footer but that red divider can maybe go in #content instead.
    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

  • Users who have thanked Excavator for this post:

    admhays (04-12-2009)

  • #8
    New Coder
    Join Date
    Apr 2009
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    thx so much for the help. Like i said i am a noob : ) I understand what you are suggesting


    Tada! I got it all worked out I adjusted the padding of the #content page and it popped right into place.

    Finished Product Here!

    THANK YOU! THANK YOU! to all that contributed!

    ~Adam
    Last edited by admhays; 04-12-2009 at 02:56 PM.


  •  

    Posting Permissions

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