Web Analytics Made Easy -
StatCounter Form disrupting page flow in IE - CodingForum

Announcement

Collapse
No announcement yet.

Form disrupting page flow in IE

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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
    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;
    [COLOR="Red"]background: #f00;[/COLOR]
    	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;
    [COLOR="Red"]overflow: auto;[/COLOR]
    	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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      i am a noob so please explain the purpose of clearing floats?

      I was unable to find the IE bug I am encountering

      Comment


      • #4
        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.
        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

        Comment


        • #5
          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

          Comment


          • #6
            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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

            Comment


            • #7
              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>
              [COLOR="Red"]<!-- end id="page" --></div>[/COLOR]
              <!-- 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;
              [COLOR="Red"]overflow: auto;[/COLOR]
              	}
              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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

              Comment


              • #8
                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; Apr 12, 2009, 08:56 AM.

                Comment

                Working...
                X