Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Invisible Background

    I had a go at the Faux Columns method at ALA but the background appears in IE but not Mozilla.

    HTML:
    Code:
    <div id="container">
    
    <div id="left">
    <p>Lots of Lipsum.</p> 
    </div>
    
    <div id="right">
    <p>
    menu item<br />
    menu item<br />
    menu item<br />
    menu item<br />
    menu item<br />
    menu item<br />
    </p>
    </div>
    
    </div>
    
    </div>
    CSS:
    Code:
    body {
    background : #39f;
    text-align : justify; 
    color : #000;
    font : small Arial, Helvetica, sans-serif;
    }
    
    #container {
    width: 600px;
    background: #fff url(fauxtest.gif) repeat-y 50% 0;
    margin: 0 auto;
    }
    
    #left {
    width: 400px;
    float: left;
    background: transparent;
    }
    
    #left p {
    padding: 3%;
    }
    #right p {
    padding: 3%;
    color : #ccc;
    font-weight: bold;
    text-align: center;
    }
    
    #right {
    width: 200px;
    float: right;
    background: transparent;
    }
    Thanks.

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Weird..
    Moz doesn't have any bugs as far as the 'background' shorthand goes and the only obvious error is one too many </div> tags in your markup sample; though that shouldn't cause any problem.
    I'm confused

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mindlessLemming
    I'm confused
    I thought it was only me LOL.

  • #4
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone else got any ideas?

    I tried setting #left p and #right p to have transparent backgrounds but it didn't make any difference.

  • #5
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    C'mon guys .

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't looked closely at the ALA article you mentioned, but the floats on your two paragraphs have Firefox/Mozilla treating them as if they were not within the #container div.

    Add a height to #container or remove the floats to see what I'm describing. This doesn't solve your problem but hopefully helps.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hehee... Whoops!
    I looked straight past the problem

    You need to clear your floats. There are a couple of ways to go about this...
    1) add a clearing div. This involves adding an empty div with a class of "clear" or similar AFTER you close both columns but BEFORE you close the container.
    Code:
    <div class="clear"><!-- --></div>
    Then, add this class to your CSS...
    Code:
    div.clear {
    clear:both;
    height:0;
    }
    OR

    2) You can clear it using generated content so that you don't have to add anything to your markup. Adding the following snippet to your CSS should fix your problem...
    Code:
    div#container:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    /* Hides from IE-mac \*/
    * html #container {height: 1%;}
    /* End hide from IE-mac */

    I take no responsibility for the above nonsense.


    Left Justified

  • #8
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks !

  • #9
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Out of curiousity, why the empty comment tags? I've not noticed a difference either way...

    Quote Originally Posted by mindlessLemming
    Code:
    <div class="clear"><!-- --></div>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #10
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mcdougals4all
    Out of curiousity, why the empty comment tags? I've not noticed a difference either way...
    Mozilla 1.4 didn't render empty tags. The first FireFox was based on Moz 1.4 and I believe had the same problem. I also remember Andy Budd discussing this once in relation to one of the mac browsers.
    Other than that -- it's force of habit

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

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