SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: CSS-P Question

Hybrid View

  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS-P Question

    view this is IE.

    how come the yellow background on the <div id="capTop"> and <div id="capBottom"> bottom is showing? I have the height set to 9px its like there is a minimum in IE.


    Also notice the text and the pink background showing, would be nice to set right-margin to -10 and have it fixed. So what is the fix?

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
      <head>
    	<title>CSS-P</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
    	<style type="text/css">
    body,html {
     text-align: center;
     height: 100%;
     margin: 0px 0px;
     padding: 0px 0px;
     width: 100%;
     background-color: cornsilk;
     }
     
    #frame {
     width: 765px;
     height: 100%;
     padding: 0px 5px;
     margin-right: auto;
     margin-left: auto;
     margin-top: 0px;
     margin-bottom: 0px;
     text-align: left;
       background-image: url('/images/background.gif');
     background-repeat: repeat-y;
     background-color: #ff0000;
     }
      
    #contentcenter {
     width: 765px;
     height: 100%;
     padding: 0px;
     float: left;
     background-color: #ffffff;
     }
     
    #contentheader {
     background-color: #00ffff;
     height: 75px;
     }
      
    #contentfooter {
     background-color: #00ff00;
     height: 20px;
     }
      
    /*main content area*/ 
    #capTop {
     margin: 0;
     padding: 0;
     width: 561px;
     height: 9px;
     background: url('cap_content.gif') no-repeat Bottom;
     font-style: normal; 
     background-color: yellow;
    }
    #capMiddle {
     margin: 0;
     padding: 10px 0px 10px 10px;
     width: 561px;
     height: 300px;
     background: url('cap_middle.gif') repeat-y;
     background-color: pink;
    }
    #capBottom {
     margin: 0;
     padding: 0;
     width: 561px;
     height: 9px;
     background: url('cap_bottom.gif') no-repeat Top;
     font-style: normal; 
     background-color: yellow;
    }
      
    	</style>
      </head>
    <body>
    	<div id="frame">
     <div id="contentcenter">
     
     <div id="contentheader">This is the Header</div>
     <div id="capTop"></div>
     
     <div id="capMiddle">
      testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123
     </div>
     
     <div id="capBottom"></div>
      <div id="contentfooter">This is the footer</div>
      
     </div>
     
     <br style="clear:both;" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    </div>
      </body>
    </html>

  2. #2
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thought you CSS-P gods would come up with something? everyone on vacation or what?

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Golgotha
    thought you CSS-P gods would come up with something? everyone on vacation or what?
    Sorry, I was in a meeting

    Anyway, try this CSS code:
    Code:
    /*main content area*/	
    #capTop {
    	margin: 0;
    	padding: 0;
            position: absolute;
            top: 0;
            left: 0;
    	width: 561px;
    	height: 9px;
    	background: url('cap_content.gif') no-repeat Bottom;
    	font-style: normal; 
    	background-color: yellow;
    }
    
    #capMiddle {
    	margin: 0;
    	padding: 19px 0px 19px 10px;
            position: relative;
            top: 0;
            left: 0;
    	width: 561px;
    	height: 300px;
    	background: url('cap_middle.gif') repeat-y;
    	background-color: pink;
    }
    
    #capBottom {
    	margin: 0;
    	padding: 0;
    	width: 561px;
            position: absolute;
            bottom: 0;
            left: 0;
    	height: 9px;
    	background: url('cap_bottom.gif') no-repeat Top;
    	font-style: normal; 
    	background-color: yellow;
    }
    And move the capTop and capBottom divs INSIDE of capMiddle. See what that does.

  4. #4
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The reason the yellow is showing is because of the breaks in between the <div id="capTop"></div> and the <div id="capMiddle">. Same for the bottom.

  5. #5
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sup Vinnie~
    that did a whole lot of nothing
    http://www.search-this.com/cp2.html

  6. #6
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yeah, for some reason the background image isn't covering up the yellow in IE...

  7. #7
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you think so ?

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    How about setting the background color of capTop and capBottom to "transparent"?

    Off Topic:

    Golgotha, single-quoting urls, like url('cap_middle.gif') will cause the background images not to show in IE5/Mac. Either drop the quotes altogether or use double quotes.

  9. #9
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks v~ good tip

  10. #10
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have a look at this in Moz.

    1. how come in ends prematurely at the bottom?

    2. Once the above is fixed - how do I take the <div id="sidebar"> and align it over on the right instead of below?

  11. #11
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.search-this.com/cp3.html

    how do I get that box on the bottom right to move up to the top?


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
  •