Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    This one is driving me nuts ... why I can't see the problem.

    With IE, the background in <div id="content"> shows through just fine.
    With Firefox, the background is white. Like it doesn't pay attention to the
    transparent background properties of content-left and content-right.

    I've done this before and it works ... but not this time. I don't see why.

    http://www.shikajewels.com/index2.php

    CSS style sheet: http://www.shikajewels.com/main.css

    Here's a sample site where I did the same exact thing and it works just fine.
    I compared line by line and cannot see a difference. It works on both IE and Firefox.
    Sample site: http://www.catpin.com/sms

    There must be one thing different that I am missing.


  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Because you have both inner divs floating, the outer div has a computed height of 0. You'll have to set an explicit height or make one of the inner divs not float or something if you want the background image to appear, as you need to make it expand. It looks fantastic when it works, though :-)

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Shadowfiend ....

    HEIGHT!!! oh my gosh!

    that was the difference!

    I now defined the height of #center and it works fine!

    thanks ... I almost threw my laptop across the room.

    [it's Friday]


  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Quote Originally Posted by mlseim
    [it's Friday]
    Yes, it so most certainly is :-D

  6. #5
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Hi, I have a question about this. So what if you don't know exactly how high your containing div should be? If it should expand depending on what's inside of it? Then what should you put as height?
    Thanks,
    Heather
    choosy developers choose gif!
    website | paintings | blog

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, the problem is that any div that contains *only* floating divs has a 0 computed height. That means the only way to make the height expandable is either (1) make one of the divs inside it not float, or (2) give it an explicit height. Alternatively, I suppose min-height might work, but it has the usual incompatibility with IE.

  8. #7
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Well is there a way to have two divs run alongside each other and NOT use float?
    No offense, but it's stuff like this that makes me wonder why people like CSS-only layouts so much. Why would you like something that you can't even make what you want to happen happen. Argh.
    choosy developers choose gif!
    website | paintings | blog

  9. #8
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    If I make the left one NOT float, and the right one float right, then the right one doesn't start until after the bottom of the left one. Why won't they be next to each other????
    choosy developers choose gif!
    website | paintings | blog

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Make sure the one that's floated is first in the code. It has to float before the other element is flowed, as it's expected to float alongside the next element. And yes, that's the way to have them run alongside each other -- have only one of the two floating.

    Concerning the frustration: it's the same thing as wondering why people would use Java instead of C when C is all you know. Of course C is easier, you already know it. Java's still alien. But, Java lets you do things C doesn't, in certain ways that make it more maintainable than C (usually).

    It's the same with CSS. Yeah, there's a learning curve. But it's definitely better, even if certain things that are easy with tables are a little bit more troublesome with CSS.

  11. #10
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Quote Originally Posted by Shadowfiend
    Make sure the one that's floated is first in the code. It has to float before the other element is flowed, as it's expected to float alongside the next element. And yes, that's the way to have them run alongside each other -- have only one of the two floating.
    Okay I will try that, thanks!

    Quote Originally Posted by Shadowfiend
    Java's still alien.
    Oooh, aliens...

    Quote Originally Posted by Shadowfiend
    But it's definitely better, even if certain things that are easy with tables are a little bit more troublesome with CSS.
    I still say GRRRR.... But I will learn it anyways :dead:
    choosy developers choose gif!
    website | paintings | blog


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com