SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background not showing in firefox

    Hi All,

    I am experimenting with a #content div that will act as a container holding two column divs - one called #leftcol and the other called #rightcol.

    My aim is to set the color of #content and have it stretch in height to the size of the #leftcol float that is placed inside it. This way I will have a left column that may be one color and a right column (background not set) that will appear the same size as it is showing the color of the #content div through it.

    IE6 shows this fine, but Firefox won't show the background color of the #content.

    Can anyone see if I am doing something wrong here? I assumed that this would be fairly straightforward.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #content {
    	background: red;
    	width: 760px;
    	clear:both;
    }
    #leftcol {
    	margin: 0px;
    	padding: 0px;
    	width: 250px;
    	background-color: blue;
    	float: left;
    }
    #rightcol {
    	margin: 0px;
    	padding: 0px;
    	width: 510px;
    	float: right; 
    }
    </style>
    </head>
    
    <body>
    <div id="content">
    	<div id="leftcol">
    		Left Column
    	</div>
    	
    	<div id="rightcol">
    		Right Column
    	</div>
    </div>
    </body>
    </html>
    Brad.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's bizarre, I took the float:right off the right column and it showed properly in Firefox.

    Solved the problem...but now text wraps underneath the left column if the right column is longer.

    How do you get equalised columns that work?

    Brad

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Florida
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There doesn't seem to be much that Firefox does right.

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about using an actual background gif/jpg repeat-y instead of just a color....

    Nadia

  5. #5
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FloridaFlyer
    There doesn't seem to be much that Firefox does right.
    Off Topic:

    Are you kidding??? Most of what Firefox appears to do wrong ends up being something wrong with the coding. You want to talk about something doing something wrong, talk about IE. How many hacks do you have to employ just to get stuff to work in IE??
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  6. #6
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From your code I believe your site is basically a 2-column layout. If so, try it like below... oh and get your css in an external file

    Also, try and use the actual RGB# for colors rather than 'red'. This site has a good list of color swatches/names with the RGB# along.
    Code:
    #content {
    	background: #FF0000;
    	width: 760px;
    }
    #leftcol, #rightcol {
            float: left;
    }
    #leftcol {
    	margin: 0px;
    	padding: 0px;
    	width: 250px;
    	background-color: #0033CC;
    }
    #rightcol {
    	margin: 0px;
    	padding: 0px;
    	width: 510px;
    }
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    KDesigns,

    That still doesn't work in Firefox. It works in IE6...but doesn't display the contents color through the right column.

    Brad.

  8. #8
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure here... It's late and I've been working a BUNCH of hours today so my mind isn't thinking straight.

    The strange thing is that if you set a height on the content div it actually carries the color through to the right column. Perhaps if you haven't gotten your answer by my A.M. I can take another look with a fresh set of eyes... You know... Ones that aren't half-slammed!
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KDesigns
    You know... Ones that aren't half-slammed!
    lol...I know...thanks for taking a look at it for us anyway...I appreciate it.

    Brad.

  10. #10
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    duh!!! I should kick myself...

    Add this to the bottom of your css:
    Code:
    #clearer {
         width: 760px;
         clear: both;
    }
    And then add this right after your closing </div> for the right col (*before the closing </div> on the #content div)
    Code:
    <div id="clearer">&nbsp;</div>
    That'll work! It'll bring the #content div to the full height of both the left and right col's!

    Sorry about that!! Now I am going to go get some sleep!!
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FloridaFlyer
    There doesn't seem to be much that Firefox does right.
    Sorry, but that's just plain ignorant.

    In this case, there's nothing wrong with the code or FF's handling of it.
    What's wrong here is the understanding and the float behaviour and MSIE's handling of it.

    Floated elements are meant to 'lose' their height which means that they no longer force the height of its containing element to expand to fully contain it.
    As convenient as it may seem, MSIE is the one getting it wrong (again).

    Bradles (and floridaflyer), read Float: The Theory

    Most people use clearing divs/elements, such as kdesign has just posted, but while you're on the learning curve, read: How To Clear Floats Without Structural Markup.
    It shows how it can be done (i.e. without additional markup) and would be done if it weren't for the fact that MS can't seem to make a decent, compliant browser.

    Until MSIE/Win gets its act together (not holding my breath) and MSIE/Mac just f**ks off and dies, I will probably continue to use clearing elements.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  12. #12
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Morning time! Just wanted to add something here... Using my code above you'll notice the red continuing farther than the blue. Take the '&nbsp;' out of the #clearer div and it should clear it up... no pun intended
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •