Can't properly wrap side by side - input text and button element. Any help?

HTML & CSS
1

I’m trying to create a search input text with a side by side button.

Here are the requirements:

  • [1] Those elements should be absolute centered. Both vertical and horizontal.
    [2] The solution should work on IE8+ and good browsers.
    [3] In the browser default font-size is bigger, no text or graphic element should be hidden or misplaced on the user browser.

This is what I have so far, on latest Chrome and Firefox browsers:

Here’s on Chrome:

Here’s on FF:

I believe I have no issues with vertical align part. Using pseudo-element height: 100%; with display: inline-block; technique.

I do have issues however, on placing the button element, side by side with the input text field, without any white gaps around.

The CSS relevant part:

.search-form {
    display: inline-block;
    border: 5px solid red;
    background: #fff;
}

.search-form input {
   font-size: 1.3em;
    height: 50px;
    border: none;
}

.search-form button {
    border: none;
    background-color: red;
    height: 50px;
    vertical-align: top; /* no dice */
    cursor: pointer;
}

The HTML:

<div id="main-wrapper">
  <div id="search-wrapper">
    <h3>Hello there</h3>
    <form action="" class="search-form">
      <input type="text" name="lorem" />
      <button type="submit">
        <span>Search</span>
        <!-- should be a place to background image or icon font symbol.  -->
      </button>
    </form>
  </div>
</div>

The fiddle:

I’m taking my (not that much) hair off!

Can I have your help?

2

Hummm… seems to be ok now.

I’ve changed the vertical align to use display:table; technique and did use display:table; for the form element as well.

Seems to be ok.
At least, the user can have different font-sizes and don’t loose information.

Aside - it’s really unbelievable how we are turning ourselves against what it was in the past: good practices.
Latest FF select elements don’t grow when the text sizes up.
Google search list and search field get’s absolutely mess when we size up the text.
If I have a bad vision, and I need to resize my browser default size, I will have huge problems reading the information nowadays.

Cheers.

3

If you are talking about using the display:table properties then that has absolutely nothing to do with using html tables. CSS implies no semantics upon the html structure of a page. The display:table properties mimic the behaviour of table layout but in the end its still just a div. It makes no difference to the semantics of a page. Don’t confuse html tables with the css display:table properties as they have nothing in common. You don’t complain about using display:inline on block elements when needed for display purposes :slight_smile:

Latest FF select elements don’t grow when the text sizes up.

Do you have an example as they seem to grow for me?

Google search list and search field get’s absolutely mess when we size up the text.

You lost me there a little : Are you talking about Google.com’s search boxes etc? If so then yes they don’t scale well because they have set specific heights rather than allowing content to dictate the height. It is only a real issue if you zoom text only rather than zooming the whole thing.

If I have a bad vision, and I need to resize my browser default size, I will have huge problems reading the information nowadays.

Yes some sites are still bad but that was always the case :). Browser zoom usually allows you to scale text or scale the whole thing so I guess its made some developers a little lazy.

Cheers.[/QUOTE]

4

It was an aside. But thanks for the input. :wink: I was not talking about display:table;. I was talking about the fact that we are dropping support for higher font-size values when we develop our websites. And two of the must famous don’t favor that. Neither google, nor facebook, seem to care about font size increasing, favouring, unfortunately (I think), the beauty styles instead, or image replacing techniques, of px declarations instead of em due to “cross-browsers consistency”.

But you are right (again) :), Firefox select box interpretation seems to be ok. Perhaps I see a customized version of select boxes. My bad. I’m glad that they are still ok.

About the zoom, we must not only consider the Zoom functionality using “ctrl+” or “cmd +” but the fact that, some users, should, by their choice, select the default font size they want. If we make the exercise of changing our browser default font size to a larger value, (imagining our selfs with more 30 years) and we navigate online, we can well see the weirdness (not sure if this word exists) of that experience.

Doing CSS is easy, so they say, but doing it properly, is a really serious job, and if I have that in mind, perhaps more then half of the techniques that we have about certain subjects (vertical alignment, equal heights, check or select element customisation, and so on…) drop when we confront them with this.

It seems like a taoistic art, balancing the design and accessibility all together, and that is one of the reasons I found it so art to master.

At the same time, however, I can’t stop to be amazed by knowing that, some really good skilled people are doing dancing robots, mastering css in a way that I can’t really do. :slight_smile: http://cssdeck.com/labs/dancing-robot-with-reflection

Oh well. :slight_smile:

5

I can’t argue with most of what you said :slight_smile:

Loved the dancing Robot but could have done with some music :slight_smile:

6

I don’t understand what this is saying. Would you (or someone) please explain what is happening?

7

Even more aside - My english is far from good indeed. I’m sorry for that. (At some point on my previous post, meant “hard”, instead of “art”, btw). Anyway:

Here’s on pictures. :slight_smile:

Here’s facebook “login” and “password” fields (gone somewhere behind the blue…), if you max your default font:

Here’s google:

Any browser.

This is an extreme example. I realize that. But, even if you change your default browser font size to be half this big, you still have a hell of experience on most websites this days.

8

Your English isn’t so bad… better than most :), and your thoughts were well organized… better than mine :eek:. I was just unsure about a few terms. Happens to me a lot. :-/

I like your example images. I think I understand what you were getting at, now… the major companies are no longer styling their pages to be “fluid” in such a way that it allows the user to change his font-size without “breaking” the layout. Yes, I’ve seen that coming, too. It seems like they are backsliding on design principles, but it seems to be an industry move because browser authors are following suit. “Zooming” most browsers nowadays changes the magnification of all of the content, and most do not offer the ability to change font-size only.

I suppose the advantage is that layouts can be designed to less tolerant standards… if that’s an advantage.

Thank you for answering my question.

Cheers. :slight_smile:

9

About Zoom:

You are right, zooming seems to zoom all, and not just the text, these days.

In the past, browsers had that zoom text functionality (FF as it as optional today).
But also, in that past, how did websites behave towards that?

Badly. Users used “px” for almost everything, even font related.
A few used “em”. And even fewer used %.
As a result, when the user was zooming, what happen?
Answer: Nothing. :slight_smile:

In order to “fix” this, the developers and designers should change the way they work.
Instead, so I believe, browser trends, now allow “zoom all”.
As if they were saying, at one voice:
“Developers are doing bad, let’s fix the bad that they are doing ourselves, by changing our browsers behaviour.”

Curious: I recall to read (somewhere) the same story about IE6, and the reason why, neither ie6 nor netscape, were standards compliant.

Not just about Zoom:

You mentioned zoom, and if browsers wish to keep their path allowing “zoom all”, I don’t see an issue.
But font size changing don’t happen only when you use zoom. As I state previously, the font default size change, on user browser settings, is a possibility as well. I because of that, designers and developers should take that into consideration as well.

I will make my effort, within my limited knowledge, to support user’s font-size preferences.
I hope we all can start thinking about that when we develop and design our pages.

I really big sorry for such an aside off-topic.
Put you replied. :stuck_out_tongue: And I’m glad you did. :slight_smile: (it helps clarifying or own thoughts).

10

I agree with your observations and conclusions completely.

I did not realize that some of the larger companies were reverting to using pixels for some fonts instead of ems or another scalable unit. An awareness of that trend is what I have learned from this conversation.

One of the great advantages of the SitePoint forums is that discussions such as this are encouraged. There is no reason to apologize for expounding on a topic or a discussing a side topic once the primary topic is satisfied.

Thank you for being so helpful.

Cheers :slight_smile: