I am trying to develop a website. I have written styling in CSS. It is working perfectly in Mozilla Firefox and Google Chrome but it is not behaving properly in Internet Explorer 10. I am trying to hover on some carded layout's made using bootstrap and tiles, so if I hover on the card the border color should change and the text inside that card should become bold. I could some how manage to get the text bold but I am not able to see the border color change when I hover.
I need to know what the solution is and figure out something which will make sure that the styling is same across the browsers.
<div class="col-sm-6 col-md-4 col-lg-4" align="center">
<span class="tile tile-account">
<a href="#" onclick="return doubleClick()" class="block">
<strong class="tile-heading landingpageheader tileTextStyle">
Change my name</strong>
</a>
</span>
</div>
The styling in CSS:
.tile {
display: block;
background: #fff;
border: 2px solid;
border-color:#ccc;
border-radius:8px;
cursor: pointer;
margin-bottom: 20px;
;
overflow: hidden
}
.tile>a:HOVER .landingpageheader{
font-weight: bold;
}
.tile>a:hover{
border: 2px solid;
border-color: #00A1D0;
}
.tile-account {
height: 180px;
border-radius: 8px;
}
.tileTextStyle{
text-align: center;
padding-top:12px;
white-space: normal;
word-wrap: noraml;
height: 46%
}
.landingpageheader {
font-size: 20px;
font-style : normal;
font-weight : 400;
font-family : Helvetica;
color: #00A1D0;
}
just try to complete the code in your css
span.tite.tile-account a:hover{
font-weight: bold;
}
Related
When i use span tags in my code (to change background of the text based on what the text is) the text is not vertically aligned vs. its background when i open my code in Android Chrome browser. Let it be Code v.1 (JSFiddle) and here's the result:
However, when i remove span tags the vertical alignment looks perfectly fine. Let it be Code v.2 (JSFiddle) and here is the result:
Don't be misleaded by JSFiddle preview window: firstly, be sure to enlarge it (alignment disproportion is not seen on small window sizes), secondly - Code v.1 in JSFiddle moves the text to the bottom of its background, while on Android Chrome the same code moves it to the top (see the screenshot above).What i am not looking for:
JavaScript solutions - not suitable in my case
manual finetuning of the padding tag - the problem is clearly in span tag, not in padding
Here is Code v.1:
.part_of_speech {
font-family: Verdana, Geneva, sans-serif;
color: #fff;
font-weight: 700;
border-radius: 0.3em;
padding: 0.1em 0.2em 0.1em;
font-size: calc(0.4em + 1.5vw);
}
.noun {
background-color: #2196f3;
}
.adjective {
background-color: #ff9800;
}
.verb {
background-color: #4caf50;
}
.adverb {
background-color: #f94432;
}
.conjunction {
background-color: #a047f9;
}
<div class="part_of_speech">
<span class="part_of_speech noun">NOUN</span>
<span class="part_of_speech adjective">ADJ.</span>
<span class="part_of_speech verb">VERB</span>
<span class="part_of_speech adverb">ADV.</span>
<span class="part_of_speech conjunction">CONJ.</span>
</div>
Here is Code v.2:
.part_of_speech {
font-family: Verdana, Geneva, sans-serif;
color: #fff;
font-weight: 700;
border-radius: 0.3em;
padding: 0.1em 0.2em 0.1em;
font-size: calc(0.4em + 1.5vw);
display: inline-block;
/* NEW */
background-color: #2196f3;
/* MIGRATED FROM .partofspeech CLASSES BELOW */
}
/* .partofspeech CLASSES WERE DELETED DUE TO DELETION OF <SPAN> TAG */
<div class="part_of_speech">NOUN </div>
The solution was very easy in fact: there was a conflict between div being present in each span. Deletion of div-component from spans and addition of a span selector to the general div made code to work as it was supposed to:
.part_of_speech {
font-family: Verdana, Geneva, sans-serif;
color: #fff;
font-weight: 700;
font-size: calc(0.4em + 1.5vw);
}
.part_of_speech > span {
padding: 0.1em 0.2em 0.1em;
border-radius: 0.3em;
}
.noun {
background-color: #2196f3;
}
.adjective {
background-color: #ff9800;
}
.verb {
background-color: #4caf50;
}
.adverb {
background-color: #f94432;
}
.conjunction {
background-color: #a047f9;
}
<div class="part_of_speech">
<span class="noun">NOUN</span>
<span class="adjective">ADJ.</span>
<span class="verb">VERB</span>
<span class="adverb">ADV.</span>
<span class="conjunction">CONJ.</span>
</div>
I have a problem getting a hover effect to work across a text and font awesome icon group in a button. With the html and css shown, when the cursor goes over the button, it changes in line with the " a.act_study_btn:hover" css but the font awesome book icon does not unless the cursor hovers over it. What I want is for both text and icon to work together. I've tried some variations on the html and css without success.
<span class="active_study"><a class="act_study_btn" href="index.php/right-view">active study<span class="fa fa-book fa_book_sg"></span></a></span>
a.act_study_btn {
color: #ff0;
background: #000093;
border: 2px solid #000093;
border-radius: 0.3em;
padding: 3% 10%;
text-decoration: none;
font-size: 1em;
padding: 1% 3%;
}
span.fa_book_sg {
color: #ff0;
font-size: 1.2em;
}
a.act_study_btn:hover {
cursor: pointer;
color: #000093;
background: #dfe1f9;
border: 2px solid #f00;
}
span.fa_book_sg:hover {
color: #000093;
}
Any suggestions would most welcome.
You can use the following CSS:
.act_study_btn:hover .fa {
color: #000093;
}
The style rule will apply to the icon when the button is hovered over.
See demo here: http://codepen.io/sol_b/pen/LbXrGv
I have created a popup kind of div using css. Here is my code.
#import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
.popups-right {
background: #f57b20 none repeat scroll 0 0;
border-radius: 40px;
font-family: 'Oswald', sans-serif !important;
color: #fff;
font-size: 26px !important;
text-transform: uppercase !important;
font-weight: bold !important;
right: -120px;
padding: 15px;
position: absolute;
text-align: center;
width: 33%;
line-height: 40px;
}
.popups-right::after {
border-left: 0px solid transparent;
border-right: 54px solid transparent;
border-top: 20px solid #f57b20;
bottom: -12px;
content: "";
display: block;
height: 0;
position: absolute;
width: 0;
}
Here is my HTML Code
<div class="popups-right">
<h3 style="color: #34213e;">ready to get fixed?</h3>
<h3 style="color: #fff;">dont forget to include <br>this form in your order</h3>
<h3 style="color: #fff;">simply click on this image <br>and start typing</h3>
<h3 style="color: #fff;">please mark any areas you see <br>with pins. <span style="color: #34213e;">do not</span> use tape.</h3>
</div>
The font is not working as expected in Chrome and Firefox but working great on Safari. I am clueless about the issue. Please help.
This is how it looks in safari:
But this is how it is working on chrome and firefox:
The page is available live here: http://alterknit.staging.wpengine.com/packing-slip/
Give to every heading in bubble a class, for example .popups-right-title & give styles
.popups-right-title {
font-family: 'Oswald', sans-serif !important;
}
Avoid using !important statement for declaring rules, so you will not have such problems in the future.
Apparently this declaration: font-family: 'Oswald', sans-serif !important; does not work all together.
That second rendering uses some serif font but not sans-serif as you declared.
Use DOM inspector / debugging tools to discover other rules that override yours.
I created a custom checkbox with basically an icon inside a checkbox. The icon is a font from flaticon so that I can easily change size and color. Unfortunately the checkbox is shown in Chrome and Safari but not in Firefox and IE.
Here is a sample of my code:
CSS: Custom Checkbox
#checkicons input[type=checkbox]{
visibility: hidden*/
height: 80px;
line-height: 1.4;
}
#checkicons input[type=checkbox]:checked:after, input[type=checkbox]:after{
visibility: visible;
font-size:50px;
margin-left: -36px;
padding: 15px;
border-radius: 8px;
line-height: 1.4;
}
#checkicons input[type=checkbox]:checked:after{
color: white;
border: solid black;
background-color: #1e6e11;
border-width: 1px;
}
#checkicons input[type=checkbox]:after{
color: #1e6e11;
border: solid #1e6e11;
background-color: white;
border-width: 1px;
}
#checkicons label{
max-width: 90px;
}
Html: Checkbox
<div id="checkicons">
<input type="checkbox" class="flaticon-leisure4" id="housecare" name="housecare" onchange="toggleDiv(this)"></input><br>
<label for="housecare">House care</label>
</div>
CSS: Flaticon
#font-face {
...url to fonts...
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
.flaticon-leisure4:after {
content: "\e00f";
}
I did some tests on the code while trying to fix this issue. The behavior on Firefox and Safari is the same like I would delete the class in the html of the checkbox.
Here I do have two screenshots of the result. The first is working with chrome, the second is the not working version with firefox and IE which equals with the result if I would delete the code 'class="flaticon-leisure4"' from the html.
Result on Chrome, Safari
Result on Firefox, IE
I would be happy If I can solve this problem or if you can give me alternative suggestions.
Pseudo elements are only working for container elements. Therefore I changed the customized checkbox to a label. Instead of the customized checkbox I just following code
CSS: Custom Icon
#checkicons .icon{
max-width: 90px;
font-family: Flaticon;
font-size:50px;
margin-left: -36px;
padding: 5px 15px 5px 15px;
border-radius: 8px;
line-height: 1.4;
color: #1e6e11;
border: solid black;
background-color: white;
border-width: 1px;
}
New HTML
<input type="checkbox" id="housecare" name="housecare" onchange="toggleDiv(this); toggleIcon('houseCareIcon')">
<label for="housecare" id="houseCareIcon" name="houseCareIcon" class="flaticon-leisure4 icon"></label>
<label for="housecare">House Care</label>
</input>
The color handling whether the label should look like checked or not checked is now done with JavaScript.
Javascript: Check Color Handling
function toggleIcon(obj, checkobj){
if(document.getElementById(checkobj.id).checked){
document.getElementById(obj).style.color='white';
document.getElementById(obj).style.backgroundColor='#1e6e11';
}else{
document.getElementById(obj).style.color='#1e6e11';
document.getElementById(obj).style.backgroundColor='white';
}
}
Thanks Hidden Hobbes for the "inspiration"!
Having problem with extra padding on a <button> element in iOS safari browser.
The markup is like this, using font-awesome icons:
<button type="submit" class="btn-class">
<i class="fa fa-plus"></i>
</button>
This is the CSS for the class in the button element:
background: #000;
width: 25px;
height: 25px;
border-radius: 100%;
border: none;
color: #fff;
font-size: 1em;
line-height: 25px;
text-align: center;
On a computer with Chrome as the browser I get this output.
But when using iPhone iOS 8.1.2 and Safari there is a strange padding to the left of the plus sign:
Any ideas on what the problem is?
EDIT
here is a fiddle on the code.
http://jsfiddle.net/qpvat7xv/
Simply add padding: 0 to your <button> style:
button {
-webkit-appearance: button;
cursor: pointer;
font: inherit;
overflow: visible;
text-transform: none;
padding:0;
}
This will solve the bug with Button tag which creates the padding in iOS.