You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Steen Larsen <st...@gmail.com> on 2008/04/01 15:33:32 UTC

Changing Wickets default styles

Hi,

I have made a stylesheet to change the default look of the FeedbackPanel,
and loaded it with response.renderCSSReference(new ResourceReference(
Style.class,"yousee.css"), "screen"), where the class Style and the css is
in the same package. The css looks like this:

li.feedbackPanelERROR {
    background-image: none;
    color: red;
    padding-left: 0px;
    background-repeat: no-repeat;
    background-position: 0px;
    list-style-type: none;
}

li.feedbackPanelINFO {
    background-image: none;
    color: red;
    padding-left: 0px;
    background-repeat: no-repeat;
    background-position: 0px;
    list-style-type: none;
}

This works fine in IE7, but for some reason only works partly in Firefox.
The green background-image is removed but the text is not red, and is
indented as in the original. Looking at the styles with Firefoxs
WebDeveloper shows the correct styles. Anybody experienced this and found a
solution ?.

/Steen

Re: Changing Wickets default styles

Posted by Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>.
Strange, but that is the way with browsers:)

Steen Larsen wrote:
> More or less. Rearranging the order of the styles, seems to have an
> influence. No idea why but it looks ok now. Firebug only showed the first
> style (background-image), but changing the order made more show up (not
> all). Go figure. But thanks for the input all.
>
> /Steen
>
> 2008/4/2, Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>:
>   
>> so you got this sorted out right?
>>
>> Steen Larsen wrote:
>>
>>     
>>> I'm also developing mainly on firefox, and have tried clearing the cache
>>> an
>>> all, but no luck. My colleague tried it out with the same result and he
>>> had
>>> never downloaded the new stylesheet before.
>>>
>>> The html is the standard feedback panel:
>>>
>>> <div wicket:id="feedback"><wicket:panel>
>>>  <ul wicket:id="feedbackul">
>>>    <li wicket:id="messages" class="feedbackPanelERROR">
>>>      <span wicket:id="message" class="feedbackPanelERROR">Feltet
>>> postnummer skal udfyldes.</span>
>>>    </li>
>>>  </ul>
>>> </wicket:panel></div>
>>>
>>> and the css reference adds the following line to head, which should be
>>> ok:
>>>
>>> <link rel="stylesheet" type="text/css"
>>> href="resources/dk.yousee.order.css.Style/yousee.css" media="screen"
>>> />
>>>
>>> /Steen
>>>
>>> 2008/4/1, Nino Saturnino Martinez Vazquez Wael <nino.martinez@jayway.dk
>>>       
>>>> :
>>>>         
>>>       
>>>> Eeek TDC(yousee), which robs me of a montly fee for television!
>>>>
>>>> This might not be the rigth forum to ask CSS questions and is sort of
>>>> offtopic. But usually when something works in IE and doesnt in firefox
>>>> it means that IE breaks standard compability, and due to some bug in
>>>> IE
>>>> works anyway. My prefered way of working are using firefox to develop,
>>>> checking in IE and then fix so it works in IE too..
>>>>
>>>> Could you show the corresponding html?
>>>>
>>>> regards Nino
>>>>
>>>>
>>>> Steen Larsen wrote:
>>>>
>>>>
>>>>         
>>>>> Hi,
>>>>>
>>>>> I have made a stylesheet to change the default look of the
>>>>>
>>>>>
>>>>>           
>>>> FeedbackPanel,
>>>>
>>>>
>>>>         
>>>>> and loaded it with response.renderCSSReference(new
>>>>> ResourceReference(
>>>>> Style.class,"yousee.css"), "screen"), where the class Style and the
>>>>> css
>>>>>
>>>>>
>>>>>           
>>>> is
>>>>
>>>>
>>>>         
>>>>> in the same package. The css looks like this:
>>>>>
>>>>> li.feedbackPanelERROR {
>>>>>    background-image: none;
>>>>>    color: red;
>>>>>    padding-left: 0px;
>>>>>    background-repeat: no-repeat;
>>>>>    background-position: 0px;
>>>>>    list-style-type: none;
>>>>> }
>>>>>
>>>>> li.feedbackPanelINFO {
>>>>>    background-image: none;
>>>>>    color: red;
>>>>>    padding-left: 0px;
>>>>>    background-repeat: no-repeat;
>>>>>    background-position: 0px;
>>>>>    list-style-type: none;
>>>>> }
>>>>>
>>>>> This works fine in IE7, but for some reason only works partly in
>>>>>
>>>>>
>>>>>           
>>>> Firefox.
>>>>
>>>>
>>>>         
>>>>> The green background-image is removed but the text is not red, and
>>>>> is
>>>>> indented as in the original. Looking at the styles with Firefoxs
>>>>> WebDeveloper shows the correct styles. Anybody experienced this and
>>>>>
>>>>>
>>>>>           
>>>> found a
>>>>
>>>>
>>>>         
>>>>> solution ?.
>>>>>
>>>>> /Steen
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>           
>>>> --
>>>> -Wicket for love
>>>>
>>>> Nino Martinez Wael
>>>> Java Specialist @ Jayway DK
>>>> http://www.jayway.dk
>>>> +45 2936 7684
>>>>
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>
>>>>
>>>>
>>>>
>>>>         
>>>
>>>       
>> --
>> -Wicket for love
>>
>> Nino Martinez Wael
>> Java Specialist @ Jayway DK
>> http://www.jayway.dk
>> +45 2936 7684
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>>     
>
>   

-- 
-Wicket for love

Nino Martinez Wael
Java Specialist @ Jayway DK
http://www.jayway.dk
+45 2936 7684


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Changing Wickets default styles

Posted by Steen Larsen <st...@gmail.com>.
More or less. Rearranging the order of the styles, seems to have an
influence. No idea why but it looks ok now. Firebug only showed the first
style (background-image), but changing the order made more show up (not
all). Go figure. But thanks for the input all.

/Steen

2008/4/2, Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>:
>
> so you got this sorted out right?
>
> Steen Larsen wrote:
>
> > I'm also developing mainly on firefox, and have tried clearing the cache
> > an
> > all, but no luck. My colleague tried it out with the same result and he
> > had
> > never downloaded the new stylesheet before.
> >
> > The html is the standard feedback panel:
> >
> > <div wicket:id="feedback"><wicket:panel>
> >  <ul wicket:id="feedbackul">
> >    <li wicket:id="messages" class="feedbackPanelERROR">
> >      <span wicket:id="message" class="feedbackPanelERROR">Feltet
> > postnummer skal udfyldes.</span>
> >    </li>
> >  </ul>
> > </wicket:panel></div>
> >
> > and the css reference adds the following line to head, which should be
> > ok:
> >
> > <link rel="stylesheet" type="text/css"
> > href="resources/dk.yousee.order.css.Style/yousee.css" media="screen"
> > />
> >
> > /Steen
> >
> > 2008/4/1, Nino Saturnino Martinez Vazquez Wael <nino.martinez@jayway.dk
> > >:
> >
> >
> > > Eeek TDC(yousee), which robs me of a montly fee for television!
> > >
> > > This might not be the rigth forum to ask CSS questions and is sort of
> > > offtopic. But usually when something works in IE and doesnt in firefox
> > > it means that IE breaks standard compability, and due to some bug in
> > > IE
> > > works anyway. My prefered way of working are using firefox to develop,
> > > checking in IE and then fix so it works in IE too..
> > >
> > > Could you show the corresponding html?
> > >
> > > regards Nino
> > >
> > >
> > > Steen Larsen wrote:
> > >
> > >
> > > > Hi,
> > > >
> > > > I have made a stylesheet to change the default look of the
> > > >
> > > >
> > > FeedbackPanel,
> > >
> > >
> > > > and loaded it with response.renderCSSReference(new
> > > > ResourceReference(
> > > > Style.class,"yousee.css"), "screen"), where the class Style and the
> > > > css
> > > >
> > > >
> > > is
> > >
> > >
> > > > in the same package. The css looks like this:
> > > >
> > > > li.feedbackPanelERROR {
> > > >    background-image: none;
> > > >    color: red;
> > > >    padding-left: 0px;
> > > >    background-repeat: no-repeat;
> > > >    background-position: 0px;
> > > >    list-style-type: none;
> > > > }
> > > >
> > > > li.feedbackPanelINFO {
> > > >    background-image: none;
> > > >    color: red;
> > > >    padding-left: 0px;
> > > >    background-repeat: no-repeat;
> > > >    background-position: 0px;
> > > >    list-style-type: none;
> > > > }
> > > >
> > > > This works fine in IE7, but for some reason only works partly in
> > > >
> > > >
> > > Firefox.
> > >
> > >
> > > > The green background-image is removed but the text is not red, and
> > > > is
> > > > indented as in the original. Looking at the styles with Firefoxs
> > > > WebDeveloper shows the correct styles. Anybody experienced this and
> > > >
> > > >
> > > found a
> > >
> > >
> > > > solution ?.
> > > >
> > > > /Steen
> > > >
> > > >
> > > >
> > > >
> > > --
> > > -Wicket for love
> > >
> > > Nino Martinez Wael
> > > Java Specialist @ Jayway DK
> > > http://www.jayway.dk
> > > +45 2936 7684
> > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> > >
> > >
> >
> >
> >
>
> --
> -Wicket for love
>
> Nino Martinez Wael
> Java Specialist @ Jayway DK
> http://www.jayway.dk
> +45 2936 7684
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: Changing Wickets default styles

Posted by Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>.
so you got this sorted out right?

Steen Larsen wrote:
> I'm also developing mainly on firefox, and have tried clearing the cache an
> all, but no luck. My colleague tried it out with the same result and he had
> never downloaded the new stylesheet before.
>
> The html is the standard feedback panel:
>
> <div wicket:id="feedback"><wicket:panel>
>   <ul wicket:id="feedbackul">
>     <li wicket:id="messages" class="feedbackPanelERROR">
>       <span wicket:id="message" class="feedbackPanelERROR">Feltet
> postnummer skal udfyldes.</span>
>     </li>
>   </ul>
> </wicket:panel></div>
>
> and the css reference adds the following line to head, which should be ok:
>
> <link rel="stylesheet" type="text/css"
> href="resources/dk.yousee.order.css.Style/yousee.css" media="screen"
> />
>
> /Steen
>
> 2008/4/1, Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>:
>   
>> Eeek TDC(yousee), which robs me of a montly fee for television!
>>
>> This might not be the rigth forum to ask CSS questions and is sort of
>> offtopic. But usually when something works in IE and doesnt in firefox
>> it means that IE breaks standard compability, and due to some bug in IE
>> works anyway. My prefered way of working are using firefox to develop,
>> checking in IE and then fix so it works in IE too..
>>
>> Could you show the corresponding html?
>>
>> regards Nino
>>
>>
>> Steen Larsen wrote:
>>     
>>> Hi,
>>>
>>> I have made a stylesheet to change the default look of the
>>>       
>> FeedbackPanel,
>>     
>>> and loaded it with response.renderCSSReference(new ResourceReference(
>>> Style.class,"yousee.css"), "screen"), where the class Style and the css
>>>       
>> is
>>     
>>> in the same package. The css looks like this:
>>>
>>> li.feedbackPanelERROR {
>>>     background-image: none;
>>>     color: red;
>>>     padding-left: 0px;
>>>     background-repeat: no-repeat;
>>>     background-position: 0px;
>>>     list-style-type: none;
>>> }
>>>
>>> li.feedbackPanelINFO {
>>>     background-image: none;
>>>     color: red;
>>>     padding-left: 0px;
>>>     background-repeat: no-repeat;
>>>     background-position: 0px;
>>>     list-style-type: none;
>>> }
>>>
>>> This works fine in IE7, but for some reason only works partly in
>>>       
>> Firefox.
>>     
>>> The green background-image is removed but the text is not red, and is
>>> indented as in the original. Looking at the styles with Firefoxs
>>> WebDeveloper shows the correct styles. Anybody experienced this and
>>>       
>> found a
>>     
>>> solution ?.
>>>
>>> /Steen
>>>
>>>
>>>       
>> --
>> -Wicket for love
>>
>> Nino Martinez Wael
>> Java Specialist @ Jayway DK
>> http://www.jayway.dk
>> +45 2936 7684
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>>     
>
>   

-- 
-Wicket for love

Nino Martinez Wael
Java Specialist @ Jayway DK
http://www.jayway.dk
+45 2936 7684


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Changing Wickets default styles

Posted by Steen Larsen <st...@gmail.com>.
I'm also developing mainly on firefox, and have tried clearing the cache an
all, but no luck. My colleague tried it out with the same result and he had
never downloaded the new stylesheet before.

The html is the standard feedback panel:

<div wicket:id="feedback"><wicket:panel>
  <ul wicket:id="feedbackul">
    <li wicket:id="messages" class="feedbackPanelERROR">
      <span wicket:id="message" class="feedbackPanelERROR">Feltet
postnummer skal udfyldes.</span>
    </li>
  </ul>
</wicket:panel></div>

and the css reference adds the following line to head, which should be ok:

<link rel="stylesheet" type="text/css"
href="resources/dk.yousee.order.css.Style/yousee.css" media="screen"
/>

/Steen

2008/4/1, Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>:
>
> Eeek TDC(yousee), which robs me of a montly fee for television!
>
> This might not be the rigth forum to ask CSS questions and is sort of
> offtopic. But usually when something works in IE and doesnt in firefox
> it means that IE breaks standard compability, and due to some bug in IE
> works anyway. My prefered way of working are using firefox to develop,
> checking in IE and then fix so it works in IE too..
>
> Could you show the corresponding html?
>
> regards Nino
>
>
> Steen Larsen wrote:
> > Hi,
> >
> > I have made a stylesheet to change the default look of the
> FeedbackPanel,
> > and loaded it with response.renderCSSReference(new ResourceReference(
> > Style.class,"yousee.css"), "screen"), where the class Style and the css
> is
> > in the same package. The css looks like this:
> >
> > li.feedbackPanelERROR {
> >     background-image: none;
> >     color: red;
> >     padding-left: 0px;
> >     background-repeat: no-repeat;
> >     background-position: 0px;
> >     list-style-type: none;
> > }
> >
> > li.feedbackPanelINFO {
> >     background-image: none;
> >     color: red;
> >     padding-left: 0px;
> >     background-repeat: no-repeat;
> >     background-position: 0px;
> >     list-style-type: none;
> > }
> >
> > This works fine in IE7, but for some reason only works partly in
> Firefox.
> > The green background-image is removed but the text is not red, and is
> > indented as in the original. Looking at the styles with Firefoxs
> > WebDeveloper shows the correct styles. Anybody experienced this and
> found a
> > solution ?.
> >
> > /Steen
> >
> >
>
>
> --
> -Wicket for love
>
> Nino Martinez Wael
> Java Specialist @ Jayway DK
> http://www.jayway.dk
> +45 2936 7684
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

RE: Changing Wickets default styles

Posted by "Martijn C. Vos" <m....@onehippo.com>.
Nino Saturnino Martinez Vazquez Wael wrote:
> Eeek TDC(yousee), which robs me of a montly fee for television!
> 
> This might not be the rigth forum to ask CSS questions and is
> sort of offtopic. But usually when something works in IE and
> doesnt in firefox it means that IE breaks standard
> compability, and due to some bug in IE works anyway. 

Often, yes, but not always. I've also been in situations where
for unknown reasons firefox didn't render the way I expected.
So I open WebDeveloper's CSS editor, and suddenly it looks fine!

There is definitely something that WebDeveloper does different
(better, I suspect) than Firefox, but what it is, I still haven't
figured out. It's not a Wicket issue, though.


mcv.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Changing Wickets default styles

Posted by Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>.
Eeek TDC(yousee), which robs me of a montly fee for television!

This might not be the rigth forum to ask CSS questions and is sort of 
offtopic. But usually when something works in IE and doesnt in firefox 
it means that IE breaks standard compability, and due to some bug in IE 
works anyway. My prefered way of working are using firefox to develop, 
checking in IE and then fix so it works in IE too..

Could you show the corresponding html?

regards Nino

Steen Larsen wrote:
> Hi,
>
> I have made a stylesheet to change the default look of the FeedbackPanel,
> and loaded it with response.renderCSSReference(new ResourceReference(
> Style.class,"yousee.css"), "screen"), where the class Style and the css is
> in the same package. The css looks like this:
>
> li.feedbackPanelERROR {
>     background-image: none;
>     color: red;
>     padding-left: 0px;
>     background-repeat: no-repeat;
>     background-position: 0px;
>     list-style-type: none;
> }
>
> li.feedbackPanelINFO {
>     background-image: none;
>     color: red;
>     padding-left: 0px;
>     background-repeat: no-repeat;
>     background-position: 0px;
>     list-style-type: none;
> }
>
> This works fine in IE7, but for some reason only works partly in Firefox.
> The green background-image is removed but the text is not red, and is
> indented as in the original. Looking at the styles with Firefoxs
> WebDeveloper shows the correct styles. Anybody experienced this and found a
> solution ?.
>
> /Steen
>
>   

-- 
-Wicket for love

Nino Martinez Wael
Java Specialist @ Jayway DK
http://www.jayway.dk
+45 2936 7684


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Changing Wickets default styles

Posted by Al Maw <wi...@almaw.com>.
If you are having CSS issues in firefox, use firebug to debug it. It will
tell you which rules are being overridden and by what. You might be
including the CSS in the wrong order on the page, for example.

Regards,

Al

On Tue, Apr 1, 2008 at 6:06 PM, Matthew Young <gi...@gmail.com> wrote:

> >and is indented as in the original
>
> I think some browser use padding, others use margin to shift li.  You need
> to set both padding-left and margin-left to have them look the same on all
> browsers.
>
> On Tue, Apr 1, 2008 at 6:33 AM, Steen Larsen <st...@gmail.com> wrote:
>
> > Hi,
> >
> > I have made a stylesheet to change the default look of the
> FeedbackPanel,
> > and loaded it with response.renderCSSReference(new ResourceReference(
> > Style.class,"yousee.css"), "screen"), where the class Style and the css
> is
> > in the same package. The css looks like this:
> >
> > li.feedbackPanelERROR {
> >    background-image: none;
> >    color: red;
> >    padding-left: 0px;
> >    background-repeat: no-repeat;
> >    background-position: 0px;
> >    list-style-type: none;
> > }
> >
> > li.feedbackPanelINFO {
> >    background-image: none;
> >    color: red;
> >    padding-left: 0px;
> >    background-repeat: no-repeat;
> >    background-position: 0px;
> >    list-style-type: none;
> > }
> >
> > This works fine in IE7, but for some reason only works partly in
> Firefox.
> > The green background-image is removed but the text is not red, and is
> > indented as in the original. Looking at the styles with Firefoxs
> > WebDeveloper shows the correct styles. Anybody experienced this and
> found
> > a
> > solution ?.
> >
> > /Steen
> >
>

Re: Changing Wickets default styles

Posted by Matthew Young <gi...@gmail.com>.
>and is indented as in the original

I think some browser use padding, others use margin to shift li.  You need
to set both padding-left and margin-left to have them look the same on all
browsers.

On Tue, Apr 1, 2008 at 6:33 AM, Steen Larsen <st...@gmail.com> wrote:

> Hi,
>
> I have made a stylesheet to change the default look of the FeedbackPanel,
> and loaded it with response.renderCSSReference(new ResourceReference(
> Style.class,"yousee.css"), "screen"), where the class Style and the css is
> in the same package. The css looks like this:
>
> li.feedbackPanelERROR {
>    background-image: none;
>    color: red;
>    padding-left: 0px;
>    background-repeat: no-repeat;
>    background-position: 0px;
>    list-style-type: none;
> }
>
> li.feedbackPanelINFO {
>    background-image: none;
>    color: red;
>    padding-left: 0px;
>    background-repeat: no-repeat;
>    background-position: 0px;
>    list-style-type: none;
> }
>
> This works fine in IE7, but for some reason only works partly in Firefox.
> The green background-image is removed but the text is not red, and is
> indented as in the original. Looking at the styles with Firefoxs
> WebDeveloper shows the correct styles. Anybody experienced this and found
> a
> solution ?.
>
> /Steen
>

Re: Changing Wickets default styles

Posted by Nino Saturnino Martinez Vazquez Wael <ni...@jayway.dk>.
Eeek TDC(yousee), which robs me of a montly fee for television!

This might not be the rigth forum to ask CSS questions and is sort of 
offtopic. But usually when something works in IE and doesnt in firefox 
it means that IE breaks standard compability, and due to some bug in IE 
works anyway. My prefered way of working are using firefox to develop, 
checking in IE and then fix so it works in IE too..

Could you show the corresponding html?

regards Nino

Steen Larsen wrote:
> Hi,
>
> I have made a stylesheet to change the default look of the FeedbackPanel,
> and loaded it with response.renderCSSReference(new ResourceReference(
> Style.class,"yousee.css"), "screen"), where the class Style and the css is
> in the same package. The css looks like this:
>
> li.feedbackPanelERROR {
>     background-image: none;
>     color: red;
>     padding-left: 0px;
>     background-repeat: no-repeat;
>     background-position: 0px;
>     list-style-type: none;
> }
>
> li.feedbackPanelINFO {
>     background-image: none;
>     color: red;
>     padding-left: 0px;
>     background-repeat: no-repeat;
>     background-position: 0px;
>     list-style-type: none;
> }
>
> This works fine in IE7, but for some reason only works partly in Firefox.
> The green background-image is removed but the text is not red, and is
> indented as in the original. Looking at the styles with Firefoxs
> WebDeveloper shows the correct styles. Anybody experienced this and found a
> solution ?.
>
> /Steen
>
>   

-- 
-Wicket for love

Nino Martinez Wael
Java Specialist @ Jayway DK
http://www.jayway.dk
+45 2936 7684


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org