I am using the drop shadow technique described at http://www.1976design.com/blog/archive/2003/11/14/shadows/ to give several of my divs drop shadows. That part works fine. What doesn''t work so well is when I try to BlindDown a div in Firefox and it ends up ignoring the content below it and just overlapping it. In IE this problem does not occur. In Firefox the overlapping does occur but when I right click or scroll down the page fixes itself so that the content that should have moved down to make room for the expanded div does move down. I have figured out that if I do not float the div then the Firefox problem does not occur but I need to float the div for the drop shadow to look correct. I realize that the above description is probably a little hard to understand so I took a screen shot of what I am talking about and made a visual http://www.mattmargolis.net/bd.gif Any ideas as for how I can either do a drop shadow that looks like the above without floating a div or get BlindDown to work right in Firefox with floated divs would be greatly appreciated. Thank you, Matthew Margolis blog.mattmargolis.net
There is no ''real'' reason that it has to be floated IMO. Try making the containing div position: relative, and the img postition: absolute and see if you can get the same result. I don''t see that floating adds anything to the effect, but there may be other reasons you are using floats. ------------- Timothy Johnson www.foundinteractive.com On Jun 26, 2006, at 7:48 PM, Matthew Margolis wrote:> I am using the drop shadow technique described at > http://www.1976design.com/blog/archive/2003/11/14/shadows/ to give > several of my divs drop shadows. That part works fine. > > What doesn''t work so well is when I try to BlindDown a div in Firefox > and it ends up ignoring the content below it and just overlapping it. > In IE this problem does not occur. In Firefox the overlapping does > occur but when I right click or scroll down the page fixes itself so > that the content that should have moved down to make room for the > expanded div does move down. I have figured out that if I do not > float the div then the Firefox problem does not occur but I need to > float the div for the drop shadow to look correct. > > I realize that the above description is probably a little hard to > understand so I took a screen shot of what I am talking about and made > a visual > http://www.mattmargolis.net/bd.gif > > Any ideas as for how I can either do a drop shadow that looks like the > above without floating a div or get BlindDown to work right in Firefox > with floated divs would be greatly appreciated. > > Thank you, > Matthew Margolis > blog.mattmargolis.net > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails
Another thing to try is to put a <span style="clear:both"></span> This should not allow floated content to pass the line of the span. Effectively acts like a boundary to floated elements. On 6/27/06, Timothy Johnson <found@foundinteractive.com> wrote:> > There is no ''real'' reason that it has to be floated IMO. Try making the > containing div position: relative, and the img postition: absolute and > see if you can get the same result. I don''t see that floating adds > anything to the effect, but there may be other reasons you are using > floats. > > ------------- > Timothy Johnson > www.foundinteractive.com > > > > On Jun 26, 2006, at 7:48 PM, Matthew Margolis wrote: > > > I am using the drop shadow technique described at > > http://www.1976design.com/blog/archive/2003/11/14/shadows/ to give > > several of my divs drop shadows. That part works fine. > > > > What doesn''t work so well is when I try to BlindDown a div in Firefox > > and it ends up ignoring the content below it and just overlapping it. > > In IE this problem does not occur. In Firefox the overlapping does > > occur but when I right click or scroll down the page fixes itself so > > that the content that should have moved down to make room for the > > expanded div does move down. I have figured out that if I do not > > float the div then the Firefox problem does not occur but I need to > > float the div for the drop shadow to look correct. > > > > I realize that the above description is probably a little hard to > > understand so I took a screen shot of what I am talking about and made > > a visual > > http://www.mattmargolis.net/bd.gif > > > > Any ideas as for how I can either do a drop shadow that looks like the > > above without floating a div or get BlindDown to work right in Firefox > > with floated divs would be greatly appreciated. > > > > Thank you, > > Matthew Margolis > > blog.mattmargolis.net > > _______________________________________________ > > Rails mailing list > > Rails@lists.rubyonrails.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails/attachments/20060627/d84d4c81/attachment.html
Timothy Johnson wrote:> There is no ''real'' reason that it has to be floated IMO. Try making > the containing div position: relative, and the img postition: absolute > and see if you can get the same result. I don''t see that floating adds > anything to the effect, but there may be other reasons you are using > floats. > > ------------- > Timothy Johnson > www.foundinteractive.com > > > > On Jun 26, 2006, at 7:48 PM, Matthew Margolis wrote: > >> I am using the drop shadow technique described at >> http://www.1976design.com/blog/archive/2003/11/14/shadows/ to give >> several of my divs drop shadows. That part works fine. >> >> What doesn''t work so well is when I try to BlindDown a div in Firefox >> and it ends up ignoring the content below it and just overlapping >> it. In IE this problem does not occur. In Firefox the overlapping >> does occur but when I right click or scroll down the page fixes >> itself so that the content that should have moved down to make room >> for the expanded div does move down. I have figured out that if I do >> not float the div then the Firefox problem does not occur but I need >> to float the div for the drop shadow to look correct. >> >> I realize that the above description is probably a little hard to >> understand so I took a screen shot of what I am talking about and >> made a visual >> http://www.mattmargolis.net/bd.gif >> >> Any ideas as for how I can either do a drop shadow that looks like >> the above without floating a div or get BlindDown to work right in >> Firefox with floated divs would be greatly appreciated. >> >> Thank you, >> Matthew Margolis >> blog.mattmargolis.net >> _______________________________________________ >> Rails mailing list >> Rails@lists.rubyonrails.org >> http://lists.rubyonrails.org/mailman/listinfo/rails > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/railsI can''t get a cross browser solution for the drop shadow that doesn''t use the float. .with_shadow { background: url(''../images/shadow.gif'') no-repeat bottom right; width: 265px; position: relative; margin-bottom: 1em; } .myObject{ width: 250px; border: 1px solid #a9a9a9; padding: 4px; display: block; bottom: 5px; position: relative; } This looks right in Firefox and works fine with the BlindDown but in IE there is an extra bunch of whitespace on the right side of myObject''s outline as can be seen http://www.mattmargolis.net/badIE.gif Matthew Margolis blog.mattmargolis.net
Daniel N wrote:> Another thing to try is to put a <span style="clear:both"></span> > This should not allow floated content to pass the line of the span. > Effectively acts like a boundary to floated elements. > > On 6/27/06, *Timothy Johnson* <found@foundinteractive.com > <mailto:found@foundinteractive.com>> wrote: > > There is no ''real'' reason that it has to be floated IMO. Try > making the > containing div position: relative, and the img postition: absolute > and > see if you can get the same result. I don''t see that floating adds > anything to the effect, but there may be other reasons you are using > floats. > > ------------- > Timothy Johnson > www.foundinteractive.com <http://www.foundinteractive.com> > > > > On Jun 26, 2006, at 7:48 PM, Matthew Margolis wrote: > > > I am using the drop shadow technique described at > > http://www.1976design.com/blog/archive/2003/11/14/shadows/ to give > > several of my divs drop shadows. That part works fine. > > > > What doesn''t work so well is when I try to BlindDown a div in > Firefox > > and it ends up ignoring the content below it and just > overlapping it. > > In IE this problem does not occur. In Firefox the overlapping does > > occur but when I right click or scroll down the page fixes > itself so > > that the content that should have moved down to make room for the > > expanded div does move down. I have figured out that if I do not > > float the div then the Firefox problem does not occur but I need to > > float the div for the drop shadow to look correct. > > > > I realize that the above description is probably a little hard to > > understand so I took a screen shot of what I am talking about > and made > > a visual > > http://www.mattmargolis.net/bd.gif > > > > Any ideas as for how I can either do a drop shadow that looks > like the > > above without floating a div or get BlindDown to work right in > Firefox > > with floated divs would be greatly appreciated. > > > > Thank you, > > Matthew Margolis > > blog.mattmargolis.net <http://blog.mattmargolis.net> > > _______________________________________________ > > Rails mailing list > > Rails@lists.rubyonrails.org <mailto:Rails@lists.rubyonrails.org> > > http://lists.rubyonrails.org/mailman/listinfo/rails > <http://lists.rubyonrails.org/mailman/listinfo/rails> > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org <mailto:Rails@lists.rubyonrails.org> > http://lists.rubyonrails.org/mailman/listinfo/rails > > > ------------------------------------------------------------------------ > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails >Adding <span style="clear:both"></span> to the bottom of the partial that renders the divs did not fix the problem in Firefox. Thanks for the suggestion though, sounded like it would work. Matthew Margolis blog.mattmargolis.net
you would need to clear the float after every Div, not at the end of them all. I use <br style="clear: both;" /> instead of spans If this doesn''t work, try posting your code ------------- Timothy Johnson www.foundinteractive.com On Jun 26, 2006, at 8:40 PM, Matthew Margolis wrote:> Adding <span style="clear:both"></span> to the bottom of the partial > that renders the divs did not fix the problem in Firefox. Thanks for > the suggestion though, sounded like it would work. > > Matthew Margolis > blog.mattmargolis.net > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails
Timothy Johnson wrote:> you would need to clear the float after every Div, not at the end of > them all. > > I use <br style="clear: both;" /> instead of spans > > If this doesn''t work, try posting your code > > ------------- > Timothy Johnson > www.foundinteractive.com > > > > On Jun 26, 2006, at 8:40 PM, Matthew Margolis wrote: >> Adding <span style="clear:both"></span> to the bottom of the partial >> that renders the divs did not fix the problem in Firefox. Thanks for >> the suggestion though, sounded like it would work. >> >> Matthew Margolis >> blog.mattmargolis.net >> _______________________________________________ >> Rails mailing list >> Rails@lists.rubyonrails.org >> http://lists.rubyonrails.org/mailman/listinfo/rails > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/railsNope that didn''t seem to work either. Here is my partial which renders the objects I am trying to drop shadow and BlindDown <div class="with_shadow"> <div id="pet" class="pet"> <div id="pet_non_edit_<%=pet.id%>"> <div id="pet_header_<%=pet.id%>" class="header"> <%=render :partial=> ''pet/pet_header'', :locals => { :pet_header => pet} %> </div> <span style="clear:both"></span> <div id="expanded_pet_<%=pet.id%>" style="display: none;"> </div> <span style="clear:both"></span> </div><!--end pet_non_edit--> <span style="clear:both"></span> <div id="edit_pet_<%=pet.id%>" style="display: none;"> </div> <span style="clear:both"></span> <span id="toggle_pet_<%=c.id%>"> <%= link_to_remote(''>>'', :url => {:action =>''show_expanded_pet'', :id => pet})%> </span> </div> </div> <br /> <span style="clear:both"></span> My CSS .with_shadow { background: url(''../images/shadow.gif'') no-repeat bottom right; clear: both; float: left; position: relative; margin-bottom: 1em; } .pet{ border: 1px solid #a9a9a9; padding: 4px; display: block; margin: -5px 5px 5px -5px; position: relative; } Matthew Margolis blog.mattmargolis.net
On 6/27/06, Matthew Margolis <mrmargolis@wisc.edu> wrote:> > Timothy Johnson wrote: > > you would need to clear the float after every Div, not at the end of > > them all. > > > > I use <br style="clear: both;" /> instead of spans > > > > If this doesn''t work, try posting your code > > > > ------------- > > Timothy Johnson > > www.foundinteractive.com > > > > > > > > On Jun 26, 2006, at 8:40 PM, Matthew Margolis wrote: > >> Adding <span style="clear:both"></span> to the bottom of the partial > >> that renders the divs did not fix the problem in Firefox. Thanks for > >> the suggestion though, sounded like it would work. > >> > >> Matthew Margolis > >> blog.mattmargolis.net > >> _______________________________________________ > >> Rails mailing list > >> Rails@lists.rubyonrails.org > >> http://lists.rubyonrails.org/mailman/listinfo/rails > > > > _______________________________________________ > > Rails mailing list > > Rails@lists.rubyonrails.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > Nope that didn''t seem to work either. > > Here is my partial which renders the objects I am trying to drop shadow > and BlindDown > > <div class="with_shadow"> > <div id="pet" class="pet"> > <div id="pet_non_edit_<%=pet.id%>"> > <div id="pet_header_<%=pet.id%>" class="header"> > <%=render :partial=> ''pet/pet_header'', :locals => { :pet_header > => pet} %> > </div> > <span style="clear:both"></span> > <div id="expanded_pet_<%=pet.id%>" style="display: none;"> > </div> > <span style="clear:both"></span> > </div><!--end pet_non_edit--> > <span style="clear:both"></span> > <div id="edit_pet_<%=pet.id%>" style="display: none;"> > </div> > <span style="clear:both"></span> > <span id="toggle_pet_<%=c.id%>"> > <%= link_to_remote(''>>'', :url => {:action =>''show_expanded_pet'', > :id => pet})%> > </span> > </div> > </div> > <br /> > <span style="clear:both"></span> > > > My CSS > .with_shadow { > background: url(''../images/shadow.gif'') no-repeat bottom right; > clear: both; > float: left; > position: relative; > margin-bottom: 1em; > > } > > .pet{ > > border: 1px solid #a9a9a9; > padding: 4px; > display: block; > margin: -5px 5px 5px -5px; > position: relative; > }I made some mods to your structure. Mostly because I didn''t want to fire up a rails app. It''s just a stand alone html file that includes prototype etc. <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="effects.js" type="text/javascript"></script> <script src="dragdrop.js" type="text/javascript"></script> <script src="controls.js" type="text/javascript"></script> <style> .with_shadow { background: url(''../images/shadow.gif'') no-repeat bottom right; clear: both; float: left; position: relative; margin-bottom: 1em; } .pet{ border: 1px solid #a9a9a9; padding: 4px; display: block; margin: -5px 5px 5px -5px; position: relative; </style> </head> <body> <div id=''container'' style="border: 3px solid black"> <div class="with_shadow"> <div id="pet" class="pet"> <div id="pet_non_edit_1"> <div id="pet_header_1" class="header"> <h1>Some Header</h1> </div> <span style="clear:both"></span> <div id="expanded_pet_1" style="display: none;"> <div id= ''tester'' style="background-color:red;height:300px;"> </div> </div> <span style="clear:both"></span> </div><!--end pet_non_edit--> <span style="clear:both"></span> <div id="edit_pet_<%=pet.id%>" style="display: none;"> </div> <span style="clear:both"></span> <span id="toggle_pet_1"> <a href="#" onclick = "new Effect.toggle( ''expanded_pet_1'', ''blind'' )">Do It</a> </span> </div> </div> <div style="clear:both;"></div> </div> </body> </html> Note the last <div style="clear:both"></div> I tried to use <br style="clear:both" /> and this worked ok in FF but not in IE. The div seemed to work in both places. Hope this works for you. Matthew Margolis> blog.mattmargolis.net > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails/attachments/20060627/3584d7f1/attachment-0001.html
Daniel N wrote:> > > On 6/27/06, *Matthew Margolis* <mrmargolis@wisc.edu > <mailto:mrmargolis@wisc.edu>> wrote: > > Timothy Johnson wrote: > > you would need to clear the float after every Div, not at the end of > > them all. > > > > I use <br style="clear: both;" /> instead of spans > > > > If this doesn''t work, try posting your code > > > > ------------- > > Timothy Johnson > > www.foundinteractive.com <http://www.foundinteractive.com> > > > > > > > > On Jun 26, 2006, at 8:40 PM, Matthew Margolis wrote: > >> Adding <span style="clear:both"></span> to the bottom of the > partial > >> that renders the divs did not fix the problem in > Firefox. Thanks for > >> the suggestion though, sounded like it would work. > >> > >> Matthew Margolis > >> blog.mattmargolis.net <http://blog.mattmargolis.net> > >> _______________________________________________ > >> Rails mailing list > >> Rails@lists.rubyonrails.org <mailto:Rails@lists.rubyonrails.org> > >> http://lists.rubyonrails.org/mailman/listinfo/rails > > > > _______________________________________________ > > Rails mailing list > > Rails@lists.rubyonrails.org <mailto:Rails@lists.rubyonrails.org> > > http://lists.rubyonrails.org/mailman/listinfo/rails > <http://lists.rubyonrails.org/mailman/listinfo/rails> > Nope that didn''t seem to work either. > > Here is my partial which renders the objects I am trying to drop > shadow > and BlindDown > > <div class="with_shadow"> > <div id="pet" class="pet"> > <div id="pet_non_edit_<%=pet.id%>"> > <div id="pet_header_<%=pet.id%>" class="header"> > <%=render :partial=> ''pet/pet_header'', :locals => { > :pet_header > => pet} %> > </div> > <span style="clear:both"></span> > <div id="expanded_pet_<%=pet.id%>" style="display: none;"> > </div> > <span style="clear:both"></span> > </div><!--end pet_non_edit--> > <span style="clear:both"></span> > <div id="edit_pet_<%=pet.id%>" style="display: none;"> > </div> > <span style="clear:both"></span> > <span id="toggle_pet_<%=c.id%>"> > <%= link_to_remote(''>>'', :url => {:action > =>''show_expanded_pet'', > :id => pet})%> > </span> > </div> > </div> > <br /> > <span style="clear:both"></span> > > > My CSS > .with_shadow { > background: url(''../images/shadow.gif'') no-repeat bottom right; > clear: both; > float: left; > position: relative; > margin-bottom: 1em; > > } > > .pet{ > > border: 1px solid #a9a9a9; > padding: 4px; > display: block; > margin: -5px 5px 5px -5px; > position: relative; > } > > > I made some mods to your structure. Mostly because I didn''t want to > fire up a rails app. It''s just a stand alone html file that includes > prototype etc. > > <html> > <head> > <script src=" prototype.js" type="text/javascript"></script> > <script src="effects.js" type="text/javascript"></script> > <script src="dragdrop.js" type="text/javascript"></script> > <script src="controls.js" type="text/javascript"></script> > <style> > .with_shadow { > background: url(''../images/shadow.gif'') no-repeat bottom right; > clear: both; > float: left; > position: relative; > margin-bottom: 1em; > > } > > .pet{ > > border: 1px solid #a9a9a9; > padding: 4px; > display: block; > margin: -5px 5px 5px -5px; > position: relative; > > </style> > </head> > <body> > > <div id=''container'' style="border: 3px solid black"> > > <div class="with_shadow"> > <div id="pet" class="pet"> > <div id="pet_non_edit_1"> > <div id="pet_header_1" class="header"> > <h1>Some Header</h1> > </div> > <span style="clear:both"></span> > <div id="expanded_pet_1" style="display: none;"> > <div id= ''tester'' > style="background-color:red;height:300px;"> </div> > </div> > <span style="clear:both"></span> > </div><!--end pet_non_edit--> > <span style="clear:both"></span> > <div id="edit_pet_<%=pet.id%>" style="display: none;"> > </div> > <span style="clear:both"></span> > <span id="toggle_pet_1"> > <a href="#" onclick = "new Effect.toggle( ''expanded_pet_1'', > ''blind'' )">Do It</a> > </span> > </div> > </div> > <div style="clear:both;"></div> > > </div> > > </body> > </html> > Note the last <div style="clear:both"></div> > > I tried to use <br style="clear:both" /> and this worked ok in FF but > not in IE. The div seemed to work in both places. > > Hope this works for you. > > Matthew Margolis > blog.mattmargolis.net <http://blog.mattmargolis.net> > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org <mailto:Rails@lists.rubyonrails.org> > http://lists.rubyonrails.org/mailman/listinfo/rails > > > ------------------------------------------------------------------------ > > _______________________________________________ > Rails mailing list > Rails@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails >Perfect! The div clearing both was just what I needed. Thank you, Matthew Margolis blog.mattmargolis.net