WEB WTF divs won't go together

Discussion in 'OT Technology' started by Mr J, Jun 19, 2008.

  1. Mr J

    Mr J New Member

    Joined:
    Jun 4, 2004
    Messages:
    55,061
    Likes Received:
    1
    Location:
    England
    I have the following CSS;

    Code:
    #tabsB {
          float:left;
          width:100%;
          background:#F4F4F4;
          font-size:93%;
          line-height:normal;
          }
        #tabsB ul {
    	margin:0;
    	padding:10px 10px 0 50px;
    	list-style:none;
          }
        #tabsB li {
          display:inline;
          margin:0;
          padding:0;
          }
        #tabsB a {
          float:left;
          background:url("images/tableftB.gif") no-repeat left top;
          margin:0;
          padding:0 0 0 4px;
          text-decoration:none;
          }
        #tabsB a span {
          float:left;
          display:block;
          background:url("images/tabrightB.gif") no-repeat right top;
          padding:5px 15px 4px 6px;
          color:#666;
          }
        /* Commented Backslash Hack hides rule from IE5-Mac \*/
        #tabsB a span {float:none;}
        /* End IE5-Mac hack */
        #tabsB a:hover span {
          color:#000;
          }
        #tabsB a:hover {
          background-position:0% -42px;
          }
        #tabsB a:hover span {
          background-position:100% -42px;
          }
    	
    .full .content {
    	background: #e8e8e8 url(images/content.gif) repeat-x;
    	padding: 30px 30px 10px;
    	border: solid 1px #ccc;
    	border-top: none;
    	float:top;
    }
    
    .gradient6 {
    	background: #000;
    	padding: 30px 0 30px 30px;
    	margin: 30px 0 50px;
    }
    .gradient6 h1 {
    	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
    	position: relative;
    	margin: 0;
    	color: #fff;
    	text-transform: uppercase;
    	letter-spacing: -2px;
    }
    .gradient6 h1 span {
    	background: url(images/gradient-dark-stripe.png) repeat-x;
    	position: absolute;
    	bottom: -0.1em;
    	display: block;
    	width: 100%;
    	height: 29px;
    }
    
    	
    Then the page;

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html><head><title>DB Tints</title>
    <link rel="stylesheet" type="text/css" href="/css.css" />
    </head><body>
    
    <div class="gradient6">
    	<h1><span></span>egaegeagea</h1>
    </div>
    <div id="tabsB">
      <ul>
        <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    
        <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
        <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
        <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
        <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
        <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    	<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
    
      </ul>
    </div>
    <div class="full">
    <div class="content">
    		<h3><span></span>eegaegeagegga</h3>
    		<p><strong>geagageagaegae</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante. </p>
    		<h3><span></span>Another heading</h3>
    
    		<p>Mauris aliquam leo at pede pharetra condimentum. Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. Maecenas eu est non nunc gravida laoreet. Vestibulum orci. Donec bibendum neque a dui.</p>
    </div>
    </div>
    
    </body>
    </html>
    
    And it puts a fucking gap inbetween the divs, like so..

    [​IMG]

    Any idea why/ it's been ages since I've done any web design :o
     
  2. burn__

    burn__ New Member

    Joined:
    Mar 21, 2006
    Messages:
    10,673
    Likes Received:
    0
    Code:
    .gradient6 {
    	background: #000;
    	padding: 30px 0 30px 30px;
    	margin: 30px 0 [B]50px[/B];
    }
    
    change that 50px to 0 and the gap goes away
     
  3. burn__

    burn__ New Member

    Joined:
    Mar 21, 2006
    Messages:
    10,673
    Likes Received:
    0
    guess i should say the order for those statements goes 'top - right - bottom - left'. so the 3rd over would be you having a bottom margin of 50px;
     
  4. Style

    Style Boioioioioioioioing

    Joined:
    Apr 29, 2005
    Messages:
    13,778
    Likes Received:
    0
    Location:
    Dubai
    why do you <span> tags in your links?
     
  5. Mr J

    Mr J New Member

    Joined:
    Jun 4, 2004
    Messages:
    55,061
    Likes Received:
    1
    Location:
    England
    I found this thing to apply a gradient to text using an empty span tag :)
     
  6. Mr J

    Mr J New Member

    Joined:
    Jun 4, 2004
    Messages:
    55,061
    Likes Received:
    1
    Location:
    England
  7. Mr J

    Mr J New Member

    Joined:
    Jun 4, 2004
    Messages:
    55,061
    Likes Received:
    1
    Location:
    England
    Thanks mang

    I knew it'd be a padding issue just couldn't work out wher :o
     
  8. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    bro, get firebug
     

Share This Page