Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2012
    Location
    France
    Posts
    58
    Thanks
    15
    Thanked 0 Times in 0 Posts

    mystery margin-right

    could anyone tell me where the small margin-right ?? comes from between these buttons?
    here is the url: http://www.colombierpictures.com/test/test_page.html
    cheers
    A talent for speaking differently, rather than for arguing well, is the chief instrument of cultural change. Richard Rorty

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,097
    Thanks
    23
    Thanked 594 Times in 593 Posts
    For fun look at this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style type="text/css">
     button{
    	width:130px;
    	height: 79px;
    	line-height:30px;
    	vertical-align:middle;
    	margin-top: 4px;
    	margin-bottom: 4px;
    	padding: 0px;
    	font-family: Arial, Tahoma, Verdana, Calibri;
    	font-size: 20px;
    	text-align: center;
    	border: 2px solid #D2691E;
    	color: #000000;
    	border-radius: 10px;
     	margin-left: 0px;
    	margin-right: 0px;
     }
    
     .btnType1{
    	background:#00FA9A;
     }
     .btnType2{
    	background:#D8BFD8;
     }
    </style>
    </head>
    
    	<body>
    
    		<div id="main">
    				<div id="deptSelect">
    					<button class="btnType1" >1</button><button class="btnType1" >2</button>
    					<button class="btnType1" >3</button>
    					<button class="btnType1" >4</button>
    					<button class="btnType1" >5</button>
    					<button class="btnType1" >6</button>
    					<button class="btnType1" >7</button>
    				</div>
    				<div id="deptProducts">
    					<button class="btnType2" >8</button>
    					<button class="btnType2" >9</button>
    					<button class="btnType2" >10</button>
    					<button class="btnType2" >11</button>
    					<button class="btnType2" >12</button>
    					<button class="btnType2" >13</button>
    					<button class="btnType2" >14</button>
    				</div>
    		</div>
    	</body>
    </html>

  • #3
    New Coder
    Join Date
    Aug 2012
    Location
    France
    Posts
    58
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I recognise my code, and have already looked at it for some time. I deduce from your reply that there is some obvious or stupid error in the code that I wrote, but you can be assured that if I could see it I would not have gone to the "fun" of posting a question.
    I did however take the time to read the first sticky before posting to the forum!
    A talent for speaking differently, rather than for arguing well, is the chief instrument of cultural change. Richard Rorty

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there oddshoes,

    the "button element" is an "inline element" and as such will display a gap to the right if there is space to the right.

    Coding the HTML like this...
    Code:
    
    <button class="btnType1" >1</button><button class="btnType1" >2</button>
    ...will remove the gaps.

    But if you wish to keep the HTML as it is, then add...
    Code:
    
        float:left;
    ...to the button rules, and...
    Code:
    
        clear:both;
    ...to the div#deptProducts rules.


    coothead

  • Users who have thanked coothead for this post:

    oddshoes (05-06-2013)

  • #5
    New Coder
    Join Date
    Aug 2012
    Location
    France
    Posts
    58
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks very much - a very helpful reply. Now completely de-mistified! It also explains why the buttons I was generating with js in another part of the code did not have the gap. So much to learn, and I've rather got behind since my first encounter with software, which was bits of card with holes punched in!
    A talent for speaking differently, rather than for arguing well, is the chief instrument of cultural change. Richard Rorty

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,097
    Thanks
    23
    Thanked 594 Times in 593 Posts
    And that
    Code:
    <div id="main">
    				<div id="deptSelect">
    					<button class="btnType1" >1</button><button class="btnType1" >2</button>
    Was what was in the code I posted.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •