I'm trying to keep three squares vertically aligned. The third element is a twitter widget. I'm running Ubuntu 12.04 and the two squares seem to shift downwards in google chrome. All other browsers seem to render this correctly (with them all inline).
I've tried removing white space, looking deeper into my source, etc., but even this simple jsfiddle seems to have the same issue.
What's up?
http://jsfiddle.net/bwzGC/
HTML
<div id="info-block">
<div id="twaewsit-content">
<span class="header">This Week # EWSIT</span>
</div>
<div id="ue-content">
<span class="header">Upcoming Events</span>
</div>
<div id="twit-content" style="border:none !important;">
<a class="twitter-timeline" href="https://twitter.com/EWSITGOGREEN" data-widget-id="362066477261680640">Tweets by #EWSITGOGREEN</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
CSS
#info-block {
padding:20px 0 20px 0;
width:100%;
text-align:center;
}
#info-block > div {
height:250px;
width:30%;
max-height:250px;
overflow-y:hidden;
display:inline-block !important;
border:1px solid #e8e8e8;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font:normal normal normal 12px/16px "Helvetica Neue",Arial,sans-serif;
}
#info-block > div > .header {
display:block;
padding:8px;
font-weight:bold;
font-size:14px;
text-align:left;
border-bottom-style:solid;
border-bottom-color:#e8e8e8;
border-bottom-width:1px;
}
One option is to add vertical-align: bottom; to #info-block > div
#info-block > div {
height: 250px;
width:30%;
max-height:250px;
overflow-y:hidden;
vertical-align: bottom;
}
http://jsfiddle.net/bwzGC/2/
I came across something similar the other day and looked into the causes a little.
As Adrift pointed out this is due to the vertical-align of the inline-block elements. Specifically it seems to be related to the baseline value which inline-block elements use by default and the fact you also have overflow-y:hidden set.
There seems to be a rendering difference between Webkit browsers (I see the boxes pushed down in Chrome, Safari and Opera 15) and others (Firefox and Opera 12 have the boxes aligned to the top) when vertical-align:baseline and overflow:hidden are applied. Removing the overflow-y css gives me the same results (boxes pushed down) in both Firefox & Chrome.
Per the W3C CSS 2.1 Specification:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So it seems like Gecko is rendering according to the specification in this case whereas Webkit is not.
Float the 3 divs left and you will be fine
EXAMPLE
#twaewsit-content,#ue-content,#twit-content{
float:left !important;
}
Related
I try to make a span look consistent between Firefox and Chrome browsers.
Chrome always seems to add a little extra whitespace at the bottom of the text in the span. Firefox does not.
My code:
<span style="line-height:22px; padding: 0px; margin:0px; border-radius: 3px;
vertical-align:middle; background-color: #cc0000; color: #fff; font-size: 22px;">
100%</span>
Try it on https://jsfiddle.net/j904g5fn/3/
You'll see that in the current version of Chrome, there is a little space under the text, which I can't remove by using padding, margin, line-height or vertical-align settings. Firefox does seem to display the span correctly.
How do I remove that extra space?
The three attempts (jsfiddle,inline-block,line-height 18)
The first answer shows the same problem in incognito modus. (there is a little more margin in total, but still more on the bottom)
The second answer:
Could it be a specific issue of Chrome on Linux? (v 68.0.3440.84)
Since <span> is not a block element by default, add display:inline-block; to make it work.
<span style="line-height:22px; padding: 0px; margin:0px; border-radius: 3px; vertical-align:middle; background-color: #cc0000; color: #fff; font-size: 22px; display:inline-block;">100%</span>
The problem is that you need to define the element as a type of block (such as inline-block) to accept margins and paddings, as well as the line-height being the same as the font size, which adds some additional spacing based on the glyph rendering of the font. By setting line-height to 0.75, you are specifying a unitless value, allowing it to scale up and down based on font size without affecting the spacing of the text within the box.
<span style="display:inline-block; line-height:0.75; border-radius: 3px; background-color: #cc0000; color: #fff; font-size: 28px;">100%</span>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I have an HTML template with a series of blocks, which are just "inline-block". Initially, a number of blocks are rendered as part of the template, but users may add additional blocks, which then get appended dynamically.
My problem is that the dynamically added blocks have a different spacing compared to the pre-rendered ones.
Check out this fiddle: https://jsfiddle.net/7w3hu5gk/
It is clear that the blocks, added dynamically by the Javascript code, don't line up vertically.
HTML:
<div id="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS:
#blocks {
width:140px;
}
#blocks div.block {
display:inline-block;
*display:inline; // Legacy IE love
zoom:1;
vertical-align:top;
width:20px;
height:20px;
margin:5px;
border:1px solid red;
background:1px solid #777;
}
It seems that the culprit is the inherent (and invisible) character spacing, since inline-block makes elements behave sort-of-like text. Setting font-size: 0 on the #blocks element will magically fix the problem. But then the font size of text contained within the div.blocks elements have to be resized.
Does anyone have a nice fix for this?
Floating elements (e.g. float: left;) are not a desirable alternative.
This is due to there being a new line between each div in your HTML. This makes the browser think it needs to add a space in between each element.
Either remove the spacing or add font-size:0; to your parent div.
Fiddle for option 1:
https://jsfiddle.net/Lu0xw1b6/
Fiddle for option 2:
https://jsfiddle.net/fkcb5mrw/
Use a flexbox on the blocks div and there you go!
#blocks {
display: flex;
flex-wrap: wrap;
}
see fiddle here.
Hi try this code.
#blocks {
width:140px;
letter-spacing: -0.31em;
*letter-spacing: normal;
*word-spacing: -0.43em;
}
#blocks .block {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
width:20px;
height:20px;
margin: 0 5px 5px;
border:1px solid red;
background:1px solid #777;
}
Regards :)
It should be simple to center text in a button. Unfortunately, across different browsers and platforms, I get different results.
I've tried for hours to fix it, but nothing works everywhere.
Chrome, mac OS X:
(source: d.pr)
Chrome, Windows 8
(source: d.pr)
IE 10, Windows 8
(source: d.pr)
So, yeah. The big block doesn't appear in IE if I set a defined height, but I don't get why it breaks down in the first place.
Here's the code:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 3px 18px 3px 10px;
margin-top: 6px;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap;
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px; }
and the HTML (pretty simple) :
Want more ?
and the site: http://aurelieremia.be/tfa/
// edit: I think I get it. Still not centered in windows but by resetting the line height, the button looks a bit more normal. IE problem resolved, I'll try using a background-image instead (thanks Ana)
I'm not sure if this will help but cross browser centering in css is a big pain so I use Twitter Bootstrap and overwrite some of the classes.
If this sounds like something you'd consider you can check out the solution here
Leave :after in static .
vertical-align to middle or explicite value (depends of where really stand arrow in svg/img).
white-space:nowrap to parent box to secure, but not necessary:
http://codepen.io/gcyrillus/pen/vzrGj
How about something like this:
HTML:
<a href="about.html">
<div class="btn-call-to-action">
<span>Want more? <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
</span>
</div>
</a>
CSS:
.btn-call-to-action{
width:160px;
height:80px;
background: #8e8287;
padding: 3px 18px 3px 10px;
margin:8px;
color: #f5f3e2;
border-radius: 2px;
display:table;
text-align:center;
}
.btn-call-to-action span{
display:table-cell;
vertical-align:middle;
}
Fiddle here: http://jsfiddle.net/MQHVE/3/
The important part here is to have the wrapper (the a tag) display:table and the content (span) display:table-cell. Then you can apply vertical-align:middle to the span.
I have this code :
<input type="text" class="contactInput" value="my string">
.contactInput
{
border:0;
margin:0;
padding:0;
background-color:#000000;
color:#ffffff;
height:22px;
width:290px;
padding-left:5px;
}
and I'd like to vertical-align it. Firefox and Chrome do it automatically (as IE9). With IE8 or 7 is in the top.
How can I do it with CSS?
Assuming you mean vertically align in the centre, you can use the line-height CSS property to do this. Simply set it to be the same as the height of the element.
There is a problem with line-height in Chrome. When inline-height == height then chrome on picking edit box displays large cursor. When you start typing cursor decreases. Possible solution is to use paddings (top & bottom). In your case:
height: 18px;
padding-top: 4px;
For webkit, its better to use paddings to avoid giant cursor, like that.
line-height: 14px/*to enclose 13px font, override this if needed*/;
height: 14px/*to enclose 13px font, override this if needed*/;
/*Padding is needed to avoid giant cursor in webkit, which we get if
height = line-height = 22px.*/
padding: 6px 8px;
I've been having trouble setting a textarea element's width and using padding via CSS. The padding value seems to change the width of the textarea, which I'd rather it not do.
This is my HTML code:
<div id="body">
<textarea id="editor"></textarea>
</div>
And my CSS code:
#body {
height:100%;
width:100%;
display:block;
}
#editor {
height:100%;
width:100%;
display:block;
padding-left:350px;
padding-right:350px;
}
However, the padding values do not appear to work as one would expect. The width of the textarea is increased by 350px in both directions, rather than defining space between the borders of the element and its content.
I've considered just centering the textarea by setting the margins at "0px auto", but I would like the user to still be able to scroll through the textarea if the mouse is hovering over one of the empty margins. For the same reason I can't add another div to act as a wrapper, as the user wouldn't be able to scroll along the empty areas but only along the margin-less textarea.
Can anybody help?
The CSS box model defines "width" as the width of the content, excluding border, padding and margin.
Fortunately, CSS3 has a new box-sizing property that lets you modify this behaviour to instead include padding etc. in the specified width using:
box-sizing: border-box;
According to the link above, most modern browsers (including IE >= 8) support this property, but they have different names in each browser.
Specifying widths and margins/padding in '%' helps.
Here is one example -
Live # http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result
#body {
background-color:#ccc;
height:100%;
width:100%;
display:block;
}
textarea#editor {
border:none;
width:80%;
height:100%;
margin-left:10%;
margin-right:10%;
}
The width specified by CSS does not include padding or border (in accordance with W3C specifications). I guess one way of doing it is with some JavaScript that sets the width of #editor to the width of #body minus 700px, but that's a bit messy... Not sure if there's a CSS way of doing what you want here. Of course, you could use margin then register the onMouseWheel event to the #body and work with that...
Some browsers allow you to target the placeholder for changing the color etc., so you can add padding as well:
::-webkit-input-placeholder { /* WebKit browsers */
padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
padding: 5px 0 0 5px;
}
Just add a simple border:
border-bottom: 1em solid white;
Feel free to use the desired color and size. You could also use border-top, border-left, border-right or just use border. To make it act like padding, just make sure that you add the same color as the background-color
.parent, textarea{
width:100%;
}
.parent{
display:flex;
}
textarea{
border:1em solid black;
}
<div class='parent'>
<textarea rows="5"></textarea>
</div>