Quote:
Originally Posted by roland1
Here's some code from my book — list and tables stuff. But you can see, I'm jumping between measurement units —px,rem,%—and declaring font families. Comments?
(NOTE: the final output looked EXACTLY as I wanted it to in the reader; but the preview in at least one online store has destroyed my hopes of it translating universally—and that was only with a simple paragraph tag). NOTE 2:, I'm gonna lose the "rem" stuff in my next edition.
ul {
font-family:"adobe myriad pro","open sans","sans serif";
padding-left:0;
margin-left:0;
list-style-type: none;
}
ul li {
padding-left: 2.5rem;
background-image: url(../Images/checkbox_icon.png);
background-position: 0 3px;
background-size: 1.0rem 1.0rem;
background-repeat: no-repeat;
font-size:0.9em;
line-height: 140%;
margin:0.5rem
}
table.ipsfa {
font-family:"adobe myriad pro","open sans","sans serif";
border-collapse:collapse;
font-size:0.7rem;
line-height:130%;
margin:2rem auto;
}
table.ipsfa th, td {
border: 1px solid #888;
padding:8px;
height: 22px;
}
th {
background-color: #efefef;
letter-spacing:1px;
}
.numbered-list ol {
font-size:1rem;
font-family:"Adobe Myriad Pro","Sans Serif";
text-align:justify;
margin: 2rem 1% 1.5rem 0.75rem;
padding-left:1rem;
list-style-type:decimal;
}
.numbered-list li {
margin: 0.5rem auto;
padding-left:0.5rem;
}
|
Font-family is very wrong. Just use sans-serif
REM is very wrong. Just use em
Line-height is very wrong. Delete the lines
Margin: is very wrong Use the full margin like margin-top:
% is very wrong in your use case. Just use em
It's no wonder the preview doesn't work properly.