Quick and easy answer?

by 2 replies
3
Okay folks, I'm far from an expert, but I'm scratching my head at this one. Trying to help a buddy out with his rinky-dink eCommerce site.

ClearH2O Tackle - Contact Us

In Firefox, it looks great. Header graphic, map on the left, text on the right, and then footer graphic.

In IE, however, the text gets pushed below the map, and the background behind the map is flowing over into the right side where the text should be. I'm sure there's something silly going on, but I can't find it. Help?
#website design #answer #easy #quick
  • The map is wrapped in a <div> with an unclosed </div> causing the positioning issue, and it should not be wrapped in <center> tags. Just center the text under the map, not the whole div which you're about to float.

    Current HTML of the relevant section:

    Code:
    <center>
<div id="menu" style="background-color:#f5f6f8;width:450px;float:left;">
<h3>Directions</h3>
<p class="padding1"><iframe width="425" height="337" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=clearh2otackle+49120&amp;aq=&amp;sll=41.848358,-86.24129&amp;sspn=0.068923,0.169086&amp;ie=UTF8&amp;hq=clearh2otackle&amp;hnear=Niles,+Michigan+49120&amp;ll=41.795608,-85.991317&amp;spn=4.301758,10.821533&amp;t=m&amp;z=7&amp;iwloc=A&amp;cid=10066819407864748422&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=clearh2otackle+49120&amp;aq=&amp;sll=41.848358,-86.24129&amp;sspn=0.068923,0.169086&amp;ie=UTF8&amp;hq=clearh2otackle&amp;hnear=Niles,+Michigan+49120&amp;ll=41.795608,-85.991317&amp;spn=4.301758,10.821533&amp;t=m&amp;z=7&amp;iwloc=A&amp;cid=10066819407864748422" style="color:#0000FF;text-align:left">View Larger Map</a></small></center>
</center>

<div id="content" style="background-color:#ffffff;width:292px;float:left;">

<p class="padding2"><b>Address:</b>
<br>69037 Christiana Lake Rd.
<br>Edwardsburg, MI 49112
<p class="padding3"><b>Phone:</b>
<br>Local  269-414-4131 
<br>Toll Free  855-515-3228
<p class="padding3"><b>Email:</b>
<br><A HREF="mailto:sales@clearh2otackle.com"><IMG SRC="http://d3d71ba2asa5oz.cloudfront.net/32001278/images/clearh2o-email.png"> </A> 
<p class="padding3"><b>Hours:</b>Monday through Friday 9-4 
<br>(Or by appointment)
</p> 
</div>
    Fixed HTML:

    Code:
    <div id="menu" style="background-color:#f5f6f8;width:450px;float:left;">
<h3>Directions</h3>
<iframe width="425" height="337" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=clearh2otackle+49120&amp;aq=&amp;sll=41.848358,-86.24129&amp;sspn=0.068923,0.169086&amp;ie=UTF8&amp;hq=clearh2otackle&amp;hnear=Niles,+Michigan+49120&amp;ll=41.795608,-85.991317&amp;spn=4.301758,10.821533&amp;t=m&amp;z=7&amp;iwloc=A&amp;cid=10066819407864748422&amp;output=embed"></iframe><br /><p class="padding1" style="text-align: center"><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=clearh2otackle+49120&amp;aq=&amp;sll=41.848358,-86.24129&amp;sspn=0.068923,0.169086&amp;ie=UTF8&amp;hq=clearh2otackle&amp;hnear=Niles,+Michigan+49120&amp;ll=41.795608,-85.991317&amp;spn=4.301758,10.821533&amp;t=m&amp;z=7&amp;iwloc=A&amp;cid=10066819407864748422" style="color:#0000FF">View Larger Map</a></small></p>
</div>

<div id="content" style="background-color:#ffffff;width:292px;float:left;">
<p class="padding2"><b>Address:</b>
<br>69037 Christiana Lake Rd.
<br>Edwardsburg, MI 49112
<p class="padding3"><b>Phone:</b>
<br>Local  269-414-4131 
<br>Toll Free  855-515-3228
<p class="padding3"><b>Email:</b>
<br><A HREF="mailto:sales@clearh2otackle.com"><IMG SRC="http://d3d71ba2asa5oz.cloudfront.net/32001278/images/clearh2o-email.png"> </A> 
<p class="padding3"><b>Hours:</b>Monday through Friday 9-4 
<br>(Or by appointment)
</p> 
</div>
    • [1] reply
    • Good God, Man. Talk about fast. If you ever wake up one morning and find a 6-pack of "The Ling" on your doorstep, I was passing through PA in the middle of the night.

      I'll probably never see you, but thanks a bunch. I'll be sure to pass it on when I can.
Join the discussion

Next Topics on Trending Feed

  • 3

    Quick and easy answer?

    Okay folks, I'm far from an expert, but I'm scratching my head at this one. Trying to help a buddy out with his rinky-dink eCommerce site. ClearH2O Tackle - Contact Us