View Full Version : CSS Problems


Ti-Ron
04-24-2012, 05:47 PM
Okay, I'm trying here and I hope it's the good place to post it. I'm working on a template for a receipes book in ePub format for a friend of mine. Everything goes weel escept for two little (damn) things. I'm trying to have specific field for every aspect of the receipe (ingredients, preparation, cooking instructions...) When I look in Sigil everything is perfect but when put into my Kobo, I lost the circle in front of the ingredients and the text is sooooo small even if I put the font zine at max. What am I doing wrong here?

Here's my CSS style sheet:

ul {
list-style-type: circle;
font-family: serif;
line-height: 1,50 em;
font-size: 1.00 em;
font-weight: normal;
font-style: italic;
text-align: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1.00px;
margin-left: 0px;
padding-top: 0.5em;
padding-right: 0px;
padding-bottom: 0.5em;
padding-left: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgb(231, 224, 206);
border-bottom-color: rgb(231, 224, 206);
}


linked to:
<ul>
<li>5 oz (150 g) de fromage de chèvre</li>

<li>3 cuillères à table (45 ml) de pacanes (ou noix de Grenoble) hachées</li>

<li>1 rôti 2 à 3 livres (1 à 1,5 kg) de longe de porc</li>

<li>3/4 de tasse (180 ml) de sirop d'érable</li>

<li>1/4 de tasse (60 ml) d'eau</li>

<li>sel et poivre noir du moulin, au goût</li>
</ul>

I've tried many things but each time the test is unreadeable.

Can you help me, please?

p.s. I'm not programer, I'm learning here! Be gentle with me! :)

DaleDe
04-24-2012, 05:58 PM
1,50 em ? This is not a correct size for the line height. It may be that Kobo does not support the circle. Leave it out of the CSS and see if you get the solid dot. Note that there is not supposed to be a space between the value and the units, for example 1em;

Dale

Ti-Ron
04-24-2012, 06:28 PM
If I remove the "list-style-type: circle;" there's still nothing.

So 1,50em is wrong? I did it with every epub I did before and I have a couple of "profesionnal" epub that used that value. That is why I took it. Wich valu is more appropriate? 1,00 em ?

Doitsu
04-24-2012, 06:48 PM
As Dale has already pointed out, there's no space between the value and the unit, and you'll have to use decimal points not decimal commas.

As for the missing bullets, they're most likely caused by this line:
padding-left: 0px;
Try experimenting with larger values. For example:
padding-left: 0.5px;

Since empty bullets maybe a bit hard to see on an eInk display, I'd recommend using discs or other symbols instead:

list-style-type:disc;

mncowboy
04-24-2012, 06:50 PM
It is the padding-left that is hiding the dots. Even with padding-left:0 the circle is hidden.
Just delete the padding-left line and you should be good to go.
No idea why!
Bob

Doitsu got there first!

huebi
04-25-2012, 01:08 PM
And what does this have to do with Sigil? Those postings are the reason for me to stay more and more away from this forum. Why hot havong just one "All" forum.

theducks
04-25-2012, 08:37 PM
Agreed. Moving to EPUB

Ti-Ron
04-27-2012, 09:16 AM
@huebi and @theducks: Sorry for posting it in the wrong forum, my bad.

Ti-Ron
04-27-2012, 09:23 AM
@Doitsu: Thanks for you help.
@mncowboy: Thanks, now with no padding-left I can see the disc! :)

Dots are here, but the text is still sooooo small, I can't read it... :(

Ti-Ron
04-27-2012, 09:39 AM
Just to do an update. I'vre tried with the Kindle Previewer. All the devices show me the list with readeable text. The dots apper but only in the non eink devices.
Still confused!

Doitsu
04-28-2012, 05:11 AM
Since the Kindle fonts on eInk devices support a number of characters commonly used for lists, you could fake a bullet list by using the actual characters.

The following characters are natively supported on eInk Kindles and will work without font embedding:

◦ 5 oz (150 g) de fromage de chèvre
▪ 5 oz (150 g) de fromage de chèvre
▫ 5 oz (150 g) de fromage de chèvre
▸ 5 oz (150 g) de fromage de chèvre
▹ 5 oz (150 g) de fromage de chèvre
○ 5 oz (150 g) de fromage de chèvre
● 5 oz (150 g) de fromage de chèvre


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.list {padding-left: 1px;}
p {margin-bottom:0; margin-top:0;}
</style>
</head>
<body>
<h2 id="heading_id_2">Bullet test</h2>
<p class="list">◦&nbsp;5 oz (150 g) de fromage de chèvre</p>
<p class="list">▪&nbsp;5 oz (150 g) de fromage de chèvre</p>
<p class="list">▫&nbsp;5 oz (150 g) de fromage de chèvre</p>
<p class="list">▸&nbsp;5 oz (150 g) de fromage de chèvre</p>
<p class="list">▹&nbsp;5 oz (150 g) de fromage de chèvre</p>
<p class="list">○&nbsp;5 oz (150 g) de fromage de chèvre</p>
<p class="list">●&nbsp;5 oz (150 g) de fromage de chèvre</p>
</body>
</html>


Unfortunately, ADE doesn't natively support them. But they'll work if you embed a font.

Ti-Ron
04-29-2012, 07:20 PM
Doitsu: Whoa, nice! Thanks a lot! :)