div width problem in IE

Discussion in 'HTML' started by Saber, May 1, 2008.

  1. Saber

    Saber Guest

    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.
     
    Saber, May 1, 2008
    #1
    1. Advertising

  2. Saber

    dorayme Guest

    In article <481910a1$0$15206$>,
    Saber <> wrote:

    > 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.

    --
    dorayme
     
    dorayme, May 1, 2008
    #2
    1. Advertising

  3. Saber

    Bergamot Guest

    Bergamot, May 1, 2008
    #3
  4. Saber

    Saber Guest

    Bergamot wrote:
    > Saber wrote:
    >> 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.
    >

    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, May 1, 2008
    #4
  5. Saber

    Saber Guest

    dorayme wrote:
    > In article <481910a1$0$15206$>,
    > Saber <> wrote:
    >
    >> 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.
    >


    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
     
    Saber, May 1, 2008
    #5
  6. Saber

    mrcakey Guest

    "Saber" <> wrote in message
    news:4819e391$0$15201$...
    > Bergamot wrote:
    >> Saber wrote:
    >>> 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.
    >>

    > 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
     
    mrcakey, May 1, 2008
    #6
  7. Saber wrote:

    > 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"



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 1, 2008
    #7
  8. Saber

    Bergamot Guest

    Saber wrote:
    > Bergamot wrote:
    >> Saber wrote:
    >>>
    >>> http://s87369035.onlinehome.us/test/index.html

    >>
    >> http://www.bergamotus.ws/screenshots/s87369035.png
    >>

    > 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.

    --
    Berg
     
    Bergamot, May 2, 2008
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    784
    Bruce Barker
    Oct 10, 2005
  2. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    531
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  3. Steve Richter
    Replies:
    2
    Views:
    7,927
    Steve Richter
    Jun 15, 2007
  4. tomek milewski
    Replies:
    6
    Views:
    1,309
    tomek milewski
    Jun 25, 2007
  5. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    755
Loading...

Share This Page