problems with the css file

hi, everybody

First, i want to thank everybody here, because i 've build my first gadget all in java because of the help and the posts here...

Not so easy.....

I still get a problem because of the CSS file, it looks like the js file don't care of this file, although i declare the className and the Id in my css file, and i red the explanations for this in the sdk.

i had to join in the js file all the style.foo = ..... to have what i wanted to get for he position of the layer and the width and heigth and all that stuff

Something i've missed

thank's for all

bidochon

Answer this question

problems with the css file

jeje1g
hi ToddOs,

if i'had set width/height/align directly on elements,it's because it did'nt work only with the css file....

well, i know what a id and class is, but i tried all because of the problem with the css file, but i know i only need to but classes in the css, and not ids...

so so if you understand why my link is wrong...

thank a lot

albidochon
Gary7
......................................................................................................................;

I don't know what to say about this Example_Stupid_Thing_Forgotten_To_Change_In_The_Js_File......................just, i want to throw my head against the wall hundred times....

of course, i begin the gadget on an empty js file, whith just the necessary blocks to fill......and to change from the Template.....

Well, i will take care to READ and not fly over words

your display method is a good idea, easyer to use, i know about this, but did'nt think about when constructing the gadget.

Thank's really for all ToddOs, you really help me whith your posts on the forum, the gadgets you build (it helps me to understand the way it works) and the time you spend whith each of us.

albidochon

A.Kahn

albidochon wrote:

Hi Toddos,

the xml url is :

http://albidochon.free.fr/france2/gadget.xml

I think may be i'm wrong with the className. In CSS you write <div class="foo"> but in the js file i wrote Examplediv.className= 'foo';

It should be Examplediv.class = 'foo';

i must try this.....

albidochon

No, Examplediv.className is correct, as "class" is a keyword in javascript. The only thing I really see off-hand after taking a quick look over your code is that you're setting both id and class when you really don't need to. Pick one or the other. I generally prefer using class instead of id since you can reuse class for other elements (for example, you could use the same CSS class for all of your buttons to make them all look the same). The only other odd thing I see is that you're sometimes setting width/height/align directly on elements, which is not good to do (that's the pre-CSS way of doing things).

I'll load up your code later today and see if I can figure out what more is going on.

SrinSree
Well, I've solved your problem. The last line of france.js was 'albidochon.gadgetfran1.france.registerClass("albidochon.gadgetfran1.ExampleGadget", "Web.Bindings.Base");'. See the problem It's non-obvious, but you registered the class "albidochon.gadgetfran1.france" as albidochon.gadgetfran1.ExampleGadget, which means that the binding has the class of albidochon_gadgetfran1_ExampleGadget. Since you're scoping all of your CSS rules by albidochon_gadgetfran1_france, you'll never find the elements you're looking for. Fixing that line fixes everything.

The only other issue is that you're referencing "align" in the CSS file when you want "text-align".

On a different note, I can't help but think you're making more work for yourself than is necessary. For example, you're "hiding" and "showing" your images by layering them on top of each other and turning off visibility from the top one to let the bottom one show through. You'd be better off using the "display" style to hide and show elements ("visibility: hidden" doesn't render the element but leaves the amount of space it would've otherwise taken up, "display: none" removes the element and collapses space. Use "display: block" to show the element (normally img elements would be display: inline, but in this case I think you want to make them block elements)). Then you won't have to mess around with relative/absolute positioning.
bbodine1
Hi Toddos,

the xml url is :

http://albidochon.free.fr/france2/gadget.xml

I think may be i'm wrong with the className. In CSS you write <div class="foo"> but in the js file i wrote Examplediv.className= 'foo';

It should be Examplediv.class = 'foo';

i must try this.....

albidochon
Karthick Sukumaran
A link to code would be helpful. At the very least, if you don't want to share your code you could post how your creating your DOM elements and the corresponding style from the css file.

Some general tips:
- Make sure you're linking your CSS file in your manifest. It should look like "<link binding:type="css">your.css</link>"
- Class names are prefaced with a ., ids are prefaced with a #. For example, if you have a div with a class of "foo", you could reference that in your CSS file as "div.foo" or just ".foo". If that div had an id of "foo", it'd be "div#foo" or just "#foo".
- While not strictly necessary, you should use your binding name in your CSS file. For example, if your binding is called "Gadget.Foo", it'd be ".Gadget_Foo" in the CSS, and the corresponding div with a class of "foo" above would be ".Gadget_Foo .foo" or ".Gadget_Foo div.foo".
- Make sure you're writing valid CSS. Of course, that should be pretty obvious :)
Not much more I can say unless I see what you're doing to know what's going wrong.
problems with the css file

Answer this question