SitePoint Sponsor

User Tag List

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

    calling ALL css gurus...

    notice is IE the green background color showing - It shouldnt be.
    this is a REAL problem for CSS if this can't be fixed...how can you do away with tables if you can't fix this problem?

    perhaps Im going about it wrong- help.

    http://www.plasmapages.com/jpma_css/side.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</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: #e3e3e3;
     }
     
      
    #sideholder_container{
     width: 194px;
     height: 175px;
     margin: 0px;
     padding: 0px;
     background-color: #ff0000;
     }
    #sideholder_top{
     width: 194px;
     height: 6px;
     margin: 0px;
     padding: 0px;
     background-image: url(side_top.gif);
     background-repeat: no-repeat;
     background-color: #00ff00;
     }
    #sideholder_middle{
     width: 194px;
     height: 100%;
     padding: 0px 0px;
     margin-right: 0px;
     margin-left: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
     text-align: left;
     background-image: url(side_middle.gif);
     }
    #sideholder_bottom{
     width: 194px;
     height: 11px;
     margin: 0px;
     padding: 0px;
     background-image: url(side_bottom.gif);
     background-repeat: no-repeat;
     background-color: #00ff00;
     }
     
      
    	</style>
    </head>
    <body>
    <div id="sideholder_container">
     <div id="sideholder_top"></div>
     <div id="sideholder_middle"></div>
     <div id="sideholder_bottom"></div>
    </div>
    
    </div>
    </body>
    </html>

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    Try adding clear:both to your middle and bottom styles and see if that helps.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Golgotha, you also have a partial DOCTYPE, which is telling IE to render in quirks mode. Add a full DOCTYPE with a URI and you'll be able to render your code in standards mode. This may or may not solve your problem though; it's just something I thought I'd throw out there.

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by vgarcia
    Golgotha, you also have a partial DOCTYPE, which is telling IE to render in quirks mode. Add a full DOCTYPE with a URI and you'll be able to render your code in standards mode. This may or may not solve your problem though; it's just something I thought I'd throw out there.
    Doh! I always forget about that until it blows up on me in validation...
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  5. #5
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good link V~, but that didn't help

    why is this such a problem, this is pretty standard stuff...isn't it? I can't be the first one to have a problem with this ?

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    something dumb. add a &nbsp; in the top and bottom divs to be sure that the empty divs isn't what's biting you.....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  7. #7
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no go DM, I tried that too, if / when we figure this out someone better sticky this thread and write a tutorial because I can't help but think this is pretty standard stuff.

  8. #8
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CELEBRATE GOOD TIMES!!!!
    I GOT IT!!

    just added:
    max-height: 6px;
    overflow: hidden;

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This works in IE6, Opera 7, and Firebird:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	   "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
        <style type="text/css">
    <!--
    body {
    	text-align:	center;
    	margin: 0;
    	padding: 0;
    	background-color: #e3e3e3;
    	}
    	
    		
    #sideholder_container{
    	width: 194px;
    	height:	175px;
    	padding: 6px 0 11px;
    	position: relative;
    	margin: 0px auto;
    	text-align: left;
    	background-color: #ff0000;
    	background-image: url("http://www.plasmapages.com/jpma_css/side_middle.gif");
    	}
    html > body #sideholder_container {
    	/*for CSS2 browsers that get height right, unlike IE/Win*/
    	height: auto;
    	min-height: 175px;
    }
    #sideholder_top{
    	width: 194px;
    	margin: 0px;
    	padding: 0;
    	height: 6px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 4;
    	font-size: 1px;
    	overflow: visible;
    	background:#0f0 url("http://www.plasmapages.com/jpma_css/side_top.gif") no-repeat bottom;
    	}
    #sideholder_middle{
    	padding: 10px;
    	text-align: left;
    	}
    #sideholder_bottom{
    	width: 194px;
    	height: 11px;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	z-index: 4;
    	font-size: 1px;
    	overflow: visible;
    	background: #0f0 url("http://www.plasmapages.com/jpma_css/side_bottom.gif") no-repeat top;
    	}
    -->	
        </style>
    </head>
    <body>
    <div id="sideholder_container">
    	<div id="sideholder_middle">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...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...testing 123...testing 123...testing 123...testing 
    
    123...testing 123...testing 123...</div>
            <div id="sideholder_top"></div>
    	<div id="sideholder_bottom"></div>
    </div>
    </body>
    </html>
    I even moved the sideholder_top <div> to after the content for SEO purposes .

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

    not cross browser friendly!! Moz. doesn't like that

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Golgotha
    ARG!!!!!!!!!

    not cross browser friendly!! Moz. doesn't like that
    My solution or yours?

  12. #12
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YOURS WORKS!!!!
    YOU DA MAN!!!!

    now seriously, someone needs to sticky this or tutorial this - cause this is a must.

  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Golgotha
    YOURS WORKS!!!!
    YOU DA MAN!!!!

    now seriously, someone needs to sticky this or tutorial this - cause this is a must.
    I featured it. Maybe I'll make a tutorial out of it later .

  14. #14
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I blended what you did and what I did, seems to still work.

    I got rid of your:
    z-index: 4;
    font-size: 1px;
    overflow: visible;

    and changed it to:
    max-height: 6px;
    overflow: hidden;

    seems more logical this way - less of a bandaid


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
  •