Bugzilla – Full Text Bug Listing
| Summary: | [Theming] transparent borders don't work with IE | ||
|---|---|---|---|
| Product: | [RT] RAP | Reporter: | Stefan Röck <stefan.roeck> |
| Component: | RWT | Assignee: | Project Inbox <rap-inbox> |
| Status: | RESOLVED WORKSFORME | QA Contact: | |
| Severity: | minor | ||
| Priority: | P3 | CC: | tbuschto |
| Version: | 1.3 | ||
| Target Milestone: | --- | ||
| Hardware: | PC | ||
| OS: | Windows XP | ||
| Whiteboard: | |||
Reproducible with IE8 too. Safari and Chrome are OK. It is actually broken in all browser, depending on what you see as the correct behavior. In SVG-browser, the background (gradient or solid color) is only drawn till the middle of the invisible border. In HTML/CSS the background would be drawn all the way to the edge of the area, but you could achieve that by setting a border-width of 0. The third option would be that the background is drawn till the point where the invisible border would begin. For your usecase, what would you need? Anyway, it would be relatively easy to change the IE behavoir to match that of the other browser, if that is sufficent. For me the only purpose of an transparent border with round corners is to prevent the background from being drawn in the widget's edges. So the behaviour in Firefox is fine. I think I tried setting a border of 0 and it didn't work but I will give it a try again. (In reply to comment #2) > It is actually broken in all browser, depending on what you see as the correct > behavior. In SVG-browser, the background (gradient or solid color) is only > drawn till the middle of the invisible border. In HTML/CSS the background would > be drawn all the way to the edge of the area, but you could achieve that by > setting a border-width of 0. The third option would be that the background is > drawn till the point where the invisible border would begin. From my understanding of the box model in CSS, the latter would be correct. Supporting transparent borders (it's valid CSS) could also be useful to switch borders on and off during a mouseover without affecting the content's position. (In reply to comment #4) I fully agree. (In reply to comment #4) > From my understanding of the box model in CSS, the latter would be correct. Actually, the behavior differs, but IE is the only browser that works like that. All other also draw the background where the border would be, and that seems to correct: http://www.w3.org/TR/2009/CR-CSS2-20090908/colors.html#background In CSS3 there is a "background-clip"-property to control this. From my point of view we could go with whatever is more useful, but in both cases some bigger changes to GfxMixin are necessary. It seems that it takes considerable effort to fix this in general (i.e. make it also work without enhanced borders) but currently there is no actual use case. Please reopen if there is a need for this. |
The following snippet works fine in Firefox but displays a black border in IE (tested with IE6): Button:hover.cmdCompactBtn { /* No border (transparent)*/ border: 1px solid transparent; border-radius: 4px; background-image: gradient(linear, left top, left bottom, from(#ffffff), color-stop(49%, #FFECAC), color-stop(50%, #FFDA59), to(#FFFCDF) ); }