#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    3
    Rep Power
    0

    HTML code is adding double spacing


    I use this same HTML code and CSS for my wordpress posts and it works just fine. Now I'm trying to use it on a forum post and it adds double spacing, making it look like this: http://imgur.com/5dm8213
    When it should look like this: http://imgur.com/TbU9SJD

    What can I do to remove all the extra spacing?

    This is the HTML I'm using for this example, which is based off my CSS template underneath it:
    Code:
    <div id="info">
    <div id="info3">
    <div id="info1">Model</div>
    <div id="info2">Luka Megurine</div>
    </div>
    <div id="info">
    <div id="info3">
    <div id="info1">Author</div>
    <div id="info2">Myself</div>
    </div>
    <div id="info">
    <div id="info3">
    <div id="info1">Editable?</div>
    <div id="info2">Yes</div>
    </div>
    <div id="info">
    <div id="info3">
    <div id="info1">Release Date</div>
    <div id="info2">January 1st, 2014</div>
    </div>
    Code:
    #info1 {
    	float: left;
    	font-weight: bold;
    	overflow: hidden;
    	padding-left: 7px;
    	width: 110px;
    }
    
    #info2 {
    	overflow: hidden;
    	padding-left: 4px;
    }
    
    #info3 {
    	border-bottom: 1px solid #CCCCCC;
    	display: block;
    	margin-left: 10px;
    	padding: 4px 0;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    828
    Rep Power
    275
    you cannot use ID names multiple times on a page.

    You need to change to CLASSes instead.

    Also, you don't appear to have enough closing DIV tags to match the opening DIV tags.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    3
    Rep Power
    0
    I don't get it. It works perfectly fine in wordpress. And the only thing about it that isn't correct in vbulletin is the double spacing.

    I've tried adding a few div tags and it made things worse. Don't know anything about classes. (I'm not a web programmer)
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    828
    Rep Power
    275
    to change from ID to CLASS, in your HTML, just change all of your id='s to class='s

    and in your CSS, change the #'s to .'s
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    3
    Rep Power
    0
    Well, I tried it. But the result is the same. Nothing changed.

    I suppose I'll just have to roll with it.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    828
    Rep Power
    275
    I believe this is what you want [using proper markup]

    HTML:
    Code:
    <div class="info">
    <div class="info3">
    <div class="info1">Model</div><!--close info1 -->
    <div class="info2">Luka Megurine</div><!-- close info2 -->
    </div><!-- close info3 -->
    </div><!-- close info -->
    <div class="info">
    <div class="info3">
    <div class="info1">Author</div>
    <div class="info2">Myself</div>
    </div>
    </div>
    <div class="info">
    <div class="info3">
    <div class="info1">Editable?</div>
    <div class="info2">Yes</div>
    </div>
    </div>
    <div class="info">
    <div class="info3">
    <div class="info1">Release Date</div>
    <div class="info2">January 1st, 2014</div>
    </div>
    </div>
    CSS:
    Code:
    .info1 {
    	float: left;
    	font-weight: bold;
    	overflow: hidden;
    	padding-left: 7px;
    	width: 125px;
    }
    
    .info2 {
    	overflow: hidden;
    	padding-left: 4px;
    }
    
    .info3 {
    	border-bottom: 1px solid #CCCCCC;
    	display: block;
    	margin-left: 10px;
    	padding: 4px 0;
    }
    I had to change the width of info1 to keep "Release Date" from wrapping onto itself, but, otherwise just changed IDs to CLASS's and closed the DIVs properly.

IMN logo majestic logo threadwatch logo seochat tools logo