Creating an HTML link is creating unexpected results - html

I need help figuring out why it is when I add a link in this code that it is altering my entire div block.
This is what the page looks like:
As soon as I make the text a link, it adds about 8px to the bottom (notice how the image is smaller than the div block).
What can I do to make this look like all of my other blocks?
Update: I believe I found the code that is causing the problem, it is in the CSS of the body. There is a style that has line-height at line-height: 1.625; - when I delete this, it fixes the issue. But now I am wondering how can I remove this code for my page, without effecting the rest of the site?
Here is the problem CSS:
body {
color: #3B3F42;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.625;
}
And here is the rest of the coding
.ratingWrapTopRated {
background: #fff;
width: 100% !important;
height: 90px !important;
margin: 0 auto;
display: table;
font-family: Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background: #fff;
color: #fff;
display: table-cell;
line-height: 0;
width: 90px;
padding-right: 4px;
}
.cigarName {
background: #ff5100;
color: #fff;
text-align: center;
display: table-cell;
vertical-align: middle;
word-spacing: 6px;
text-transform: uppercase;
font-size: 1.2em;
padding: 0px 3px 0px 3px;
}
.numericalScoreTopCigars {
background: #000;
color: #fff;
text-align: center;
width: 25%;
display: table-cell;
font-size: 4.9em;
letter-spacing: 3px;
vertical-align: middle;
font-weight: bold;
border-left: 4px solid;
border-color: #fff;
line-height: 0;
}
a.ratingsLink:link {
text-decoration: none;
background: #ff5100;
color: #fff;
text-align: center;
vertical-align: middle;
word-spacing: 6px;
text-transform: uppercase;
font-size: 1em;
padding: 0px 3px 0px 3px;
}
<span class="ratingWrapTopRated">
<span class="cigarImage hidebuttons"><img class="alignnone size-thumbnail wp-image-2352" src="http://cigardojo.com/wp-content/uploads/2012/08/padron-serie-1926-150x150.jpg" alt="Padron Serie 1926 No. 9 Maduro" width="150" height="150" /></span>
<span class="cigarName shortenText"><a class="ratingsLink" href="http://cigardojo.com/?p=1019">Fuente Fuente OpusX XXX Belicoso</a></span>
<span class="numericalScoreTopCigars">96</span>
</span>

Related

How to vertically align an icon inside a span

I have a span like this:
<span class="indicator"></span>
Inside this span sometimes I have numbers like this:
<span class="indicator">
<span>10</span>
</span>
And, sometimes some Kendo-UI icons, like this:
<span class="indicator">
<span class="k-font-icon k-i-checkmark"></span>
</span>
And, here is my css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: 0.85em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
font-size: 1.3em;
line-height: 1;
opacity: 1;
text-indent: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: none;
font-size: 16px;
}
There are two problems:
I want the two span indicators to have the same heights. The height of
the one with icon is one pixel more than the other one.
The icon in the span with icon is not vertically aligned.
UPDATE:
I realized if I change the font-size of .k-font-icon to 1em, both issues will be resolved, but the icon will be too small.
UPDATE 2:
Here's a Kendo UI Dojo.
.k-font-icon {
vertical-align: middle;
}
Simplest way, hope this help.
if you're setting the height and with of your .indicator, there are a few ways you could do this, but the easiest is probably to change the display to flex instead of inline-box and add a couple of properties (I haven't added the vendor prefixes, mostly because I'm lazy…):
.indicator {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
border-radius: 4px;
}
Unrelated side note: unless you have an .indicator class that behaves different ways depending on what HTML element it's on (and if that's the case, you should probably refactor that) you shouldn't add a span at the beginning of you CSS rule. It increases the specificity for no reason and makes your CSS less flexible/future proof.
Try using line-height and vertical-align css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
line-height: 20px;
vertical-align: middle;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
span.indicator .k-font-icon {
line-height: 20px !important;
}
DEMO
Updated
what about this?
span.indicator {
background: #8a8a8a;
color: #ffffff;
font-size: 1.35em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

How can I remove the letter-spacing on the last letter of an <a> tag in CSS?

I'm a newbie.
I'm trying to remove the letter-spacing on the last letter for an a tag I styled into a button and centred on the page.
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
<body>
<div class="btn-wrapper">
Change Colour
</div>
</body>
I tried
.btn-wrapper a {
margin-right: -10px;
}
and
.btn-wrapper a {
text-indent: 10px;
}
with no joy.
I am loath to put a span on the last letter.
The above suggestions I found on Stack Overflow.
Can someone please explain what's going on with my code and help find a solution?
Thanks in advance.
You could wrap the entire text part of the link in a span and use the margin-right: -10px technique to get this done.
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
.btn-wrapper a span {
margin-right: -10px;
}
<body>
<div class="btn-wrapper">
<span>Change Colour</span>
</div>
</body>
Edit :
Browsers have bugs.
Firefox bug is https://bugzil.la/299943 and the one for Chrome is https://crbug.com/267056.
You could simply incorporate the displacement inside padding with:
padding: 15px 30px 15px 40px; // no <span>s required
Maybe try change padding, so instead of 40px right use 30px, which is 40px - 10px letter-spacing.
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 30px 15px 40px;
border: solid 2px #FFF;
}
<body>
<div class="btn-wrapper">
Change
</div>
<style>
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
padding-right: 30px;
border: solid 2px #FFF;
}
</style>
</body>
Edited the padding and thats it :D decreased right padding of <a></a> to 30
Use like this
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
.btn-wrapper a span {
margin-right: -10px;
letter-spacing:10px;
}
</style>
<body>
<div class="btn-wrapper">
<span>Change Colour</span>
</div>
</body>

Change the look & feel of button

we have a button, its displaying like this :
we want to display like :
.saveall
{
text-transform: capitalize;
font-weight: bold;
float: left;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab,Arial,Helvetica,sans-serif;
overflow: visible;
width: auto;
cursor: pointer;
vertical-align: middle;
display: inline-table;
padding: 9px;
position: relative;
margin-left: 6px;
margin-right: 6px;
}
<button class="saveall" title="Save all'" type="button" style="float: left;padding: 5px 5px 5px 0;" onclick="changeaction()" id="mass_update_butn">
<span><span>Invoice</span></span>
</button>
Please help me to find solution
thanks in advance
Seems simple enough.
Remove the inline styling and the border, then tweak the padding.
Those inner spand aren't really necessary unless you have a particular reason for having them.
.saveall {
text-transform: capitalize;
font-weight: bold;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab, Arial, Helvetica, sans-serif;
cursor: pointer;
vertical-align: middle;
display: inline-block;
padding: 6px 24px;
position: relative;
border: none;
}
<button class="saveall" title="Save all'" type="button" onclick="changeaction()" id="mass_update_butn">
Invoice
</button>
Try this
button {
border: none;
background: #3FBDF7;
color: white;
font-size: 13px;
font-weight: bold;
padding: 5px 25px;
}
<button>Invoice</button>

Span positioning on different browsers

I have next html element:
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
With these styles:
.ember-power-select-multiple-option {
padding-left: 2px;
padding-right: 5px;
margin: 2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff!important;
line-height: 19px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
float: left;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 13px;
padding: 0;
text-align: center;
vertical-align: text-bottom;
color: #fff;
opacity: 1!important;
font-size: 15px;
font-family: sans-serif;
}
I'm trying to achieve next: span with text and another span in it with "X" symbol. All it must be vertical aligned to middle. Now I have this at MacOS X Chrome (and it looks OK to me) and at Windows7 Chrome. How can I make they looks the same? And I sure exists a better way to centering span than I used.
UPDATE:
In addition, I cannot change html because it is a part of an addon.
You had repeated properties such as padding which will override the first one in the same class. Plus using bothinline-block and float:left will not do the effect desired on float so just use inline-block.
I've a made a few tweaks to your code:
Snippet
body {
box-sizing: border-box;
}
.ember-power-select-multiple-option {
margin:2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff;
line-height: 17px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 17px;
padding: 0;
vertical-align: middle;
color: #fff;
font-size: 15px;
font-family: sans-serif;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
Your symbol 'x' is vertically aligned, but is docked to top of symbols line. It's such a symbol.
Try to use ×
This simbol with this style work for me
.ember-power-select-multiple-remove-btn {
vertical-align: middle;
}
Threre is a question about which symbol to use
Which font for CSS "x" close button?
I have just replaced the vertical-align: text-bottom; to vertical-align: middle; And I have check this in Windows7 Chrome,IE & FF and looks aligned to me. please check in MAC also.
.ember-power-select-multiple-option {
padding-left: 2px;
padding-right: 5px;
margin: 2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff!important;
line-height: 19px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
float: left;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 13px;
padding: 0;
text-align: center;
vertical-align: middle;
color: #fff;
opacity: 1!important;
font-size: 15px;
font-family: sans-serif;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
Hope this helps you.
Here is a solution that make use of display: inline-flex;
How does that look in Mac?
.ember-power-select-multiple-option {
padding: 0px 4px 1px;
margin: 2px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
background-color: #FFB000;
display: inline-flex;
align-items: center;
height: 21px;
}
.ember-power-select-multiple-option .text {
display: inline-block;
font-size: 13px;
font-family: CenturyGothic;
border-radius: 10px;
border: none;
color: #fff!important;
height: 16px;
line-height: 14px;
}
.ember-power-select-multiple-remove-btn {
display: inline-block;
padding: 0;
color: #fff;
opacity: 1!important;
font-size: 14px;
font-family: sans-serif;
margin-right: 4px;
height: 16px;
line-height: 14px;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">x</span>
<span class="text">самбука</span>
</span>
I solved my problem in unexpected way.
First of all, I have update addon to newest version, and structure was changed.
<li class="ember-power-select-multiple-option">
<span role="button" aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</li>
Also I set:
vertical-align: middle;
font-family: verdana;
for ember-power-select-multiple-remove-btn class and it looks great. So I assumed that span in another span was not very good structure =).
Now it looks next on both OS.

How can I best accomplish this shape on a div with dynamic text inside it?

http://i.imgur.com/Sc1NnFp.png
I need to create that with CSS. I can use an image if absolutely necessary, but either way it needs to be expandable (probably vertically is best for this one).
http://jsfiddle.net/VR2WF/
<div id="cta">
<div class="callus">Call us today!</div>
<div class="phonenumber">404-555-5555</div>
</div>
#cta {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 20px;
padding: 10px 20px;
color: #FFF;
text-align: center;
text-transform: uppercase;
background: #232323;
max-width: 400px;
margin: auto;
}
.callus, .phonenumber {
display: inline-block;
}
Here is my solution:
http://codepen.io/Chovanec/pen/temKh
<div class="rib"><div class="text">Call us today</div><div class="arrow"><!-- --></div></div>
.rib .text {
font-family: sans-serif;
color: #fff;
background: #000;
padding: 20px 50px 5px 50px;
width: 500px;
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
}
.rib .arrow {
display: block;
border-width: 20px 300px 0 300px;
border-color: transparent;
border-top-color: #000;
border-style: solid;
height: 0;
width: 0;
overflow: hidden;
}