...

View Full Version : Form disrupting page flow in IE



admhays
04-11-2009, 03:54 AM
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?!?!

Excavator
04-11-2009, 04:20 AM
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 -
#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 -

#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

admhays
04-11-2009, 03:32 PM
i am a noob so please explain the purpose of clearing floats?

I was unable to find the IE bug I am encountering

abduraooft
04-11-2009, 03:50 PM
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 (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug).

admhays
04-12-2009, 01:43 AM
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

Excavator
04-12-2009, 02:38 AM
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 (http://www.w3.org/TR/CSS2/box.html).

Excavator
04-12-2009, 03:07 AM
Fix your background image repeating past your footer by closing #page before #footer.
Add the closing tag highlighted in red like this -

<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 -

#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.

admhays
04-12-2009, 06:38 AM
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! (http://adamspaintcompany.com/index.php?p=1_2_Contact-Us)

THANK YOU! THANK YOU! to all that contributed!

~Adam



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum