[Semi OT] BlindDown and a floated div

Rails
1

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 M.
blog.mattmargolis.net

2

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 J.
www.foundinteractive.com

3

Another thing to try is to put a This
should not allow floated content to pass the line of the span.
Effectively
acts like a boundary to floated elements.

4

Timothy J. wrote:

does occur but when I right click or scroll down the page fixes
Any ideas as for how I can either do a drop shadow that looks like

Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails
I 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 M.
blog.mattmargolis.net

5

Daniel N wrote:

and
On Jun 26, 2006, at 7:48 PM, Matthew M. wrote:
> occur but when I right click or scroll down the page fixes
> http://www.mattmargolis.net/bd.gif
> _______________________________________________

Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

Adding 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 M.
blog.mattmargolis.net

6

you would need to clear the float after every Div, not at the end of
them all.

I use
instead of spans

If this doesn’t work, try posting your code

Timothy J.
www.foundinteractive.com

7

Timothy J. wrote:

Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

Rails mailing list
[email protected]
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

<%=render :partial=> 'pet/pet_header', :locals => { :pet_header => pet} %>
<%= link_to_remote('>>', :url => {:action =>'show_expanded_pet', :id => pet})%>

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 M.
blog.mattmargolis.net

8

Daniel N wrote:

>
partial
>

      </div>
      </span>
  float: left;
  margin: -5px 5px 5px -5px;
_______________________________________________ http://lists.rubyonrails.org/mailman/listinfo/rails

Perfect! The div clearing both was just what I needed.

Thank you,
Matthew M.
blog.mattmargolis.net

9

On 6/27/06, Matthew M. [email protected] wrote:

Timothy J.

blog.mattmargolis.net

 <span style="clear:both"></span>

:id => pet})%>
clear: both;
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.

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

Some Header

&nbsp
Do It
Note the last

I tried to use
and this worked ok in FF but
not in
IE. The div seemed to work in both places.

Hope this works for you.

Matthew M.