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.
Related
I am trying to float an li's :after, which includes a background element.
It works in every browser on Mac, and every browser on Win, EXCEPT IE.
I tried changing around parameters like the display and floating, which does not work.
CSS:
ul.nav li a:after {
background: url(images/nav_icon.png) no-repeat;
width: 8px;
height: 5px;
font-weight: 400;
content: "";
display: block;
float: right;
margin: 8px 0 0 6px;
}
Heres what it looks like right:
Heres what IE does:
I am thankful for any help. Only thing i found googling was clearfix tricks for IE7, nothing regarding how that stupid browser interpretes selectors.
Solved using conditional comments which contain display: inline-block and removing the floating for the :after.
I have an input (that holds a number) that I want to put a button next to. This button would, when pressed, increment the value in the box by 1.
I am having a heck of a time lining it up in all browsers though.
I've tried using button, img, and a to accomplish this. img does not line up properly in most of the browsers. Meaning that if I put an input and an img next to each other, the img is a few pixels higher than the input, but that varies by browser. The closest i can get is by making it a button that is styled with css to use my custom image. It works in Chrome, ie7, and ie10. However, in ie8, ie9, and firefox, it is 1 pixel too high, and I can't for the life of me get them to line up.
I read here that floating would make them line up. Sure enough, it did. But now the input and the button are jammed against the edge of the td they're in, and I can't figure out how to move them. Is there perhaps a better method than float? Or just a way to line them up properly?
This is how it is where I am having issues. In Chrome and ie7, ie10 it works fine. It messes up in ie8,9 and firefox.
This is how it looks with floats. It displays right in all the above browsers, but it is now off-center.
Any suggestions?
OK. Here is one way. So I think you might like vertical-align: middle; It only works on inline and inline block elements aligning them to each other. So it's not aligning them inside a box. I made a little sandbox to test your issues HERE. I'm not sure of your constraints, but I use box-sizing: border-box; on most everything these days - So that is something to beware of when looking at the code. I checked it in browser-stack and all seems well for the most part. This is always a difficult task in my experience. I kept to the key points in the CSS below, but there is a bunch of comments and styles and stuff in the codepen. I hope this helps! Good luck!
HTML
<div class="wrapper">
<input class="your-input" type="number" /><button class="your-button">+</button>
</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
float: left;
height: 4em; /* needs to be defined in this case so that the children know what they should be 100% height of */
/* just for show */
background-color: lightgray;
border: 1px solid red;
padding: .5em;
}
.your-input, .your-button {
display: inline-block;
/* aligned to each other and not the .wrapper */
height: 100%;
/* already was inline by dephault - but just to be clear */
vertical-align: middle;
}
.your-input {
margin: 0;
padding: 0;
width: 20em; /* arbitrary */
text-indent: 1em;
border: 1px solid black;
}
.your-button{
/* whatevers */
background: lightblue;
border: 1px solid black;
border-left: 0;
width: 6em;
border-radius: 0 10px 10px 0;
cursor: pointer;
}
You might want to consider using the bootstrap libraries. See "Prepended and appended inputs" here. They do a great job with browser compatibility. You can further refine the l&f, so that it better matches what you have in your examples.
I came up with a method that fixes my issue, but only for ie8+ which is satisfactory for me.
The structure looks like this:
<input class="add_input" type="text" name="qty" value="0" /><a class="add">
<img src="plus.png"/>
</a>
There cannot be a space or new line between the input and the a or else it will misalign them. The image is simply the "+" by itself, nothing else. Then I use CSS to style the image into the shape I want, with the appropriate :hover and :active selectors.
Here's the CSS:
.add_input{
width:28px;
height:18px;
padding:1px 0;
display:inline-block;
text-align:center;
border:1px solid #0a1c40;
border-right:0;
vertical-align:bottom;
}
.add img{
background:url(add.png);
display:inline-block;
width:18px;
height:20px;
border:1px solid #0b1e45;
border-radius:0px 12px 12px 0px;
vertical-align:bottom;
}
.add img:hover {
background:url(add_hover.png);
}
.add img:active {
background:url(add_active.png);
}
I'm note sure if other vertical-align types would work or not, I just know bottom does.
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}
I'm trying to find a good why to display my Icons.
I want to use a CSS and not an img tab.
My code:
<span id="Span1" class="iconPrinter"></span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 8px;}
or
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; width:16px;}
It works fine on FF but on IE6 I can't see the Icons, only if I insert a span in the span.
When I use a div or display:block; it work fine, but I need it to be inline.
Thanks
The simplest way I found to insert an inline tag like span what will work with IE6 is:
(for 16px icon)
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
IE6 probably won't show the inline element with padding if it has no content. Try adding into the span;
<span id="Span1" class="iconPrinter">& nbsp;</span>
(Note that there is an extra space in the as the code coloring mangles it otherwise)
On the other hand, in order to give the span a width, you could also try using
.iconPrinter { display: inline-block; }
In order to get around FF2 issues with inline-block I found a suggestion online which worked for my setup. Now for my setup I have a text which also has padding-left and a background-image set to the left side of the text. I needed the whole span to fire an event when clicked, which just wasn't happening when I used display block in IE6 or IE7.
I came here and it was suggested to use inline-block which fixed my issues, but left me with FF2 compatibility issues. I then found this solution.
display: -moz-inline-box;
display: inline-block;
Having both display calls doesn't seem to have any adverse effects in any of the browsers I tested IE6,7,8, FF2, 3.
What is your purpose with the icons? Do you just want to show the icons, why not use the "img"-tagg. If you should be able to click them wrap them in an "a"-tagg.
ie6 has a bug with vertical-padding on inline elements. You could also use divs and float them.
What is inside of the span? Anything?
Try adding:
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
And if the span is just there for the icon, add some kind of html special character. This may force IE to acknowledge that something is there, and it's more accessible for those without CSS or with screen readers, something like:
<span id="iconPrinter">⎙</span>
Try to give css height to the span class. Something like
.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
I realize this is an older post, but I came across this question while searching and thought that this might help others. I was using CSS background images for links and also had trouble with IE6 and IE7.
Here's the HTML:
Edit Admin
Delete Admin
Here's my css for browsers other than IE6 and IE7.
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box; /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
Here's the additional css that I conditionally add only for IE6 and IE7:
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}
Use padding and add a zoom: 1 in your css class
<span id="Span1" class="iconPrinter"></span>
.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }
I'm looking for a way to do something which in my opinion should be super simple, but I couldn't figure it out...
I want a graphical element on my web page which is exactly 1 pixel high, 100% wide and has a certain color, let's say red. It should look exactly the same in all browser and should preferably not break the semantics too much.
I don't want to use any images for this and I don't want to use more than one HTML element. Of course, I will not use JavaScript.
I tried the old classic which probably many of you know:
<div class="hr"></div>
<style ...>
.hr {
height: 1px;
background: red;
width: 100%;
font-size: 1px; /* IE 6 */
}
</style>
The problem with the above solution is that IE6 will render this as two or three pixels high, to fit the non-existing contents of the div.
Any ideas?
just do
.hr {
height: 0px;
margin: 0px;
border-bottom: 1px solid #FF0000;
font-size: 1px;
}
I went through the same thing when I was new to CSS.
adding an overflow: hidden; style should fix it also.
I don't have IE6 handy to test, but an actual HR tag can work in modern browsers. Took me a couple of tries to realise you set the background color not the border color:
hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }
(adjust to suit)
I don't have IE6 to test this, but I remember it had to do something with the line height. Have you tried this?
line-height: 1px;