Re: [css-d] IE7 issue / divs overlapping ... some progress
Alan, [ the list :) ]
Thanks for your suggestions,
Slowly the page is coming together...
http://www.coraconnection.com/web/pals/pals_home-4products.htm
I going to try this approach
in the head of my 'htm' page
!--[if IE 7.0]
link rel=stylesheet href=css/ie7fix.css type=text/css charset=utf-8 /
![endif]--
/*ie7fix.css IE7 Hack */
#productArea {
top:120px;
}
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.
Where is this? A line number would help :)-
Cool idea, tried that but it messed up the footer below
#middleColumn {
margin-bottom:-130px; /* Added */
}
#productArea {
/*top:-130px; Deleted */
}
note that I am also using negative values for top here as well... probably a
bad practice.
#footer {
position:relative;
width: 1018px;
margin: 18px auto;
top:-140px;
text-align:center;
font-size:8pt;
line-height:1.5em;
}
Thanks for the link! I will add to my 'delicious' css links
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.
http://css-class.com/x/pal.htm
Agreed this should #not# be happening
another issue is the second and fourth [from right to left] product boxes left
image
being 'forced' down... they should all be similar to the box with the iPhone.
Finally has anyone build a search box like one @ Apple.com?
This project is driving me crazy!
Dave Gilden MCSD
Cora Connection: Your West African Music Source -- online since 1996!
Resources, Recordings, Instruments More!
http://www.coraconnection.com/
__
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/
Re: [css-d] IE7 issue / divs overlapping
On 18 Aug 2009, at 15:25, David Laakso wrote: Put it on a public server and provide a clickable link to it in your post to the list. Alternatively, post your question on doctype.com :) Paul -- Paul Farnell http://litmusapp.com __ 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/
Re: [css-d] IE7 issue / divs overlapping
Paul Farnell wrote: On 18 Aug 2009, at 15:25, David Laakso wrote: Put it on a public server and provide a clickable link to it in your post to the list. Alternatively, post your question on doctype.com :) Paul Hello Paul, http://www.css-discuss.org/policies.html I quote, If you're asking for help with a problem, then remember this: A description of your problem is good. A URL to a page showing your problem is much, much better. -- 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/
Re: [css-d] IE7 issue / divs overlapping
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=clearernbsp;/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/
[css-d] IE7 issue / divs overlapping
Greetings,
I am trying to create the following layout using only divs
http://www.coraconnection.com/web/css-comp.gif
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!
Here is some the CSS.
#mainContent {
width: 1018px;
height: 330px;
border-top: 2px solid #3274a8;
display:block;
background: url(../images/contentAreaGrad.png) repeat-x 0 0;
margin:18px auto;
padding:1px;
}
#leftColumn {
width: 352px;
float: left;
#productArea {
padding:1px;
width: 1018px;
position:relative;
text-align:center;
top:-120px;
margin:18px auto;
height: 100%;
display:block;
clear:both;
}
.productBox {
clear:right;
vertical-align:top;
width: 240px;
height: 100%;
display:inline-block;
background: url(../images/productBoxGrad.png) repeat-x 0 0;
overflow: auto;
}
#productArea .productBox p { padding-left:4px; margin:1em; }
#productArea .productBox img {margin-right:1em; vertical-align:top;}
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)
Cora Connection: Your West African Music Source -- online since 1996!
Resources, Recordings, Instruments More!
http://www.coraconnection.com/
__
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/
Re: [css-d] IE7 issue / divs overlapping
On Tue, Aug 18, 2009 at 2:14 PM, David Gilden do...@coraconnection.comwrote:
Greetings,
I am trying to create the following layout using only divs
http://www.coraconnection.com/web/css-comp.gif
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!
Here is some the CSS.
#mainContent {
width: 1018px;
height: 330px;
border-top: 2px solid #3274a8;
display:block;
background: url(../images/contentAreaGrad.png) repeat-x 0 0;
margin:18px auto;
padding:1px;
}
#leftColumn {
width: 352px;
float: left;
#productArea {
padding:1px;
width: 1018px;
position:relative;
text-align:center;
top:-120px;
margin:18px auto;
height: 100%;
display:block;
clear:both;
}
.productBox {
clear:right;
vertical-align:top;
width: 240px;
height: 100%;
display:inline-block;
background: url(../images/productBoxGrad.png) repeat-x 0 0;
overflow: auto;
}
#productArea .productBox p { padding-left:4px; margin:1em; }
#productArea .productBox img {margin-right:1em; vertical-align:top;}
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)
Cora Connection: Your West African Music Source -- online since
1996!
Resources, Recordings, Instruments More!
http://www.coraconnection.com/
__
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/
Do you have an example of your markup hosted somewhere that we can look at?
__
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/
Re: [css-d] IE7 issue / divs overlapping links to content
Here ya go.
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=clearernbsp;/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)
Cora Connection: Your West African Music Source -- online since 1996!
Resources, Recordings, Instruments More!
http://www.coraconnection.com/
__
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/
Re: [css-d] IE7 issue / divs overlapping
David Gilden wrote: Greetings, Suggestions are welcomed!!! Put it on a public server and provide a clickable link to it in your post to the list. __ 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/
