div width problem in IE

[Saber]

Hi all, 1st time poster here. I can't seem to get IE (ie7) to play
nicely with my a site I'm making, though FF and Safari both display it
properly. The background div is not as wide at the div above it (I have
2 because I have a semi-transparent background color over a picture
background and opaque text on top. Confusing, kinda, but it works).
Thing is, I have three separate instances of that on the site (header,
side menu bar and body). It works fine on the header and menu bar, but
not the body. Anyone have any idea why this might be?

the site is: http://s87369035.onlinehome.us/test/index.html

Oh, while I'm at it; the index page won't validate because of the
applet, but when I change it to object, the slide show breaks. I'll
admit, I'm not good at javascript and objects type things, so it's
probably a simple fix. If anyone knows that, I would appreciate the
enlightenment.

Thanks in advance for any help.

 

[dorayme]

The background div is not as wide at the div above it (I have
2 because I have a semi-transparent background color over a picture
background and opaque text on top. Confusing, kinda, ...

Yes, a bit. "*The* "background div" and "above" *it* are referenced as
if they are our well known uncle and aunt, obvious and familiar to us.
Not.

 

[Bergamot]

I can't seem to get IE (ie7) to play
nicely with my a site I'm making, though FF and Safari both display it
properly.

http://s87369035.onlinehome.us/test/index.html

I doubt that this is "properly" displayed:
http://www.bergamotus.ws/screenshots/s87369035.png

Hint: zoom text up a couple notches.

 

[Saber]

I doubt that this is "properly" displayed:
http://www.bergamotus.ws/screenshots/s87369035.png

Hint: zoom text up a couple notches.

That's odd, I don't have it like that on my computer, even when I lower
my resolution.
This is it in FF: http://s87369035.onlinehome.us/test/screenie.jpg
And in IE: http://s87369035.onlinehome.us/test/screenie2.jpg
Any suggestions on how to fix that? change the text to a percent maybe?
Thanks,
Saber

 

[Saber]

Yes, a bit. "*The* "background div" and "above" *it* are referenced as
if they are our well known uncle and aunt, obvious and familiar to us.
Not.

Sorry, re-reading that, I agree I could have been better.
I have a div in which the whole content of the site lays. it is 80% of
the page width and has white space on the top too. This container div
has a picture background (a marble type pattern). The content itself is
divided into 3 sections, the top header, the left sidebar and the body
sidebar. I have a background color (a brownish color) for each of these
with padding so they don't touch. But, I get the opacity of this
background div to 20% (or 0.2). Unfortunately, there isn't yet a code
(that I know of) that allows only the background color to be effected,
so I had to place another div exactly over each of the 3 background
color divs so that way the text is not effected.

I'm sure it's still a bit confusing, but if you look at the site or the
screenshot I took (http://s87369035.onlinehome.us/test/screenie.jpg),
you might understand it. Basically a bunch of nested div's.
Thanks;
Saber

 

[mrcakey]

That's odd, I don't have it like that on my computer, even when I lower my
resolution.
This is it in FF: http://s87369035.onlinehome.us/test/screenie.jpg
And in IE: http://s87369035.onlinehome.us/test/screenie2.jpg
Any suggestions on how to fix that? change the text to a percent maybe?
Thanks,
Saber

The screenshot is basically what we get, but the point the previous poster
was making is that if the user increases the text size in their browser (as
the user is wont to do), it breaks out all over the place. This is because
you've assigned fixed heights to your divs. I assume these are there
because you need the "semi transparent div behind the text" to grow to
accommodate the text you're laying on top. You can achieve the same effect
by saving your beige background image in a darker shade and using this as
the background. You can then contain the text within its own div and that
would then free you to remove the height declarations and everything will
flow neatly even if the user expands the text.

Also, you shouldn't really be displaying the W3C validated XHTML logo! ;-)

+mrcakey

 

[Jonathan N. Little]

That's odd, I don't have it like that on my computer, even when I lower
my resolution.
This is it in FF: http://s87369035.onlinehome.us/test/screenie.jpg

Lower your resolution? Not to change your monitor setting but the font
size. Hint: with Firefox look at your page. Press and hold down the
"CTRL" key then tap the "+" a couple of times and watch your
pixel-perfect layout disintegrate before your eyes. Then Google "liquid
layout web design"

 

[Bergamot]

This is it in FF: http://s87369035.onlinehome.us/test/screenie.jpg
And in IE: http://s87369035.onlinehome.us/test/screenie2.jpg

Hmmm...
http://www.bergamotus.ws/screenshots/s87369035-IE.png

That's how it looks to me in IE7 on XP, at text size "Largest"

Any suggestions on how to fix that? change the text to a percent maybe?

Text size set in % has nothing to do with the container size, but with
the parent font-size. Just don't set a fixed height on text blocks. Set
a min-height if you must, but not a fixed height.

Don't ask me what happened to the background graphics there. Or is that
background from the applet? If so, you need a better fall-back for when
Java is disabled.