CC CSS discuss. More eyes are better than two.
David Gilden wrote:
> Alan,
>
> I have done this and have received no response / suggestions !!! #see below
> Thx!
> Dave
>
[...]
> #I am trying to create the following layout using only <divs>
>
> The page looks fine on Mac FireFox / Safari.
>
> However the product area is overlapping the top content area wrapper in IE7
> (on XP)!
> It does not break at the productArea <div>!
>
> Just tried :
>
> <div class="clearer"> </div>
> <!-- prod boxes -->
> <div id="productArea">
>
> div.clearer {clear: both; line-height: 0; height: 0;}
>
> To get the areas not to overlapm, but it still is not working correctly.
>
>
> Photoshop Comp
> http://www.coraconnection.com/web/pals/9080.05-PALS-Comp12.png
>
> Basic Layout:
> http://www.coraconnection.com/web/css-comp.gif
>
> HTML:
> http://www.coraconnection.com/web/pals/pals_home-4products.htm
>
> CSS:
> http://www.coraconnection.com/web/pals/css/base.css
>
> Also I can't seem to get the search box to look the comp, which is based
> off apple.com design.
>
>
> Suggestions are welcomed!!!
>
>
>
> Dave Gilden MCSD // member of American Federation of Musicians Local 72-147
> (kora musician / audiophile / webmaster @ www.coraconnection.com / Ft.
> Worth, TX, USA)
Hello Dave,
Maybe this is a little closer.
<http://css-class.com/x/pal.htm>
Firstly I removed most of the inline style (this should be in the CSS).
<div style="float:right;">
<div class="productBox" style="float:left; margin-right:1em;">
<img src="images/trakPAL.png" style="position: relative; top:0;
left:20px; margin: 1em;" />
<img src="images/trackPalMap.png" style="float:left; clear:right;
position: relative; top:4px; left:4px;" />
</div>
<div class="productBox" style="float:right;">
<img src="images/emotiPAL.png" style="position: relative; top:0;
margin: 1em;" />
<img src="images/palsIcon.png" style="float:left; clear:right;
position: relative; top:4px; left:4px;" />
</div>
</div>
Leaving this.
<div>
<div class="productBox">
<img src="images/trakPAL.png" />
<img src="images/trackPalMap.png" />
</div>
<div class="productBox">
<img src="images/emotiPAL.png" />
<img src="images/palsIcon.png" />
</div>
</div>
BTW, you have a <div> that is doing nothing (it was floating right). I
see that you have thrown everything at the CSS to repair the damaged
caused by the inline styles. The major changes in the CSS is this.
#middleColumn {
margin-bottom:-130px; /* Added */
}
#productArea {
/*top:-130px; Deleted */
}
The IE7- bug(s) you encountered are demo'd here.
<http://css-class.com/articles/explorer/floats/floatandcleartest1.htm>
My question for you. I have outlined (red dots) and layered
div#middleColumn to show it layered above the lower content. Why does
the box show an extra 100px of space below the div#blueCallout? There is
no reason why this should be happening.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
