21 replies [Last post]
designMatters
Offline
newbie
Last seen: 14 years 11 weeks ago
Joined: 2007-01-10
Posts: 7
Points: 0

Hi all,
what i thought would be a straight forward task is turning into somewhat of a nightmare. I sure could use any ideas or solutions that will help me out.

I am working with a group of content modules that have a background-image defined in the .css; example:

.module {
background: url(graphic.png;) top left repeat-x;
}

what i want to do is selectively display some of these modules without the background-image and without doing much alteration to the HTML templates that they are being served into. I also don't want to produce an alternate set of modues with new styles applied. My approach was to nest some of the modules inside of a #naked

. Then create a new style definition:

#naked .module {
background-image: none;
}

------------------------------------------------------

HTML examples:

with background
(div class="module")(/div)

without background
(div id="naked">
    (div class="module")(/div)
(/div)

when the module is nested in the #naked the background image should not appear. In Firefox and Safari this works. However, in IE7 the background image appears in both examples.

I'd very much appreciate if anyone has a solution to this problem.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

have you tried

have you tried background:none rather than background-image:none;?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 38 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Fixed?

Hi

You need to lose the ; after the filename, and lose the space between #naked and .module to make this (I added the dimensions and border so I could see what was happening):

.module{ height:10px; width:10px; border:1px solid black; background: url(graphic.png) top left repeat-x; } #naked.module { background-image: none; }

I assume you meant to use <>'s but typed ()'s in the html:

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

closing the space between

:? closing the space between the selectors means an element that has both the ID and the class specified, you need the space to describe a descendent selector .module is descended fron #naked .module exists in an element that has ID of #naked.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 38 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

And you expected MS to get that right in IE?

Hugo wrote:
:? closing the space between the selectors means an element that has both the ID and the class specified, you need the space to describe a descendent selector .module is descended fron #naked .module exists in an element that has ID of #naked.

Just coz that's how it's sposed to work, it doesn't in IE. But the way I did it does. Moreover, FF is happy with it too. But I take your point. I have had this before where IE wouldn't play ball.

I spose I was a teensy weensy bit naive in expecting IE7 to be perfik.

In reality, FF and IE will render this as required IF the DIV with the module class is a DIRECT descendent of a DIV with an ID of naked.

In other words FF will get it right the way the OP first tried it, but IE won't, but both will get it right the way I suggested.

designMatters
Offline
newbie
Last seen: 14 years 11 weeks ago
Joined: 2007-01-10
Posts: 7
Points: 0

removing the space between

removing the space between the id and the class caused the backgroung image to display in all browsers, not just in IE.

changing the class definition to {background:none;} had no effect in IE.

thanks for the assistance.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 38 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Too Much Beer

I'd had a few too many beers (hic).

I've now got a hangover.

My excuse is that yet another year has passed.

I'll look at this a bit later and post a good answer Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well based on what

Well based on what information you supplied the code below works for me in IE7 & FF (IE7 standalone version, which may or may not be a problem) so I can only asume you have something else going on in your code that we can't see.

hide background image

* {margin:0;padding:0}
div.box {
margin:50px auto;
width:50%;
border:1px solid red;
}
.module {
width:150px;
height:102px;
margin:1em auto;
background: url(images.jpg) top left repeat-x;
border:1px solid #eee;
}
#naked .module{background-image:none;}





Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

designMatters
Offline
newbie
Last seen: 14 years 11 weeks ago
Joined: 2007-01-10
Posts: 7
Points: 0

Hugo, You suspect correctly

Hugo,
You suspect correctly that there is more going on. Lots more. I've isolated the actual modules from the page and did what you suggested above, however in IE7 i get no difference in what gets rendered in the browser between the current modules and the naked modules.

Here's the full mark-up.

first the css

/* ---------------------------- */
/* THESE ARE GENERAL STYLES */
/* ---------------------------- */

body {
}

a {text-decoration: none; color: #990000; background-color: transparent;}

a:hover {background-color: #edd6d7;}

.modHd {
font-size: 15px;
font-weight: bold;
color: #ccc;
position: relative;
top: 11px;
left: 11px;
z-index: 1;
padding: 0px;
margin: 0px;
}

.mod2ColContent {
position: relative;
left: 6px;
margin: 0px;
width: 380px;
}

/* ---------------------------- */
/* THESE ARE THE EXISTING STYLES */
/* ---------------------------- */

/* 2-column Module */ /* 2-column Module - Black */ /* 2-column module - black - top */
.mod2ColBlkTopShadow {
width: 381px;
height: 32px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_top_sh.png');
padding-right: 11px;
}

html>body .mod2ColBlkTopShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_top_sh.png) top left no-repeat;
}

/* 2-column module - black - middle */
.mod2ColBlkMidShadow {
width: 392px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png');
}

html>body .mod2ColBlkMidShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png) top left repeat-y;
}

/* 2-column module - black bright - middle */
.mod2ColBlkMidShadow {
width: 392px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png');
}
html>body .mod2ColBlkMidShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png) top left repeat-y;
}

/* 2-column module - black - bottom */
.mod2ColBlkBtmShadow {
width: 392px;
height: 6px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_bottom_sh.png');
}

html>body .mod2ColBlkBtmShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_bottom_sh.png) bottom left no-repeat;
}

/* ---------------------------- */
/* THESE ARE THE NEW #NAKED STYLES */
/* ---------------------------- */

/* 2-column Module */ /* 2-column Module - Black */ /* 2-column module - black - top */
#naked .mod2ColBlkTopShadow {
width: 381px;
height: 32px;
background-image:none;
padding-right: 11px;
}

html>body #naked .mod2ColBlkTopShadow {
background-image:none;}

/* 2-column module - black - middle */
#naked .mod2ColBlkMidShadow {
width: 392px;
background-image:none;
}

html>body #naked .mod2ColBlkMidShadow {
background-image:none;
}

/* 2-column module - black bright - middle */
#naked .mod2ColBlkMidShadow {
width: 392px;
background-image:none;
}

html>body #naked .mod2ColBlkMidShadow {
background-image:none;
}

/* 2-column module - black - bottom */
#naked .mod2ColBlkBtmShadow {
width: 392px;
height: 6px;
background-image:none;
}

html>body #naked .mod2ColBlkBtmShadow {
background-image:none;
}

and the html

<?xml version="1.0"?>

Modules

Latest Tech News

At vero eos et accusamus et iusto odio dignissimos ducimus



Latest Tech News

At vero eos et accusamus et iusto odio dignissimos ducimus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hmm, off hand I dont see why

Hmm, off hand I dont see why it's not working, any chance of a link to the page?

btw you ought to loose the xml declaration (prolog) at the top of the page as this upsets IE6.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

designMatters
Offline
newbie
Last seen: 14 years 11 weeks ago
Joined: 2007-01-10
Posts: 7
Points: 0

i can attach these test

i can attach these test files. that's the best i can do. hope this helps...

btw, the xml declaration was something that BBedit stuck in the file i made to create the test page. it's now gone.

AttachmentSize
modules.html.txt 1.01 KB
modules.css_.txt 3.08 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's a bit late now and I'm

It's a bit late now and I'm fading but if no one else has I'll try and have a quick look at the files in the morning as this doesn't make sense so far.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 45 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

I am going to go at this in

I am going to go at this in the dark. I dont feel like reading the whole thread. But basically I see that in FF it works. The naked took away the background image just fine.

Now in IE its a different story. And it's because of this:

At vero eos et accusamus et iusto odio dignissimos ducimus

I dont know where you guys learn that from, but I see alot of peoplg using "div" by itself. I noticed that everytime you use something like that, IE messes up and go crazy.

If I am wrong, feel free to set me on fire.

Smile

Goodluck.

designMatters
Offline
newbie
Last seen: 14 years 11 weeks ago
Joined: 2007-01-10
Posts: 7
Points: 0

Hugo, thanks for all the

Hugo, thanks for all the attention you are giving this.

Vinhboy,
i changed the line of code you highlighted to:

At vero eos et accusamus et iusto odio dignissimos ducimus

that had no effect for me.

Feel free to download the attachments and noodle around with the source and css. Any and all ideas are welcomed.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 45 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

I changed one of your #naked

I changed one of your #naked .blahblahbalh to a #naked div and it took off half of the background. I cant get rid of the other half.

But I have an idea.

Instead of just making a div for the #naked. make a div for the #notnaked

If thats allowed, you will be able to do what you want. I tested it, and it seems to work.

I have NO idea why #naked on a class element does not work. Strange as heck.

Vinh

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

really text shouldn't be

really text shouldn't be naked in a div I would place it in a p tag, it might also be worth working through some of the elements commenting them out to see if any thing is obstructing the element flow, but I will take a look in the morning with fresh head.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 38 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Easy Peesy - Not

No beer tonight!

Revised css ( look for display:inline's and a top of 11px changed to padding):

/* ---------------------------- */ /* THESE ARE GENERAL STYLES */ /* ---------------------------- */

body {
}

a {text-decoration: none; color: #990000; background-color: transparent;}

a:hover {background-color: #edd6d7;}

.modHd {
font-size: 15px;
font-weight: bold;
color: #ccc;
position: relative;
left: 11px;
z-index: 1;
padding: 0px;
margin: 0px;
padding-top: 11px;
}

.mod2ColContent {
position: relative;
left: 6px;
margin: 0px;
width: 380px;
height:20px;
}

/* ---------------------------- */
/* THESE ARE THE EXISTING STYLES */
/* ---------------------------- */

/* 2-column Module */ /* 2-column Module - Black */ /* 2-column module - black - top */
.mod2ColBlkTopShadow {
width: 381px;
height: 32px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_top_sh.png');
padding-right: 11px;
}

html>body .mod2ColBlkTopShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_top_sh.png) top left no-repeat;
}

/* 2-column module - black - middle */
.mod2ColBlkMidShadow {
width: 392px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png');
}

html>body .mod2ColBlkMidShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png) top left repeat-y;
}

/* 2-column module - black bright - middle */
.mod2ColBlkMidShadow {
width: 392px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png');
}
html>body .mod2ColBlkMidShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_mid_sh.png) top left repeat-y;
}

/* 2-column module - black - bottom */
.mod2ColBlkBtmShadow {
width: 392px;
height: 6px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://images.pcworld.com/images/common/mod_2col_blk_bottom_sh.png');
}

html>body .mod2ColBlkBtmShadow {
background: url(http://images.pcworld.com/images/common/mod_2col_blk_bottom_sh.png) bottom left no-repeat;
}

/* ---------------------------- */
/* THESE ARE THE NEW .naked STYLES */
/* ---------------------------- */

/* 2-column Module */ /* 2-column Module - Black */ /* 2-column module - black - top */
#naked .mod2ColBlkTopShadow {
width: 381px;
height: 32px;
background-image:none;
padding-right: 11px;
display:inline;
}

html>body #naked .mod2ColBlkTopShadow {
background-image:none;}

/* 2-column module - black - middle */
#naked .mod2ColBlkMidShadow {
width: 392px;
background-image:none;
display:inline;
}

html>body #naked .mod2ColBlkMidShadow {
background-image:none;
}

/* 2-column module - black bright - middle */
#naked .mod2ColBlkMidShadow {
width: 392px;
background-image:none;
display:inline;
}

html>body #naked .mod2ColBlkMidShadow {
background-image:none;
}

/* 2-column module - black - bottom */
#naked .mod2ColBlkBtmShadow {
width: 392px;
height: 6px;
background-image:none;
display:inline;
}

html>body #naked .mod2ColBlkBtmShadow {
background-image:none;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

So what was the problem

So what was the problem Treva? a little explanation? perchance Smile

Display:inline is a bit odd, and a workaround rather than solution as it were

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 38 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

A solution AND an explanation?

Gosh.

I suspected that one or other of the boxes was falling foul of the hasLayout IE bug, so I tried the height:1% trik, and it partially worked. Now why? Sorry, not bright enough to figure that one.

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think, as I slightly

I think, as I slightly suspected when I saw the MS filter in use, that it was possibly part of the problem.

Taking your test case files and replacing the image calls with my own png graphic, produced the following conditions:


  1. Firefox displayed as expected, no backgrounds for elements nested in #naked.

  • IE6 failed to hide the background.
  • IE7 failed to hide the background.
  • I need to confirm that IE6 was in fact part of your original tests as I had the impression that IE7 was the only problem?

    My observations regardless of the iE6 question are that:


    1. You have failed to hide the MS filter although hiding the normal graphic with child selector.

  • IE7 will read MS filters
  • IE6 is not hiding the graphic as it's not a background call but a filter call and were only hiding backgrounds!
  • To solve the problems in my local test example I firstly:

    1. ensured that only IE6 read the MS filter using the Star selector filter ' * html'
    2. added 'filter:none;' to all the background none in the #naked descendent rulesets.

    My conclussions were that:

    By not hiding the MS filter rules IE7 was reading and implementing the filter graphic as well as the normal one you had hidden from IE6 using the child selector.

    IE6 was displaying the background in the #naked grouping as you were only hiding the background property when the graphic call was through an entirely different property!

    Applying [example]* html .mod2ColBlkBtmShadow[/] to all the filter rulesets prevented IE7 from seeing the filter rule and it then duly observed the #naked rulesets correctly.

    Adding filter:none; to all the background:none rulesets cancelled the IE6 filters.

    N.B. The filter:none was a leap of faith as I had no idea whether this would work but assumed that value none would exist even for a proprietary property.

    I might have just confused the filter into not working though, I haven't actually checked to see if this is legal but then again it's proprietary so it's not going to validate anyway.

    In all this I might well have missed some other conditions pertaining to the problem, but I think that this was the root cause of the original question.

    Hugo.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    designMatters
    Offline
    newbie
    Last seen: 14 years 11 weeks ago
    Joined: 2007-01-10
    Posts: 7
    Points: 0

    Hooray for Hugo!!! filter:

    Hooray for Hugo!!!

    filter: none

    adding that, in addition to the background-image:none, to the appropriate divs did the job.

    more info: http://www.w3.org/TR/PNG-Filters.html

    thanks to all who pitched in.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 29 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    The thing to remember is

    The thing to remember is that in reality the MS alphaimageloader is not in fact anything to do with the background property it applies the image through some other dark sorcery only known to MS.

    I would however still use the star selector filter to ensure that IE =<6 are the only versions picking up the filter alphaimageloader

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me