1

I got a small gap between two buttons and I can't deal with it, tried to look in browser terminal, but that didn't helped. Here are the buttons:

<div class="secondTableVRow">
    <input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/>
    <input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>

CSS:

.secondTableVRow{
    width:318px;
    background-color:green;
    display:inline-block;
}

#submit{
    cursor:pointer;
    display:inline-block;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    width:156px;
    height:35px;
    outline:none;
    border:none;
    background-color:#DDDDDD;
    -webkit-transition: background-color 0.4s linear 0s;
    -moz-transition: background-color 0.4s linear 0s;
    -o-transition: background-color 0.4s linear 0s;
    transition: background-color 0.4s linear 0s;
 }

Both buttons have same CSS, I know I should use class for that and I will, just want to fix this problem first. Live example of buttons: http://www.diligencehelps.com/php_includes/register_form.php There seems to be a small gap after EVERY element in the form, why is that happening?If any more code needed just ask.

Harpreet Singh
  • 2,651
  • 21
  • 31
Donny
  • 47
  • 1
  • 8
  • 1
    possible duplicate of [Two inline-block elements, each 50% wide, do not fit side by side in a single row](http://stackoverflow.com/questions/18262300/two-inline-block-elements-each-50-wide-do-not-fit-side-by-side-in-a-single-ro) – Vucko Jun 27 '14 at 17:06
  • 2
    Don't post a live example, instead create a [JSFiddle](http://jsfiddle.net) instance with all the relevant bits of your code. Live pages are prone to changes and going dead, rendering these resources inaccessible and useless to future visitors experiencing similar problems. – esqew Jun 27 '14 at 17:07
  • possible duplicate of [Delete white space between divs](http://stackoverflow.com/questions/9555240/delete-white-space-between-divs) – mikedidthis Jun 27 '14 at 17:12

3 Answers3

1

Try this:

        <div class="secondTableVRow">
            <input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/><!--
            --><input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
        </div>

HTML can be very picky about the whitespaces.

For more background information, check this out: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Hauke P.
  • 2,695
  • 1
  • 20
  • 43
  • Thank you,this helped, I'll accept your comment in a couple of minutes – Donny Jun 27 '14 at 17:12
  • @Donny This answer leaves ~5px of whitespace (greenspace in this case :P) on the right of the #extend button. See my answer for a better/more semantic solution (you can ignore the `font-size` component if you add the comment as in this answer though) – Ennui Jun 27 '14 at 17:16
  • Yeah, I didn't include the necessary change in the CSS definition. Of course the width of the two elements have to be adjusted so that it's exactly the half of the parent element's width. I thought that this would be clear without explicitly writing it down. – Hauke P. Jun 27 '14 at 17:18
  • It isn't a matter of "pickiness". That's how those elements are supposed to work. – Rob Jun 27 '14 at 17:22
  • @Ennui: Why would you call this a less semantic version? HTML standard says that whitespaces between elements should be interpreted as actual whitespaces in the resulting page. And if you don't want your page's semantics to not include those whitespaces you'll have to get rid of them. For example by removing them... or - to preserve code readibility - by commenting them out. (Or with similar tricks that are exemplarily shown on the page I linked to.) – Hauke P. Jun 27 '14 at 17:24
  • @Rob: You're correct. But it can be difficult to understand the situations under which a whitespace in the HTML is actually interpreted as a whitespace in the result. That's what I mean with "picky". – Hauke P. Jun 27 '14 at 17:25
  • @HaukeP. I suppose I don't consider adding a comment to negate a whitespace to be semantic because it sort of violates the idea of separation of presentation and content, especially when there is a simple CSS alternative. Don't get me wrong I don't think you're violating any sacred laws or anything here, I just think it's a somewhat hacky and less maintainable solution than other alternatives. – Ennui Jun 27 '14 at 18:19
  • @Ennui: With presentation vs. content you bring up a very good point. The main question here is: What *is* the content? Does the whitespace belong to the content? Or does it not? HTML spec says that whitespaces in HTML code have to be considered as content sometimes - as it is the case here. And in this particular instance Donny does not want his resulting page to contain the whitespace. That's what brings me to my opinion that the whitespace should *not* be part of the content. And to comply with what the HTML spec says, you therefore really have to get rid of the whitespace in the code. – Hauke P. Jun 28 '14 at 10:39
1

Add this:

.secondTableVRow:last-of-type {
    font-size: 0;
}

#submit, #extend {
    width: 159px;
}

The space is due to whitespace - HTML interprets linebreaks as whitespace. font-size: 0 takes care of that, but leaves some extra space on the right as #submit and #extend don't quite fill their parent .secondTableVRow container. You could also use width: 50% instead of 159px.

The :last-of-type is to avoid the font-size: 0 from being applied to the .secondTableVRow earlier in the markup, but you could just give that last one an ID (or additional class like .final instead and select it that way, e.g. .secondTableVRow.final { font-size: 0; }.

edit: as Hauke mentioned in the comments, this may be problematic in certain older browers. It also will not work with relative font sizing (e.g. ems or %) because the font size will cascade to descendant elements. You could instead just add float: left to both buttons and overflow: hidden to their container, or another clearfix method.

Ennui
  • 10,102
  • 3
  • 35
  • 42
  • Note that the `font-size: 0;` trick won't work in all browsers. – Hauke P. Jun 27 '14 at 17:19
  • 1
    @HaukeP. Can you elaborate on which browsers you mean? It's important because I've been using this trick for a while! It used to not work in old versions of webkit browsers but that has not been the case for a few years now (and unlike IE, people having relatively up-to-date versions of Safari/Chrome tends to be the norm). It would help me out a lot to know specifics so I can hit up browserstack and make sure none of my sites suffer from this issue! – Ennui Jun 27 '14 at 18:23
  • I do know that (at least older) versions of the Android browser don't support this. IIRC IE for Mac also had some problems with this. A while ago I stumbled upon a page with an browser compatibility overview for this kind of trick. I'll look for it and post back in case I'll find it again. – Hauke P. Jun 28 '14 at 10:44
  • Here's some information: http://webdesigner-webdeveloper.com/weblog/about-inline-blocks/ (But it's not quite the page I remembered.) – Hauke P. Jun 28 '14 at 11:02
0

You could specify them as 50% width, as block elements (instead of inline-block, as this is more supported on older browsers anyway), and float them both left. Just be sure to place a after, so your formatting isn't botched.

Elly Post
  • 336
  • 3
  • 12