So i am currently in the process of creating an EPUB e-book, it is near ready to be labeled complete, but i have an issue with ADE based readers(tested on BlueFire reader), where the text refuses to justify and aligns left instead(however center alignment works fine)
I have cleaned the css, and checked and rechecked the properties and i see no conflicting alignments in the CSS
I have tried Prestigio E-reader on android as well as kindlepreview on PC and both of those displayed fine
There is no enforced text alignment on Bluefire itself
Anyone got any sugestions?
CSS in question:
#font-face {
font-family:"Calibri";
font-style:normal;
font-weight:normal;
src : url("../Fonts/Calibri.TTF");
}
#font-face {
font-family:"Minion Pro";
font-style:normal;
font-weight:normal;
src : url("../Fonts/MinionPro-Regular.otf");
}
#font-face {
font-family:"Calibri";
font-style:italic;
font-weight:bold;
src : url("../Fonts/Calibri-BoldItalic.TTF");
}
#font-face {
font-family:"Calibri";
font-style:oblique;
font-weight:bold;
src : url("../Fonts/Calibri-BoldItalic.TTF");
}
#font-face {
font-family:"Calibri";
font-style:normal;
font-weight:bold;
src : url("../Fonts/Calibri-Bold.TTF");
}
#font-face {
font-family:"Calibri";
font-style:italic;
font-weight:normal;
src : url("../Fonts/Calibri-Italic.TTF");
}
#font-face {
font-family:"Calibri";
font-style:oblique;
font-weight:normal;
src : url("../Fonts/Calibri-Italic.TTF");
}
td, th {
border-style: solid;
border-width: 1px;
padding: 0.2em;
}
li {
display:block;
text-align: justify;
}
table {
border: 1px solid black;
border-collapse: collapse;
max-width: 80%;
margin: auto;
}
span.bold {
font-family:"Calibri", sans-serif;
font-style:normal;
font-weight:bold; !important
}
span.char-style-override-4 {
font-family:"Calibri", sans-serif;
font-style:italic;
}
span.char-style-override-14 {
text-decoration: underline;
}
/* _______________________________Pamats_________________________ */
body {
font-family : "Calibri", serif;
margin-left:3% ;
margin-right:3% ;
margin-top:5% ;
margin-bottom:3% ;
-epub-hyphens:auto;
-webkit-hyphens:auto;
}
#page {
margin :10pt;
}
h1 {
text-align: left;
font-size: 1.0em;
font-weight: normal;
}
/* ______________________________________paragrāfi___________________ */
p.Normal {
font-family:"Calibri";
font-size:1em;
font-style:normal;
font-weight:normal;
text-decoration : none;
font-variant : normal;
line-height : 1.25;
color : #000000;
text-indent : 1em;
margin : 0px;
page-break-after: avoid;
text-align: justify; !important
}
p.centrs {
text-align: center;
}
span.italic {
font-style:italic;
font-weight:normal;
}
span.bi {
font-style:italic;
font-weight:bold;
}
div.vestule p.Normal {
text-indent: 2em;
margin-left: 1em;
}
ul p.Normal {
text-indent: 0;
}
a {
color:#000000;
}
h2{
text-align: left;
font-size: 1em;
font-weight: normal;
}
image{
max-width:100%;
height:auto;
}
img{
max-width:100%;
height:auto;
}
The issue was, there were parse errors, i had placed !important after ";", issue is now resolved!
Related
I am having issues getting a background image to work using your conversion api.
Eg of the template file styling:
<meta charset="utf-8" />
<link href="https://use.typekit.net/mmg2zqw.css" rel="stylesheet" />
<style>
body, p, li, td, th, dt, dd { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; font-size:20px; color:#333; }
body { background: url(/templates/backgrounds/certificate-background.png) no-repeat; }
img { border:none; display:block; }
p { margin-top:0; font-size: 20px;}
span { margin-top:0; font-size: 24px; color: #78BE21;}
h1, h2, h3, h4, h5 { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; color:#555; }
h1 { font-size:68px; margin-top:10px; margin-bottom: 20px; }
h2 { font-size:52px; margin-top:5px; margin-bottom: 10px; color: #78BE21; }
h3 { font-size:30px; margin-top:5px; margin-bottom: 5px; }
h4 { font-size:18px; margin-top:5px; margin-bottom: 0; }
h5 { font-size:14px; margin-top:5px; margin-bottom: 0; }
Do I need to add a parameter to the api call to allow the image to work?
You are thinkting to put a minimum height to see a possible change ? Beacause if your tag contains nothing, so your background will not be visible.
Try this on your body :
body {
background-image: url('/templates/backgrounds/certificate-background.png') no-repeat;
width: 100%
min-heigth: 500px;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've noticed something quite strange, I can't seem to get h1 and button html elements aligned.
I've removed borders and paddings however there still seems to be a consistent misalignment. I am unsure what is happening, can someone please explain why this behavior is occurring? I have attached a picture of the end result:
<head>
<style>
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
Use verticle-align: top; instead of verticle-align: text-top; because verticle-align: text-top; effect only text. And there is a default border-width: 2px; to button so remove if you don't need.
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
<div>
<h1>Head</h1>
<button>Head</button>
</div>
if you wanna h1 tag and button together then here is your solve....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
margin-top:-4px;
margin-left: -4px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
</html>
Use this code it will be fine
button {
margin-top: 1px;
padding: 0px;
display: inline-block;
height: 30px;
width: 100px;
background: lightblue;
vertical-align: top;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin: 0px;
margin-top: 2px;
margin-left: 4px;
margin-bottom: 3px;
padding-top: 3px;
padding-left: 23px;
display: inline-block;
height: 24px;
width: 70px;
background: lightblue;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
Hello im building my wordpress site, and used contact form to build contact form. I have few questions.
Text in text area is one line, and when i click ENTER contact form try to send form. How to enable enters?
How to enable scrolling in text area?
When i typing text, only big letters appear, like when i using caps-lock, how to enable small letters also?
/*contact*/
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 20px;
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-right: 0 !important;
clear: right;
}
#media only screen and (max-width: 767px) {
.one-half, .one-third {
width: 100%;
margin-right: 0;
}
}
#name-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px
}
#mail-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px
}
#phone-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px;
}
#text-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px;
height:100px;
}
::placeholder {
color: white;
font-weight:900;
font-size: 15px;
font-family: Josefin Sans, sans-serif;
}
.wpcf7-form > p {
color: #FFFFFF;
font-family: Open Sans, sans-serif;
font-weight:900;
font-size: 15px;
}
.wpcf7-form input, .wpcf7-form textarea {
font-weight:900;
font-size: 15px;
color: #FFFFFF;
width: 100%;
font-family: Josefin Sans, sans-serif;
}
.wpcf7-form textarea {
font-weight:900;
font-size: 15px;
color: #FFFFFF;
font-family: Josefin Sans, sans-serif;
}
<div class="one-third">
[text* text-757 id:name-form placeholder "IMIĘ"]
</div>
<div class="one-third">
[tel tel-789 id:phone-form placeholder "TELEFON"]
</div>
<div class="one-third last">
[email* email-910 id:mail-form placeholder "E-MAIL"]
</div>
[text* text-757 id:text-form placeholder "WIADOMOŚĆ"]
[submit "Wyślij"]
I am newbie in coding so please be forgiving :)
You need to use <textarea> instead of <input type="text">.
You are also setting text-transform:uppercase; in the styles which will make all of the text uppercase. Remove that and it should fix your third problem.
I use fontsquirrel's & google's fonts and they work perfectly fine on desktop browsers (IE, safari,chrome, firefox).
But when it comes to mobile safari, specially ipad2 and iphone4, the font appears twice, meaning, it shows 2 times the same word as if it was twice the same text ! The problem is on the H1.
I tried using sans serif font and it's the same...
I tried to change the font-weight, font-size etc but it doesn't change anything.
body {
color:#FFF;
font-family: 'Raleway', sans-serif;
font-weight: normal;
/*font-family: 'Open Sans', sans-serif;*/
min-width:960px;
top:0;
left:0;
position:absolute;
height:100%;
width:100%;
margin:0;
background-size:cover;
}
.ie body {
filter: dropshadow(color=#000000, offx=0, offy=1); }
h1 {
font-size:88px;
text-align:center;
padding-top:30px;
font-weight:700;
font-family:'quicksandregular',arial, sans-serif;
}
#media screen and (max-width:768px){ /* tablettes */
body {
min-width: initial !important;
font-weight: normal; /* */
font-size: 68px; /* */
}
.wrapper{
width:100%;
}
.styled div {
margin-bottom:10px;
}}
#media screen and(max-width:420px){ /* tel */
body{
font-weight: normal; /* */
font-size: 68px; /* */
}
h1{
float:initial;
text-align: center;
margin-left:0px;
margin-bottom:0px;
}
#header {
width: 100%;
}
.styled div {
margin-bottom:10px;
font-size: 40px;
font-weight: normal;
text-align: center;
width:80px;
border-radius:80px;
height:80px;
}
#Content h2 {
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: center;
font-size: 29px;
font-weight: 300;
}
Many thanks for your help !!
Laëtitia
The browser is applying a bold font weight, which is causing the problem because there is no bold quicksand. All you have to do is set font-weight:normal; for text elements that are appearing twice.
Your problem is talked about at length here:
http://www.fontsquirrel.com/forum/discussion/277/webfonts-showing-up-twice/p1
I am having trouble editing links in a div. I would like the link text to be centered vertically inside it's black div. I would also like the box background to change to red on hover...
thanks so much for any assistance!
html:
<div id="footer_subscribe">
<input type="text" class="subscribe" value="Email Address" />
Subscribe
</div>
<div id="footer_facebook">
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" />
Become a Fan
</div>
<div id="footer_youtube">
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" />
Watch Us
</div>
css:
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
}
input.subscribe {
border:2px solid black;
margin:2px;
width:200px;
height:24px;
}
#footer_facebook {
background:#000;
width:155px;
height:35px;
float:left;
padding:0;
margin-left:5px;
}
#facebook_logo {
width:32px;
height:32px;
}
a.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.visited.footer_social {
color:#FFF;
}
a:link.hover.footer_social {
color:#F00;
}
http://jsfiddle.net/4os21tzf/
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
line-height: 33px;
}
#footer_subscribe:hover {
background:red;
}
#footer_facebook {
background: none repeat scroll 0% 0% #000;
width: 155px;
float: left;
padding: 0px;
margin-left: 5px;
line-height: 35px;
height: 35px;
}
#footer_facebook:hover {
background:red;
}
a.footer_social:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
font-style: normal;
text-decoration: none;
color: #FFF;
vertical-align: top;
padding-top: 10px;
}
a.footer_social:hover{
color: red;
}
JSFIDDLE DEMO
To change the colour of the link on hover?
a.footer_social:hover{
color:#F00;
}
To change the colour background on hover (link):
a.footer_social:hover{
color:#000000;
background-color:red;
}
Change the colour of the background (entire div)
#footer_facebook:hover{
background-color:red;
}
#footer_subscribe:hover
{
background:Red;
}
To change color add this to your CSS:
#footer_subscribe:hover
{
background-color:red;
}
#footer_facebook:hover
{
background-color:red;
}
For text alignment:
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
vertical-align: top;
}
use display:table; in parent div and use display: table-cell; vertical-align: middle; in link
#footer_subscribe {
display:table;
}
a.footer_social:link{
display: table-cell;
vertical-align: middle;
}
#footer_subscribe:hover{
background-color:red;
}
working jsFiddle Link
hope this works for you.