Hi group, this is one of my first posts so please be nice...
I have redesigned my entire site from a table-heavy site to (mostly) XHTML transitional and CSS
compliance. All pages except the front page are now tableless as far as layout is concerned (the
front page was too hard to solve without tables - need more time...).
Anyway, since my site is very much a labor of love I had to decide to support mostly newer browser,
while older browers should get readable pages although they will look butt-ugly. So IE5+ (including
Mac 5.2), Netscape 6+, Mozilla 1.0+, Firefox 0.8+, Safari 1.2 are supported AFAIK.
I have an occasional pixel here and there which will not work but I simply don't have the time to
spend hours fixing that.
BUT: I have *one* remaining issue which I am unable to solve.
On this page:
....there is an image inside the grey area showing the prize for the current quiz (until Tuesday).
On IE, the image appears *behind* the grey-colored div and is therefore invisible to the users
unless they happen to browse with a wide enough browser window for the image to start appearing
below the DIV. If I remove the color (ie, remove the background-color property) from the DIV, the
In all other browsers the image displays as it is supposed to. However, the DIV seems to ignore the
size of the image, but I can live with that.
Here is another example in case the prize quiz runs out before you see this page (ignore the
content, this is just a test page):
And here is one example using definition lists, where the border-bottom runs over the image:
Can anyone give me any pointers as to what I might be doing wrong - or what I need to do with the
browsers? I have worked hard to avoid customized style sheets for separate browsers, so all browsers
get the same CSS. So I need a solution which works for IE, too...
With humble regards,
Editor, Hypography Sci-Tech
---Scanned by Norton Antivirus---
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/