css bug in IE: circumvention, anybody?

G

Greg N.

Hi folks,
have a look at my test case at http://coolhaus.de/misc/csstest.htm .

There is a div whose width is defined through some margin definitions.

Within the div is a table with width 100%, hence it should assume the
same width as the div. In Mozilla, this works fine. Under IE though,
the table exceeds the specified div width.

Can anybody come up with a circumvention how to make this work under IE?
V6 ? I mean, such that it works correctly under FF and IE?

Thanks,
Greg
 
N

Neredbojias

With neither quill nor qualm, Greg N. quothed
Hi folks,
have a look at my test case at http://coolhaus.de/misc/csstest.htm .

There is a div whose width is defined through some margin definitions.

Within the div is a table with width 100%, hence it should assume the
same width as the div. In Mozilla, this works fine. Under IE though,
the table exceeds the specified div width.

Can anybody come up with a circumvention how to make this work under IE?
V6 ? I mean, such that it works correctly under FF and IE?

Thanks,
Greg
Click to expand...

On the div put style:position:relative;
 
E

Els

Els said:
Yup, leave it as is, but add this line to the top of your file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Makes IE try to follow the same standards as the other browsers ;-)
Click to expand...

Eh.. addition: background isn't a valid attribute in Strict, so
instead, add the style to your styleblock:
td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}
 
G

Greg N.

Els said:
Eh.. addition: background isn't a valid attribute in Strict, so
instead, add the style to your styleblock:
td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}
Click to expand...

Hmm, that will open up another bag of worms for me.

The sample code is my way of showing some extra-wide images. By making
them a cell background, only as much as the table width allows is shown,
no horizontal scrollbars are used. I want that effect.

I have dozens of such tables on my pages, each showing a different
image. I don't think I'd like to manage that through CSS. What should I
do?

Greg
 
E

Els

Greg said:
Hmm, that will open up another bag of worms for me.

The sample code is my way of showing some extra-wide images. By making
them a cell background, only as much as the table width allows is shown,
no horizontal scrollbars are used. I want that effect.

I have dozens of such tables on my pages, each showing a different
image. I don't think I'd like to manage that through CSS. What should I
do?
Click to expand...

Give each table a class (<table class="foo"> and <table class="bar">
for instance) and then in CSS:
table.foo td{background-image:url(....);}
table.bar td{background-image:url(....);}
etc
 
E

Els

Els said:
Give each table a class (<table class="foo"> and <table class="bar">
for instance) and then in CSS:
table.foo td{background-image:url(....);}
table.bar td{background-image:url(....);}
etc
Click to expand...

btw - if the table has no other function than provide a frame for that
background image, you can just use a div instead.
div.foo{
height:[height of your image];
background-image:url(...);
}
 
G

Greg N.

Els wrote:

btw - if the table has no other function than provide a frame for that
background image, you can just use a div instead.
div.foo{
height:[height of your image];
background-image:url(...);
}
Click to expand...

Well, as I said, I use the table to make the right edge of the image
invisible, and avoid horizontal scroll bars. Can a div do that?
 
G

Greg N.

Els said:
Greg N. wrote:




Give each table a class (<table class="foo"> and <table class="bar">
for instance) and then in CSS:
table.foo td{background-image:url(....);}
table.bar td{background-image:url(....);}
etc
Click to expand...

I have just learned that one should do the content in basic HTML, and do
all formatting through CSS. Fine.

What you're proposing would, in my case, put my content into CSS? In my
case, there are too many different images to make this viable.

By the way, though "background isn't a valid attribute in Strict", it
seems to work. What negative effects would I risk if I go on using
background (apart from making the purists cringe :) ?

Greg
 
E

Els

Greg said:
I have just learned that one should do the content in basic HTML, and do
all formatting through CSS. Fine.

What you're proposing would, in my case, put my content into CSS?
Click to expand...

If the image is content, it shouldn't be a background-image at all.
People on text browsers wouldn't see it, nor see an alternative
description throught alt text. So, if it really is content, and not
decoration, you'll have to make it an <img src="..." alt="...">. But
the fact that you're okay with clipping the right side of the image,
my guess is that it is indeed decoration, and as such, not content.
In my case, there are too many different images to make this viable.
Click to expand...

For that, there is the style attribute:
By the way, though "background isn't a valid attribute in Strict", it
seems to work. What negative effects would I risk if I go on using
background (apart from making the purists cringe :) ?
Click to expand...

Just that, I think <g>
 
E

Els

Greg said:
Els said:
btw - if the table has no other function than provide a frame for that
background image, you can just use a div instead.
div.foo{
height:[height of your image];
background-image:url(...);
}
Click to expand...

Well, as I said, I use the table to make the right edge of the image
invisible, and avoid horizontal scroll bars. Can a div do that?
Click to expand...

Sure. You think the background of a div will extend beyond the border
of that div? Impossible :)
 
L

Lauri Raittila

[Greg:]
What you're proposing would, in my case, put my content into CSS?
Click to expand...

If the image is content, it shouldn't be a background-image at all.
People on text browsers wouldn't see it, nor see an alternative
description throught alt text. So, if it really is content, and not
decoration, you'll have to make it an <img src="..." alt="...">. But
the fact that you're okay with clipping the right side of the image,
my guess is that it is indeed decoration, and as such, not content.
Click to expand...

Yes. but if it is content, you can easily clip it:

div {width:100%;overflow:hidden;min-width:Npx;}

<div><img alt="foo" src="bar"></div>

But I still have no clue what Greg wants to get... If it is to have
image, and style it so that it will be repeted to width of element, then
I would use

<div style="background:url(foo.png)"><image alt=foo src=foo.png></div>
 
G

Greg N.

Lauri said:
But I still have no clue what Greg wants to get... If it is to have
image, and style it so that it will be repeted to width of element, then
I would use

<div style="background:url(foo.png)"><image alt=foo src=foo.png></div>
Click to expand...

Here is an example of what I'm working on:

http://hothaus.de/greg-tour-2004/ionia.htm

The wide images are cetrtainly content, not decoration, although I feel
it does not matter if part of those images get clipped off the right.

There is another case, too, where I'm using the the same code to display
repetitive images:

http://hothaus.de/greg-tour-2004/meteora.htm (near the bottom of the
page).

Don't look at the source, please <g>. The current solution is all table
based, which I want to convert to CSS as far as possible. I started
this here thread as I already stumbled in my attempt to get rid of the
outermost table and replace it wih a div.

But I've got a few very valuable hints here which I'm in the process of
implementing. Thanks, folks.


Greg
 
L

Lauri Raittila

in said:
Lauri Raittila wrote:
Click to expand...
Here is an example of what I'm working on:
Click to expand...

So you need both of my code examples... Should be enough. If you want
repeated image to be link, use a {width:100%}.

When there is several ways to do things with CSS (and there usually is),
choosing right one depends on what you want, not on whjat was best
possible with tables.
A) it is quite possible that it is possible to make better way using CSS
B) it is quite possible that the way it works with tables won't be as
well supported as the better CSS way.
http://hothaus.de/greg-tour-2004/ionia.htm

The wide images are cetrtainly content, not decoration, although I feel
it does not matter if part of those images get clipped off the right.
Click to expand...

That is totally in pieces in Opera 8.01, and you are trickering quirks
mode, which means it is pointless to do anything before getting rid of
it. (google.)
I started
this here thread as I already stumbled in my attempt to get rid of the
outermost table and replace it wih a div.
Click to expand...

Codesnippets I gave should be enough to get it working (unless you run
some IE bug I don't know.). Hint: when converting table layout to CSS,
first get rid of *all* tables, unless you really know what you are doing.
 
G

Greg N.

Els said:
If the image is content, it shouldn't be a background-image
at all. People on text browsers wouldn't see it...
Click to expand...

It's sortof a photoalbum application, so I don't care much for those who
don't care for pictures.
So, if it really is content, and not decoration,
you'll have to make it an <img src="..." alt="...">.
Click to expand...

I'm willing to use semantically correct markup where possible, in other
cases I'll use just about any markup that works for me the way I want. said:
But the fact that you're okay with clipping the
right side of the image, my guess is that it is
indeed decoration, and as such, not content.
Click to expand...

It's certainly content. As I said, it's a photoalbum app. I have a
number of panoramic images that I have built such that the more relevant
part is in the left half of the image, hence, I don't mind a certain
amount getting clipped off the right.
For that, there is the style attribute:
<td style="background-image:url(...);">&nbsp;</td>
Click to expand...

I thought about this, but how about browsers that don't understand CSS
at all?
 
L

Lauri Raittila

in said:
It's sortof a photoalbum application, so I don't care much for those who
don't care for pictures.
Click to expand...

I surely would look your image gallery, even using lynx with external
viewer, if nothing else was available... those images are good.
It's certainly content. As I said, it's a photoalbum app.
Click to expand...

And very nice indeed. Is it application, in sence that you have some
program that you use to output it? I would be really interested...
I have a
number of panoramic images that I have built such that the more relevant
part is in the left half of the image, hence, I don't mind a certain
amount getting clipped off the right.
Click to expand...

Of course, you could do it so that snipping happens from both ends, if
the most important part is in the middle, using CSS.

I think your idea of autocropping *thumbnails* is very good idea (of
course, not many people have over 800px wide thumbnails). I hope I can
find time to read the texts (my german is way too rusty to cope without
dictionary...)

I need to get around to make similar for my forthcoming trip (but with
bicycle...
I thought about this, but how about browsers that don't understand CSS
at all?
Click to expand...

CSS:
..block {display: block;border:2px solid #d9e8b9;
width:100%;overflow:hidden;}
..block:visited {border-color:#ccc;} /* to make difference */
..block:hover {border:2px double #494}
/* guessed #494 for olivedrap, propably not same... */

HTML:

<a class="block" TITLE="hier klicken zum Vergr&ouml;ssern des Bildes"
href=http://coolhaus.de/iv/v4.php?width=1706&height=520&h1=Griechenland+[
3]:+Meteora&img=img/040610/XL-M1915.jpg><img src="img/040610/M1915.jpg"
alt"mahtava panoraama">
</a>

<a style="background:url(http://hothaus.de/greg-tour-
2004/img/040611/M1943.jpg)"
TITLE="hier klicken zum Vergr&ouml;ssern des Bildes" class="block"
href=http://coolhaus.de/iv/v4.php?width=750&height=562&h1=Griechenland+[3
]:+Meteora&img=img/040611/XL-M1943.jpg>
<img src="img/040611/M1943.jpg" alt="ikoneja"></a>

(get rid of all tables for layout. Replace alt text with something in
german.)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CSS menu problems with IE 7 2
Javascript causing CSS margin bug in IE 7
IE doesn't show picture in the middle 21
css works in IE not mozilla 1
stuck in simple css formatting 5
IE/ Firefox CSS Border Problem 14
Newbie question re CSS margins in IE 8
CSS Image swap not working. 1

Members online

No members online now.
Total: 46 (members: 0, guests: 46)
Robots: 134

Forum statistics

Threads
473,754
Messages
2,569,527
Members
45,000
Latest member
MurrayKeync

Latest Threads

Top