thr3ads.net - Rails - Recalcitrant CSS background-image [Apr 2008]

If this information is useful, please help other people find it:
Share via:

Milo Thurston

2008-Apr-01 10:01 UTC

Recalcitrant CSS background-image

My app has a stylesheet that includes this definition:

div.loadimage
{
  width:580px;
  height:310px;
  background-image: url("/images/load.gif") no-repeat center 0% 0%;
}

The purpose is to use with some nice javascript by Patrick H. Lauke for
fading in images. The div is supposed to include a "loading image"
image
which is overwritten by the final image when it has finished loading,
and this takes a moment as the image that finally appears is generated
thus:

<div class="loadimage">
<img src="<%= url_for :controller => ''graphs'',
:action=> ''show_graph'',
:name => @name, :field => params[:field] %>"
style="border:1px solid
#aabcca;" align="bottom", alt="Graph for <%= @name
-%>", id="thegraph",
width="580", height="310" />
</div>

Anyway, the loadimage div absolutely refuses to display an image so all
I see is an empty space in which the graph eventually appears. Even if I
use this div it in other locations, e.g. around text or a table, the
load.gif image will not appear. However, an img tag pointing to the
load.gif image will display it as normal.
Is this because I have made some error with the definition in the
stylesheet, or could there be some other problem?
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

mpfilbin-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2008-Apr-01 11:12 UTC

head link

Re: Recalcitrant CSS background-image

Try this instead

background: url(/images/load.gif) no-repeat center 0% 0%

I hope that helps,

- Mike

On Apr 1, 4:01 am, Milo Thurston
<rails-mailing-l...-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org>
wrote:> My app has a stylesheet that includes this definition:
>
> div.loadimage
> {
>   width:580px;
>   height:310px;
>   background-image: url("/images/load.gif") no-repeat center 0%
0%;
>
> }
>
> The purpose is to use with some nice javascript by Patrick H. Lauke for
> fading in images. The div is supposed to include a "loading
image" image
> which is overwritten by the final image when it has finished loading,
> and this takes a moment as the image that finally appears is generated
> thus:
>
> <div class="loadimage">
> <img src="<%= url_for :controller =>
''graphs'', :action=> ''show_graph'',
> :name => @name, :field => params[:field] %>"
style="border:1px solid
> #aabcca;" align="bottom", alt="Graph for <%= @name
-%>", id="thegraph",
> width="580", height="310" />
> </div>
>
> Anyway, the loadimage div absolutely refuses to display an image so all
> I see is an empty space in which the graph eventually appears. Even if I
> use this div it in other locations, e.g. around text or a table, the
> load.gif image will not appear. However, an img tag pointing to the
> load.gif image will display it as normal.
> Is this because I have made some error with the definition in the
> stylesheet, or could there be some other problem?
> --
> Posted viahttp://www.ruby-forum.com/.--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Milo Thurston

2008-Apr-01 11:38 UTC

head link

Re: Recalcitrant CSS background-image

mpfilbin-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:> background: url(/images/load.gif) no-repeat center 0% 0%
Unfortunately that does exactly the same, i.e. no background image is 
ever seen wherever the div is used.
Thanks for replying, though.
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Mario Guenterberg

2008-Apr-01 12:48 UTC

head link

Re: Recalcitrant CSS background-image

On Tue, Apr 01, 2008 at 01:38:41PM +0200, Milo Thurston
wrote:> 
> mpfilbin-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:
> > background: url(/images/load.gif) no-repeat center 0% 0%
> 
> Unfortunately that does exactly the same, i.e. no background image is 
> ever seen wherever the div is used.
> Thanks for replying, though.
Hi,

if you have your stylesheet in a separate file, set the path to
your image relative to the css file.

Greetings
Mario

-- 
-----BEGIN GEEK CODE BLOCK-----
Version: 3.12
GCS/CM d- s++: a+ C++++>$ UBL*++++$ P++ L+++ E--- W+++ N+ o-- K- w O- M-
V-- PS++ PE++ Y PGP+++ t--- 5 X++++ R++ tv- b+++ DI D++++  G++ e* h----
r+++ y++++
------END GEEK CODE BLOCK------

Milo Thurston

2008-Apr-01 13:10 UTC

head link

Re: Recalcitrant CSS background-image

Mario Guenterberg wrote:> if you have your stylesheet in a separate file, set the path to
> your image relative to the css file.
Still no luck with that I''m afraid.
I also tried replacing the link to the image with a background colour 
change and that doesn''t work either - it seems that the entire div is 
ignored.
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Frederick Cheung

2008-Apr-01 13:21 UTC

head link

Re: Recalcitrant CSS background-image

On 1 Apr 2008, at 14:10, Milo Thurston wrote:
>
> Mario Guenterberg wrote:
>> if you have your stylesheet in a separate file, set the path to
>> your image relative to the css file.
>
> Still no luck with that I''m afraid.
> I also tried replacing the link to the image with a background colour
> change and that doesn''t work either - it seems that the entire div
is
> ignored.
Is it just been covered by the image? if you style the div so that it  
is bigger than the image do the bits not covered by the image show the  
background ?

Fred>
> -- 
> Posted via http://www.ruby-forum.com/.
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Milo Thurston

2008-Apr-01 13:33 UTC

head link

Re: Recalcitrant CSS background-image

Frederick Cheung wrote:> if you style the div so that it
> is bigger than the image do the bits not covered by the image show the
> background ?
It appears not - re-sizing the div has no effect upon anything, even if 
I make it an enormous size. It still appears as if the div is completely 
ignored. However, the stylesheet must be being read as other parts of it 
(e.g. table formatting) still work on the same view.
Most odd indeed.
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Hassan Schroeder

2008-Apr-01 13:40 UTC

head link

Re: Recalcitrant CSS background-image

On Tue, Apr 1, 2008 at 6:33 AM, Milo Thurston
<rails-mailing-list-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org> wrote:
>  ignored. However, the stylesheet must be being read as other parts of it
>  (e.g. table formatting) still work on the same view.
>  Most odd indeed.
Have to ask: have you validated both your markup and CSS? I often
find wierd problems like this being due to a simple typo on my part --
missing ending quote, or whatever; validation usually catches those.

HTH,
-- 
Hassan Schroeder ------------------------
hassan.schroeder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Frederick Cheung

2008-Apr-01 13:47 UTC

head link

Re: Recalcitrant CSS background-image

On 1 Apr 2008, at 14:40, Hassan Schroeder wrote:
>
> On Tue, Apr 1, 2008 at 6:33 AM, Milo Thurston
> <rails-mailing-list-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org> wrote:
>
>> ignored. However, the stylesheet must be being read as other parts  
>> of it
>> (e.g. table formatting) still work on the same view.
>> Most odd indeed.
>
> Have to ask: have you validated both your markup and CSS? I often
> find wierd problems like this being due to a simple typo on my part --
> missing ending quote, or whatever; validation usually catches those.
>Oh and use firebug: you can see exactly what styles are being applied  
and fiddle around with them interactively.

Fred> HTH,
> -- 
> Hassan Schroeder ------------------------
hassan.schroeder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Milo Thurston

2008-Apr-01 13:53 UTC

head link

Re: Recalcitrant CSS background-image

Hassan Schroeder wrote:> Have to ask: have you validated both your markup and CSS? 
Until I added this particular div definition, yes...
However, I tried again following your suggestion and it seems that it is 
the div definition that is in error. Re-working it to look like this has 
done the trick:


div.loadimage
{
  background-image: url("/images/load.gif");
  background-position: center;
  background-repeat: no-repeat;
        width:580px;
        height:310px;
}

Thanks, everyone, for your comments.
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Julian Leviston

2008-Apr-02 05:28 UTC

head link

Re: Recalcitrant CSS background-image

Try removing the image tag first, then seeing if it displays. My guess  
is the image has a white background at first... which is causing the  
background image to not show through.

Julian

Learn Ruby on Rails! CHECK OUT THE FREE VIDS (LIMITED TIME) NEW VIDEO  
OUT 3rd APRIL
http://sensei.zenunit.com/


On 01/04/2008, at 9:01 PM, Milo Thurston wrote:
>
> My app has a stylesheet that includes this definition:
>
> div.loadimage
> {
>  width:580px;
>  height:310px;
>  background-image: url("/images/load.gif") no-repeat center 0%
0%;
> }
>
> The purpose is to use with some nice javascript by Patrick H. Lauke  
> for
> fading in images. The div is supposed to include a "loading
image"
> image
> which is overwritten by the final image when it has finished loading,
> and this takes a moment as the image that finally appears is generated
> thus:
>
> <div class="loadimage">
> <img src="<%= url_for :controller =>
''graphs'', :action=> ''show_graph'',
> :name => @name, :field => params[:field] %>"
style="border:1px solid
> #aabcca;" align="bottom", alt="Graph for <%= @name
-%>",
> id="thegraph",
> width="580", height="310" />
> </div>
>
> Anyway, the loadimage div absolutely refuses to display an image so  
> all
> I see is an empty space in which the graph eventually appears. Even  
> if I
> use this div it in other locations, e.g. around text or a table, the
> load.gif image will not appear. However, an img tag pointing to the
> load.gif image will display it as normal.
> Is this because I have made some error with the definition in the
> stylesheet, or could there be some other problem?
> -- 
> Posted via http://www.ruby-forum.com/.
>
> >






--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Maybe Matching Threads

Search for more reasonably related threads

Rails - Apr 2008 - Recalcitrant CSS background-image

Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Re: Recalcitrant CSS background-image

Maybe Matching Threads