[css-d] Background in IE6 and 7
Dear List, I have a table theading (thead>tr>th) which has a background image set on the tr. I also have a small arrow image set as a background image to a link in each th to indicate the direction of sort. In FF all works as expected, however in IE6+7 oon XP (all I have tested thus far) the th has a white bg which hides the tr background. I haven't found anything written on this yet, anybody know how I can make that th background transparent? Or any articles about this? The arrow image is set like this: background: transparent url(../images/arrow.png) right center no-repeat; Thanks, Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
IE 6 can't render .png files with alpha transparency properly. It displays the transparent part as white. Easiest way round that one is to replace the .png with a .gif. I can't think why there should be a problem with IE7 as the .png bug is fixed in tr>th) which has a background image set on the tr. I also have a small arrow image set as a background image to a link in each th to indicate the direction of sort. In FF all works as expected, however in IE6+7 oon XP (all I have tested thus far) the th has a white bg which hides the tr background. I haven't found anything written on this yet, anybody know how I can make that th background transparent? Or any articles about this? The arrow image is set like this: background: transparent url(../images/arrow.png) right center no-repeat; Thanks, Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
Mark Finney wrote: > Dear List, > > I have a table theading (thead>tr>th) which has a background image set on > the tr. I also have a small arrow image set as a background image to a link > in each th to indicate the direction of sort. In FF all works as expected, > however in IE6+7 oon XP (all I have tested thus far) the th has a white bg > which hides the tr background. > > I haven't found anything written on this yet, anybody know how I can make > that th background transparent? Or any articles about this? > > The arrow image is set like this: > > background: transparent url(../images/arrow.png) right center no-repeat; > > Thanks, > > Mark Check your CSS and see if you have this. background: transparent url(../images/arrow.png)right center no-repeat; There is no whitespace between "png)right" and this would cause IE5~IE7 to throw such a background string out. Can you put up a live test case showing the problem? Alan http://css-class.com/test/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
Thanks for your advice, I have a mock up here... http://cathaytrade.co.uk/tabletest/ What am I doing wrong? Thanks in advance! On 04/04/2008, Alan Gresley <[EMAIL PROTECTED]> wrote: > > Mark Finney wrote: > > Dear List, > > > > I have a table theading (thead>tr>th) which has a background image set > > on > > the tr. I also have a small arrow image set as a background image to a > > link > > in each th to indicate the direction of sort. In FF all works as > > expected, > > however in IE6+7 oon XP (all I have tested thus far) the th has a white > > bg > > which hides the tr background. > > > > I haven't found anything written on this yet, anybody know how I can > > make > > that th background transparent? Or any articles about this? > > > > The arrow image is set like this: > > > > background: transparent url(../images/arrow.png) right center no-repeat; > > > > Thanks, > > > > Mark > > > > > Check your CSS and see if you have this. > > background: transparent url(../images/arrow.png)right center no-repeat; > > There is no whitespace between "png)right" and this would cause IE5~IE7 to > throw such a background string out. > > Can you put up a live test case showing the problem? > > > Alan > > http://css-class.com/test/ > > > > -- quoakle? w. www.quoakle.com e. [EMAIL PROTECTED] m. 07866732010 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
You have white space in your css definition which is confusing the browsers.
It's between the 'tr' and the '.header':
/* Your code */
table.styledTable thead tr .header {
background: transparent url(bg.gif) center right no-repeat;
text-align: left;
}
/* Amended code */
table.styledTable thead tr.header {
background: transparent url(bg.gif) center right no-repeat;
text-align: left;
}
Subtle but significant.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Mark Finney
To: Alan Gresley
Cc: CSS Mailing List
Sent: Saturday, April 05, 2008 1:32 PM
Subject: Re: [css-d] Background in IE6 and 7
Thanks for your advice,
I have a mock up here...
http://cathaytrade.co.uk/tabletest/
What am I doing wrong?
Thanks in advance!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
Thanks, but the .header is not for the tr... it is for the child of the
tr... the white space is deliberate...
Mark
On 05/04/2008, Alan K Baker <[EMAIL PROTECTED]> wrote:
>
> You have white space in your css definition which is confusing the
> browsers.
>
> It's between the 'tr' and the '.header':
>
> /* Your code */
> table.styledTable thead tr .header {
> background: transparent url(bg.gif) center right no-repeat;
> text-align: left;
> }
>
> /* Amended code */
> table.styledTable thead tr.header {
> background: transparent url(bg.gif) center right no-repeat;
> text-align: left;
> }
>
> Subtle but significant.
>
>
> Regards,
>
> Alan.
>
> www.theatreorgans.co.uk
> www.virtualtheatreorgans.com
> Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
> Shopsmith 520 + bits
> Flatulus Antiquitus
>
>
> - Original Message -----
> From: Mark Finney
>
> To: Alan Gresley
> Cc: CSS Mailing List
> Sent: Saturday, April 05, 2008 1:32 PM
> Subject: Re: [css-d] Background in IE6 and 7
>
>
> Thanks for your advice,
>
> I have a mock up here...
>
> http://cathaytrade.co.uk/tabletest/
>
> What am I doing wrong?
>
> Thanks in advance!
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
--
quoakle?
w. www.quoakle.com
e. [EMAIL PROTECTED]
m. 07866732010
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
I altered the css to include th.header, but as I thought this makes no
difference.
Anybody have a suggestion as to why IE is forcing the background to be white
when it is set to transparent?
Is transparent not a valid value for IE???
TIA,
Mark
On 05/04/2008, Mark Finney <[EMAIL PROTECTED]> wrote:
>
>
> Thanks, but the .header is not for the tr... it is for the child of the
> tr... the white space is deliberate...
>
> Mark
>
>
> On 05/04/2008, Alan K Baker <[EMAIL PROTECTED]> wrote:
> >
> > You have white space in your css definition which is confusing the
> > browsers.
> >
> > It's between the 'tr' and the '.header':
> >
> > /* Your code */
> > table.styledTable thead tr .header {
> > background: transparent url(bg.gif) center right no-repeat;
> > text-align: left;
> > }
> >
> > /* Amended code */
> > table.styledTable thead tr.header {
> > background: transparent url(bg.gif) center right no-repeat;
> > text-align: left;
> > }
> >
> > Subtle but significant.
> >
> >
> > Regards,
> >
> > Alan.
> >
> > www.theatreorgans.co.uk
> > www.virtualtheatreorgans.com
> > Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
> > Shopsmith 520 + bits
> > Flatulus Antiquitus
> >
> >
> > - Original Message -
> > From: Mark Finney
> >
> > To: Alan Gresley
> > Cc: CSS Mailing List
> > Sent: Saturday, April 05, 2008 1:32 PM
> > Subject: Re: [css-d] Background in IE6 and 7
> >
> >
> > Thanks for your advice,
> >
> > I have a mock up here...
> >
> > http://cathaytrade.co.uk/tabletest/
> >
> > What am I doing wrong?
> >
> > Thanks in advance!
> >
> >
> > __
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
>
>
>
> --
> quoakle?
>
> w. www.quoakle.com
> e. [EMAIL PROTECTED]
> m. 07866732010
>
>
--
quoakle?
w. www.quoakle.com
e. [EMAIL PROTECTED]
m. 07866732010
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
Replying to both your messages: Transparent is valid for IE7 but will only work in IE6 if the file's a gif (as yours are) not a png. In answer to your other reply, the fact remains that there was/is a white space in your code which messed up the table head rendering on my browser. Unless I've totally misunderstood, the is not in question. The IS a child of and has been given a class of "header", but because of the errant white space, the browser won't apply the "header" class to the . Have you actually tried my amendment? It certainly made things jump into life for me, and as I say, unless I've totally misunderstood you, it does do what you want it to do. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Mark Finney To: Alan K Baker Cc: css-d Sent: Saturday, April 05, 2008 3:13 PM Subject: Re: [css-d] Background in IE6 and 7 I altered the css to include th.header, but as I thought this makes no difference. Anybody have a suggestion as to why IE is forcing the background to be white when it is set to transparent? Is transparent not a valid value for IE??? TIA, Mark On 05/04/2008, Mark Finney <[EMAIL PROTECTED]> wrote: Thanks, but the .header is not for the tr... it is for the child of the tr... the white space is deliberate... Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
On 05/04/2008, Alan Gresley <[EMAIL PROTECTED]> wrote:
>
> Mark Finney wrote:
>
> > Thanks for your advice,
> >
> > I have a mock up here...
> >
> > http://cathaytrade.co.uk/tabletest/
> >
> > What am I doing wrong?
> >
> > Thanks in advance!
> >
>
>
> Remove the background image from the th.header and put them on the
> anchors.
>
> table.styledTable thead th a,
> table.styledTable thead th a:link,
> table.styledTable thead th a:visited,
> table.styledTable thead th a:hover {
>background: url(http://cathaytrade.co.uk/tabletest/bg.gif) 105% 50%
> no-repeat;
>color: #99;
>display: block;
>text-decoration: none;
>height: 100%;
>width: auto;
>padding-right: 15px;
> }
>
>
> Checked in IE6, IE7, IE8 and FF with success.
>
>
> Alan
>
> http://css-class.com/test/
>
>
>
>
That easy!?
Wow, thanks alot...
So any idea what is wrong with applying it to a table cell???
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
Mark Finney wrote:
> Thanks for your advice,
>
> I have a mock up here...
>
> http://cathaytrade.co.uk/tabletest/
>
> What am I doing wrong?
>
> Thanks in advance!
Remove the background image from the th.header and put them on the anchors.
table.styledTable thead th a,
table.styledTable thead th a:link,
table.styledTable thead th a:visited,
table.styledTable thead th a:hover {
background: url(http://cathaytrade.co.uk/tabletest/bg.gif) 105% 50%
no-repeat;
color: #99;
display: block;
text-decoration: none;
height: 100%;
width: auto;
padding-right: 15px;
}
Checked in IE6, IE7, IE8 and FF with success.
Alan
http://css-class.com/test/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background in IE6 and 7
You're right, I did misunderstand the issue. Found one when where there were
two!
As Alan says, add the background to the anchor like:
table.styledTable thead th a,
table.styledTable thead th a:link,
table.styledTable thead th a:visited,
table.styledTable thead th a:hover {
background: transparent url(bg.gif) center right no-repeat;
color: #99;
display: block;
text-decoration: none;
height: 100%;
width: auto;
padding-right: 15px;
}
You can see it working at: www.webbwize.co.uk/Test_Area/tabletest.html
Grab the code if you wish, after all, it is your code. I'll leave it there for
today.
BTW I only mentioned the transparency issues because you aksed about them in
the first place. :-)
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Mark Finney
To: Alan K Baker
Sent: Saturday, April 05, 2008 4:46 PM
Subject: Re: [css-d] Background in IE6 and 7
I am afriad you have miss understood the issue. Your amendment doesn't fix it
it breaks it further as there is no directional arrow at all.
Look closely at the mark up and the css you will see that .header is a class
attached to a th NOT a tr.
The white space is therefore necessary. If it helps you to visualise it add
the th in like this:
/*
table.styledTable thead tr th.header {
background: transparent url(bg.gif) center right no-repeat;
text-align: left;
}
*/
Your amendment will stop the white overlaying the background - yes. But it
then displays the wrong background to the th, I specifically want two
bcakground images, one on the tr, one over the top of it on the th. View the
original in FF you will see there is a directional arrow over the top of the
gradient.
I know there are img transparency issues with IE, but this is not about img
transparency. it is about the background-color: transparent; inconsistencies I
am getting ...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
