WEB css question

Discussion in 'OT Technology' started by White Stormy, Sep 29, 2008.

  1. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    http://halefx.com/temp/temp.html

    my intention is for all of the text to have the green background color..

    I know the problem has something to do with the list.. but is there a property I can add to the ul or li to fix it?

    this shit aggravates me even more about CSS than IE stuff :o

    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" xml:lang="en" lang="en">
    	<head>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			body {
    				background-color: #ffffff;
    			}
    			.block {
    				background-color: #00bb00;
    				line-height: 1.5em;
    				width: 200px;
    			}
    			.block-inner {
    				padding: 8px;
    			}
    			.block-contents ul {
    				float: left;
    				list-style-type: none;
    				width: 50%;
    			}
    			.block-contents ul li a {
    				display: block;
    			}
    		</style>
    		<title>Temp</title>
    	</head>
    	<body>
    		<div class="block block-cat" id="block-cat-1">
    			<div class="block-inner">
    				<div class="block-title">
    					Categories
    				</div>
    				<div class="block-contents">
    					<ul>
    						<li><a>&raquo; Category 1</a></li>
    						<li><a>&raquo; Category 2</a></li>
    						<li><a>&raquo; Category 3</a></li>
    						<li><a>&raquo; Category 4</a></li>
    						<li><a>&raquo; Category 5</a></li>
    						<li><a>&raquo; Category 6</a></li>
    						<li><a>&raquo; Category 7</a></li>
    						<li><a>&raquo; Category 8</a></li>
    					</ul>
    					<ul>
    						<li><a>&raquo; Category 9</a></li>
    						<li><a>&raquo; Category 10</a></li>
    						<li><a>&raquo; Category 11</a></li>
    						<li><a>&raquo; Category 12</a></li>
    						<li><a>&raquo; Category 13</a></li>
    						<li><a>&raquo; Category 14</a></li>
    						<li><a>&raquo; Category 15</a></li>
    						<li><a>&raquo; Category 16</a></li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    
     
  2. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    That should probably be a table.
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    Add the overflow attribute to your .block element.

    Code:
    .block {
      background-color: #00bb00;
      line-height: 1.5em;
      width: 200px;
      overflow: hidden;
    }
    
     
  4. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    my god, dude. you ARE the internet.

    Thanks
     
  5. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,590
    Likes Received:
    1
    Location:
    Detroit
    :werd: Kingtoad is :bowdown:

    sometimes I hate to bother him, but he is always open to help me when ever I need it
     
  6. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    Never a bother, man. :hs:
     
  7. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    maybe kingtoad should tell the W3C how html 5 should work and then it would be out sooner than 2020 :bowdown:
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    :bowrofl:

    I'm actually looking forward to HTML 5. :hs:
     
  9. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,590
    Likes Received:
    1
    Location:
    Detroit
    thanks again, made about $70 in the last 3 weeks in adsense
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    :bowdown: congrats
     
  11. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,590
    Likes Received:
    1
    Location:
    Detroit
    would not have been able to do it with out your help man
     
  12. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    :love: Glad I can assist.
     
  13. pkr

    pkr Guest

    :coold: Kingtoad is really ftw. Best source of information I have found and an all around great dude.
     
  14. pkr

    pkr Guest

    :cool:
     
  15. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    looked at your xhtml and you have a severe case of DIVitus :o
     
  16. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    isn't really any way around that, though, is there?

    only thing I can think to change would be a heading tag for the block title, and I'm not sure that that's appropriate
     
  17. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    You can probably completely get rid of block-title and block-inner. I'd keep the outer wrapper for the Drupal identifier, and probably block-contents for any adjustments. If you want to get technical, all you really would need is the block wrapper, and leave any other styling up to the "ul li" markup.
     
  18. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    I just have block-inner there for padding. if I didn't have it, wouldn't the padding be presented differently by ff, ie, safari, chrome, etc?
     
  19. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,924
    Likes Received:
    11
    Location:
    Los Angeles
    You can set the padding in the ul tag and it'll be the same thing. It'll be the same as long as you have the outer div preventing the padding from bleeding over.
     

Share This Page