I've got a problem with some css. I have 2 buttons, one is an href and one is a form. The hover works on the form button but not on the href button.
.ims-button, .ims-button a:link, .ims-button a:visited {
background-color: rgb(255, 204, 0);
border: 1px solid #999;
border-radius: 5px;
box-shadow: 2px 2px 2px #999999;
font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
padding: 5px;
vertical-align: middle;
margin-bottom: 4px;
margin-left: 4px;
color: #000000;
text-decoration: none;
}
.ims-button:hover, a.ims-button:hover, .ims-button a:hover {
background-color: rgb(255, 204, 0);
border: 1px solid #999;
border-radius: 5px;
box-shadow: none;
font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
padding: 5px;
margin: 4px 0 0 4px;
vertical-align: middle;
}
I cannot see why the href isnt working.
The site: http://goo.gl/pl7DFR
Once on the site, under the grey box with the photo in you can see the Add to cart link - click that and you'll see the 2 buttons - Checkout doesnt work, Add to Basket does...
Any ideas?
You're attempting to apply margin to an inline (the "a") element, which isn't possible. Change the checkout link to
display: inline-block;
and you'll get quite a bit closer to what you're expecting.
See https://stackoverflow.com/a/5700058/2517689 for more information on inline behavior.
Related
I am trying to create a topnav menu using grid. I have done it before and it worked fine. Now, after a few months I am trying it again and for some reason it is showing two rows instead of one. Also, columns and column gap is taking a lot of space for some reason (checked via f12 menu in chrome). I even tried adjusting the gap but no gain. It didn't happen for the first time.
* {
box-sizing: border-box;
}
body {
padding: 0 10px;
}
h1 {
text-align: center;
font: 3.5em Trirong, "Times New Roman";
font-weight: 500;
font-variant: small-caps;
text-shadow: 0 0 3px white;
background-image: linear-gradient(to bottom right, black, silver, white, white, white, silver, black);
}
/*main heading*/
h2 {
text-align: center;
font: 2.5em Ubuntu, Calibri, Arial;
font-weight: bold;
}
/*reviews' main heading*/
.pmain {
color: rgb(0, 0, 0, 0.7);
font-family: "Open Sans", "Calibri Light";
font-weight: 400;
font-size: 1.1em;
}
/*main paragraph*/
.pfoot {
color: rgb(0, 0, 0, 0.7);
font-family: "Open Sans", "Calibri Light";
font-size: 0.85em;
text-align: justify;
}
/*footer*/
a.lmain {
color: black;
text-decoration: none;
}
/*casual links*/
a.lmain:visited {
color: black;
text-decoration: none;
}
a.lmain:hover {
color: gray;
text-decoration: none;
}
.tnav {
display: grid;
grid-template-columns: auto auto auto auto;
}
.tnav a {
color: black;
text-decoration: none;
font-size: 1.5em;
font-family: "Open Sans", Calibri;
font-variant: small-caps;
border: 1px solid white;
border-radius: 3px;
box-shadow: 0 0 5px black;
}
/*topnav links*/
.tnav a:visited {
color: rgb(0, 0, 0);
text-decoration: none;
}
.tnav a:hover {
color: gray;
text-decoration: none;
text-shadow: 0 0 5px #f2f2f2;
}
<header>
<h1>In-Depth Reviews</h1>
<nav class="tnav">
Home <br>
App Reviews <br>
App Rating <br>
More <br>
</nav>
</header>
I have this element:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
Its height must be 17px, horizontal padding should be 4px and font size should be 12px. It looks like a prototype in Chrome and Firefox:
But there is a problem in Internet Explorer:
It lowers the text inside, it is not well aligned vertically. If I set line-height and width of element to 18px (as well as every other even value), everything is OK, but I need 17px. How to avoid text lowering in IE?
You can add a specific style for IE. You can try this:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE Edge 12+ CSS styles go here */
.counter {
display: inline-block;
min-width: 9px;
padding: 0px 4px 1px 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
I have a button for my page that I'm also styling it
<button id="logButton" >Iniciar sesión</button>
And then the css code
#logButton
{
width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
Here's a fiddle also.
If I add the bootstrap class btn it doesn't do that and neither the font size nor the width of the button changes, my question is what does bootstrap do to keep text in place?
It's a natural behavior of an element, with fixed height and width, content will always overflow,it's better to use min-width and min-height.
#logButton
{
min-width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
min-height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
<button id="logButton" >Iniciar sesión Iniciar sesión</button>
and If you want to know about bootstrap's .btn here is css:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
#logButton
{
/* Removed height & width*/
padding: 10px 20px; /* Added */
margin-bottom: 5px;
margin-left:35%;
font-weight: bold;
font-size: 31px;
font-family: helvetica, arial, sans-serif;
}
Don't hardcode a width. Using padding on the left and right sides. Here you go.
#logButton
{
padding: 3px 15px 0 15px;
margin-bottom: 5px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
if you want to hide overflow of text then use {overflow:hidden} is css code.
if you want to keep text but not want to increase with then use {height:auto}
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>
I have a problem with the css for my web page. Basically, I want to make it so when you hover over one of the links in the navigation bar, it puts a border around it. So, this is what I made:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
}
a:visited
{
font-weight: bold;
color: #4096ee;
text-decoration: none;
}
a:hover
{
font-weight: bold;
border-radius: 5px;
color: #4096ee;
padding: 4px;
border: solid 2px;
border-color: #303030;
text-decoration: none;
}
a:active
{
font-weight: bold;
color: white;
text-decoration: none;
}
And then I have 4 links on the same line with 4 &emsp in between them. Now, whenever I hover over a link, the border appears, but it kind of nudges the other links over to make space for the border. Is there any way I can stop this from happening?
why dont you put a border on the items and make it the same color as your background and simply change color on hover
try adding box-sizing : border-box to your css. This would make the border to go inside the element.
Change your CSS like this:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border-radius: 5px;
padding: 4px;
border-color: transparent;
}
This way there will be no nudging.
You can just add a padding to the regular links. The hover state will override the regular padding and add the border.
a {
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
padding: 6px;
postion: absolute;
}
http://jsfiddle.net/5dQL5/
a{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border: 2px solid transparent;
}
Just add a border with the same width (in your case 2px) but make it transparent and that's all.
Add default 2px border to anchor tag, but make it tranparent. So it will not visible at first time when page is loaded. Then when you hover any anchor tag, change the border-color to #303030
Try this code
a{
border: 2px solid transparent;
}
a:hover{
border-color: #303030;
}