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.
Related
I'm creating reports in html and would like users to be able to download them as PDF via the browsers native print functionality. ie ctrl + P or cmd + p
I've discovered an issue when print in Firefox, the browser seems to not allow printing in a white font color.
The expected behaviour:
let's say I have a basic div with purple background color and white text. I would expect the browser to render that element exactly like that and also print the page to pdf exactly like that.
Actual behaviour:
In Firefox only, the browser changes any font which is deemed too light to black. This could be a font colour which is white or any colour that is close to white ie a light grey.
Is there a way with CSS or other that I can force it to print to PDF any white font colors exactly white?
Worth noting: I had a similar issue with Firefox not rendering background colours on elements, I got around that by using the following CSS rules on the element that didn't have the background color rendering, this however doesn't seem to fix the light font color issue:
-webkit-print-color-adjust: exact;
color-adjust: exact;
I have also included some code to be able to replicate this issue:
<html>
</head>
<body>
<section class="purple">
<div class="page">
<div class="oval single">day-to-day</div>
</div>
</section>
<style>
.oval {
position: absolute;
width: 300px;
height: 60px;
top: 45px;
right: -50px;
border-radius: 50%;
color: #ffffff!important;
text-align: left;
line-height: 24px;
opacity: 0.4;
padding: 15px 15px 15px 50px;
}
.oval span {
color: #ffffff!important;
}
.oval.sub{
top: 108px;
}
.oval.single{
top: 80px;
}
.page {
font-size:24px;
line-height: 34px;
position: relative;
width:1160px;
height:1671px;
padding:100px;
page-break-after: always;
color:#595959;
}
*, body {
-webkit-print-color-adjust: exact !important;
font-family: 'Source Sans Pro', 'Arial', sans-serif;
}
.purple .oval {
background-color: #3c0c5b;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
</style>
</body>
</html>
If you save this to an html file and try printing the page via ctrl + p or cmd + p you will see it renders as it should in the browser as html but not in the PDF.
One workaround is to set the text to transparent and then set text-shadow to the desired print color.
I had success in Firefox 70.0.1 using this solution.
<style>
.oval {
position: absolute;
width: 300px;
height: 60px;
top: 45px;
right: -50px;
border-radius: 50%;
color: transparent;
text-shadow: 0 0 0px #fff;
text-align: left;
line-height: 24px;
opacity: 0.4;
padding: 15px 15px 15px 50px;
}
...
</style>
https://codepen.io/joshmatt/pen/jOOzrEv
I have a site with a small pricing blurb. In every browser I've tested in (Chrome, Firefox, IE, Safari for Windows, Chrome for Mac) it looks exactly as intended:
Unfortunately, though, in Safari for Mac, iOS Safari, and Chrome for iOS, the "MEMBERSHIP" text doesn't wrap to the next line and is pushed to the right farther than it should be:
Since I am not aware of any inspector for mobile, I'm having a really hard time figuring out why this text is displaying in the wrong place.
Here's the HTML:
<div id="home-cta-text">
<p style="font-size:40px; text-align:center; font-family:'Franchise-Bold', Arial, sans-serif; line-height:40px; color:#fff; margin-left:auto; margin-right:auto;">
MEMBERSHIPS AS LOW AS
</p>
<div id="home-cta-right" style="float:none; margin-left:auto; margin-right:auto;">
<p><span>$19</span><sup>.99</sup></p>
<p class="home-cta-subtext">PER MONTH</p>
</div>
<div style="clear:both;"></div>
</div>
And appropriate CSS:
#home-cta-text {
padding: 1em;
background-color: rgba(0, 0, 0, 0.4);
width: 377px;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
#home-cta-right {
float: left;
width: 156px;
}
#home-cta-left p, #home-cta-mid p, #home-cta-right p {
font-family: 'Franchise-Bold', Arial, sans-serif;
font-size: 109px;
color: #fff;
line-height: 90px;
padding-bottom: 0;
}
#home-cta-text p.home-cta-subtext {
font-size: 40px;
line-height: 40px;
}
#home-cta-text sup {
position: relative;
height: 0;
line-height: 1;
vertical-align: baseline;
font-size: 49px;
display: inline;
margin: 0;
padding: 0;
bottom: 43px;
}
Can anyone tell me what's going on here?
EDIT: I just noticed that if I remove my #font-face font, the text wraps normally. What's going on here?
I'm having the exact same problem on safari 10+ with the same font. Works perfectly on all other browsers. Looks like a problem with Franchise Bold. I'm going to try downloading it again, hoping there's something wrong in the font files.
EDIT: Apparently I got the wrong files in my assets. Downloaded the font again from Weathersbee Type (http://www.weathersbeetype.com/fonts/franchise/) and it now works in Safari 10+ (and all other browsers).
try use not 'P' just use DIV, and use just text-align center
SOLUTION:
Remove font-family, font-size and color from the parent div.
EDIT: The problem occurs only when I press CTRL + F5
EDIT2: I tracked down the problem to .site-footer: position:absolute; .It seems that if I change it to relative the problem dissapears.
I'm getting a weird error on a website I'm currently developing.
There are 2 problems:
somethimes the text is not showing at all (though the border for the text is showing) but when I hover over it, it starts displaying.
The text is glitches Ex: instead of "SYDNEY" the text is "TZDOEZ" and I have to refresh the page or change the browser window dimensions to remove the problem.
Did someone else encountered the problem?
Just to be clear:
The text IS NOT the same color as the background.
The text is inserted by pure html not Javascript, PHP, etc
I use Open Sans font from Google Fonts.
It happens no matter what font I use.
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="full-width">
<div class="left">
<ul class="footer-list">
<li>Sydney <span>Tel: +00 0 000 0000</span></li>
</ul>
</div>
<div class="right">
<ul class="footer-list">
<li>Sydney</li>
</ul>
</div>
</div>
CSS:
.site-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #000000;
padding: 10px 20px;
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility;
font-size: 13px;
color: #bcbcbc;
}
.footer-list li {
display: inline-block;
padding: 0 9px;
border-right: 1px solid #666666;
}
.footer-list a, .footer-list span {
display: block;
color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
Have you tried removing text-rendering: optimizeLegibility; and seeing if the bug persists?
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;
}
I want to wrap an <a> around a div. When I add that, the border's colour remains the same orange the text is colored.
The orange turns to black when I toggle color rule in Chrome's developer tools, however I obviously don't want the viewer to be required to do the same.
Notice that only the Block Fuse project box has this issue, none of the other boxes do because they do not have an <a> tag.
I have reproduced this issue in:
Chrome Version 23.0.1271.95
Chrome Canary Version 25.0.1342.0
Here is the relavent html:
<a href="projects/blockfuse.html">
<div class="project">
<div class="projectTitle">Block Fuse</div>
<div class="projectDescription">Block Fuse is a game about knocking as many blocks onto the floor as possible.
<div class="projectImage"><img class="projectImage" src="images/BlockFuse.png"></img></div>
</div>
</div>
</a>
Here is the relavant css:
div.projectTitle {
text-align: center;
font-size: 20pt;
color: #F90;
padding: 20px 0px 15px 0px;
font-family: "Arial", "Helvetica", Sans-Serif;
border-radius: 20px 20px 0px 0px;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: black;
background-color: #444;
}
div.projectDescription {
height: 310px;
font-family: "Arial", "Helvetica", Sans-Serif;
font-size: 12pt;
color: #EEE;
text-shadow: 1px 1px 1px #000;
background-color: #777;
padding: 17px;
border-radius: 0px 0px 20px 20px;
}
Try it live on my website: http://www.rollingkinetics.com/index.html
I think the issue here is that you need to set the color for the a:visited selector. I did not see the issue initially, but i did after I clicked on the link.
I recommend to place the hyperlink inside the div. This makes a better behavior as I experienced.
(in this case the link will be applied for the children of the div and the outer wont get additional a:link color)
make text decoration none on hyper link just add this
a{
text-decoration:none;}