12 replies [Last post]
Ariane Felix
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-2
Joined: 2007-09-24
Posts: 6
Points: 0

Hi there!

I configured the css style like this:

.gwt-Tree .gwt-TreeItem { background-image: url(images/menuItem.png); width: 180px; height: 25px; padding-top:2px; padding-left:1px; }

.gwt-Tree .gwt-TreeItem-selected {
background-image: url(images/selectedMenuItem.png);
width: 180px;
height: 25px;
padding-top:2px;
padding-left:1px;
}

In IE the background image appears with the gray background (as expected, is a PNG), and in firefox it doesn't appear at all, except when I set the padding, when I do that a small portion of the image appears (according to the padding). Why it doesn't show in firefox?

Thanks a lot!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 34 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Please show us ALL your HTML

Please show us ALL your HTML and CSS; your code snippet is too brief.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

qube99
Offline
Regular
Texas
Last seen: 6 years 28 weeks ago
Texas
Timezone: GMT-7
Joined: 2007-09-11
Posts: 39
Points: 0

Are you trying to do a

Are you trying to do a rollover or hover effect?

If so, there is another way to approach it that may solve your problem while solving the flicker problem you'll have with 2 images.

Combine the two images into 1 image and then use position:top-left, position:top-right to shift the image on hover, or active, or visited or whatever it is you're trying to do.

This eliminates 1 http hit on the server and also pre-loads the second image which eliminates the flicker problem. You can use any number of positions to shift an image to show any number of link states, usually 4 will do the job.

You should also be aware that the png image type is not fully supported by all Explorer browsers in use. Yeah, it's a terrific format and we've been complaining to Redmond for years about this.

Concerning the padding problem, we will need to see all the HTML/CSS to understand what's happening. It sounds like a IE box model problem or maybe an inheritance problem but we cannot know without the code.

Steve Strickland
Ecommerce-Retail.com

Ariane Felix
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-2
Joined: 2007-09-24
Posts: 6
Points: 0

I don't do the html. I'm

I don't do the html. I'm using GWT (Google Web Tookit), and it has it's own components, all I do is implement the css they tell me to (the tree component, in this case http://code.google.com/webtoolkit/documentation/com.google.gwt.user.client.ui.Tree.html).

The first style is for the normal node of the tree, and the second style is for the selected node (so looks like a hover). In IE works fine (I can try to make a nice conversion to gif), as I said, so I thought it has nothing to do with GWT, sounds more like a browser compatibility problem. The impression I have is that the image is hidden beneath something, because when I do the padding the small portion of the image shifts when I select that node.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9048
Points: 3017

It doesn't matter who or

It doesn't matter who or what does the html. At some point, the html+css is served to the browser. We need to see what the browser sees. If nothing else works, view source and post that.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Ariane Felix
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-2
Joined: 2007-09-24
Posts: 6
Points: 0

Well... ok, this is the html

Well... ok, this is the html (when I press Ctrl+U in firefox):






Wrapper HTML for Modulo




body,td,a,div,.p{font-family:arial,sans-serif}
div,td{color:#000000}
a:link,.w,.w a:link{color:#0000cc}
a:visited{color:#551a8b}
a:active{color:#ff0000}

















thanks Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 14 weeks 5 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

It could do with a doctype.

It could do with a doctype.

Verschwindende wrote:
  • CSS doesn't make pies

Ariane Felix
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-2
Joined: 2007-09-24
Posts: 6
Points: 0

How exactly?

How exactly? I reed this http://developer.mozilla.org/en/docs/Mozilla%27s_DOCTYPE_sniffing and I didn't understud anything actually...

Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 34 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Read this instead:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Ariane Felix
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-2
Joined: 2007-09-24
Posts: 6
Points: 0

Well, thanks, very

Well, thanks, very enlightening, but I tested all DOCTYPEs listed (none worked). Besides I also tested the ones listed here: http://htmlhelp.com/tools/validator/doctype.html , none worked either.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9048
Points: 3017

Having a doctype doesn't

Having a doctype doesn't necessarily 'fix' things. It does two things:

1) It tells the validator which set of rules to check your markup against. Any new document should be checked against a strict DTD, since there's no sane reason to use deprecated elements or attributes. Older documents that are marked up with elements and attributes that were superseded eight years ago may be checked against a transitional DTD if you don't/can't bring them up to date.

2) IE5 had only a passing acquaintance with the standards. IE6 was better, but MSFT didn't want to break pages in IE5, so they wrote IE6 to use IE5 rendering rules in 'quirks' mode. The DTD is the trigger for either standards mode or quirks, depending on whether there is a complete and proper one.

Thankfully, IE5 is dead. If there is some misbegot reason to support it, there are work-arounds. The troubles arise if IE6+ is not in standards mode. It then acts like IE5 and isn't compatible with the modern browsers.

So, even if using a proper DTD doesn't cure what ails you now, it will at least make IE behave a little more sanely, reducing the pain and suffering of achieving x-browser compatibility.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Ariane Felix
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-2
Joined: 2007-09-24
Posts: 6
Points: 0

I must remember that the

I must remember that the problem only happens in firefox 2.0.0.5.

Narconon Vistabay
Offline
newbie
Last seen: 5 years 3 weeks ago
Joined: 2009-03-26
Posts: 1
Points: 0

external style sheet will override the internal style sheet

Smile If the external style sheet link is placed below the internal style sheet in HTML , the external style sheet will override the internal style sheet.