By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,876 Members | 1,206 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,876 IT Pros & Developers. It's quick & easy.

IE: some (not all) background images don't appear

P: n/a
My latest project is almost done. It looks great in Firefox; I only
have two IE bugs left to squash, yay! Please refer to
http://www.blaqzone.com/Temp/Popfuel/ .

Crib notes:

- "reset.css" is a safety net that establishes some basic values. Coded
by Matt Wilcox, found at
meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/#comment-989
..

- I use 3 style sheets of my own: "layout.css" (layout, box model),
"visual.css" (colors, etc.), and "IE_5.5_and_above.css" for Internet
Explorer only, which is referenced within an IE conditional comment.

- There's also some files (JS, CSS) related to the dropdown menu. (I
selected Angus Turnbull's FreeStyle Menus,
www.twinhelix.com/dhtml/fsmenu/ .) The dropdown files don't seem to
have an effect on these bugs.

The HTML and CSS fully validate.

1) Each dark-brown section has 4 nested divs, one for each rounded
corner. Unfortunately, the top two corners don't appear. (The outside
of the curve doesn't cover up the sharp corner of the section div.) Why
would two background images appear, but not the other two?

2) The red "news" box is nested inside two divs: news > news_right >
news_box. news and news_right each have a background image (one left,
one right), the white curlicues on either side. In IE, however, these
background images don't appear -- unless I add anything (it seems)
after the outer news div; see this in action at
http://www.blaqzone.com/Temp/Popfuel/index-2.html .

I know I've seen this before, but can't remember where it was
documented. Thanks for your help!

Apr 12 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
bl**@blaqzone.com wrote:
http://www.blaqzone.com/Temp/Popfuel/ .


On an unrelated note...

There's been a discussion in another thread about using IE conditional
comments vs CSS hacks to work around IE's many bugs and deficiencies. If
this page is any indication of the merits of CCs, it just makes me a
more firm believer that CCs are not the best way to go. Lots of bloat
there, IYAM, and on every page, too. :(

Sorry that was way off track, but I felt compelled to comment on that.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Apr 12 '06 #2

P: n/a
kchayka wrote:
On an unrelated note...
Yes, it is. I still hold hope that someone will recognize which IE
bug(s) is(are) at work on my test pages,
http://www.blaqzone.com/Temp/Popfuel/ and
http://www.blaqzone.com/Temp/Popfuel/index-2.html .
There's been a discussion in another thread about using IE conditional
comments vs CSS hacks to work around IE's many bugs and deficiencies. If
this page is any indication of the merits of CCs, it just makes me a
more firm believer that CCs are not the best way to go. Lots of bloat
there, IYAM, and on every page, too. :(


This was my first attempt at embracing both CCs and transparent PNGs.
As a result, part of the code contains unnecessary CCs. (Pasted there
in case I needed them -- remember, this is in development. I used the
code as a notepad, in this case.) Also, I was experiencing some
problems when enabling alpha PNG support in IE using the referenced JS
script, and temporarily commented stuff out to revert to plain old JPGs
and GIFs.

So this <head> code:

<!-- Internet Explorer, any version --><!--[if IE]><![endif]-->
<!-- Internet Explorer 5.0--><!--[if IE 5.0]><![endif]-->
<!-- Internet Explorer 5.5 --><!--[if IE 5.5]><![endif]-->
<!-- Internet Explorer 6 --><!--[if IE 6]><![endif]-->
<!-- Internet Explorer 5.5 or below --><!--[if lte IE
5.5]><![endif]-->
<!-- Internet Explorer 5.5 or above -->
<!--[if gte IE 5.5]>
<style type="text/css">
@import url("IE_5.5_and_above.css");
</style>
<![endif]-->
<!-- Add alpha PNG support to IE 5.5 and 6 -->
<!-- EDIT: DO NOT add PNG behaviour, as it seems to make IE stall at
"X items remaining" for a LONG time -->
<!-- Next line has been taken out of the "if lt IE 7." conditional
comment -->

<!-- <script defer type="text/javascript"
src="common/PNG-fix.js"></script> -->
<!--[if lt IE 7.]>
<![endif]-->

should read:

<!-- Internet Explorer 5.5 or above -->
<!--[if gte IE 5.5]>
<style type="text/css">
@import url("IE_5.5_and_above.css");
</style>
<![endif]-->

(or, if whitespace ain't your thing,)

<!-- Internet Explorer 5.5 or above --><!--[if gte IE 5.5]><style
type="text/css">@import
url("IE_5.5_and_above.css");</style><![endif]-->

(Another CC may appear when I tackle any remaining bugs present in
5.0.) As you see, CCs don't add "lots of bloat" to the HTML, and allow
me to segregate IE bug fixes away from the main CSS. It's a personal,
organizational choice.

The same applies for three conditionally-commented sections in the
body, where I display a GIF or JPG in IE, while other browsers get a
nice, alpha PNG. I could've coded a single <img> and used JS to replace
its src for IE only, which would've removed the 12 lines of code that
offend your sensibilities.

I wouldn't use this under-construction page, with its unneeded and
temporary code, as proof of the horror of CCs.

Apr 13 '06 #3

P: n/a
bl**@blaqzone.com wrote:

http://www.blaqzone.com/Temp/Popfuel/ and

problems when enabling alpha PNG support in IE


FYI, you can use 8-bit (256 color) png with indexed transparency
instead. IE handles it just like transparent gif.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Apr 13 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.