CSS Problems

Ti-Ron · 04-24-2012, 04: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:

Quote:

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:

Quote:

<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, 04: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, 05: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, 05: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:

Code:

padding-left: 0px;

Try experimenting with larger values. For example:

Code:

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:

Code:

list-style-type:disc;

mncowboy · 04-24-2012, 05: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, 12: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, 07:37 PM

Moderator Notice
Agreed. Moving to EPUB

Ti-Ron · 04-27-2012, 08:16 AM

@huebi and @theducks: Sorry for posting it in the wrong forum, my bad.

Ti-Ron · 04-27-2012, 08: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, 08: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, 04: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

Code:

<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, 06:20 PM

Doitsu: Whoa, nice! Thanks a lot!

04-24-2012, 05:48 PM	#4
Doitsu Grand Sorcerer Posts: 5,584 Karma: 22735033 Join Date: Dec 2010 Device: Kindle PW2	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: Code: padding-left: 0px; Try experimenting with larger values. For example: Code: 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: Code: list-style-type:disc;

04-25-2012, 07:37 PM	#7
theducks Well trained by Cats Posts: 29,818 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Moderator Notice Agreed. Moving to EPUB Last edited by Jellby; 04-26-2012 at 04:43 AM.

04-28-2012, 04:11 AM	#11
Doitsu Grand Sorcerer Posts: 5,584 Karma: 22735033 Join Date: Dec 2010 Device: Kindle PW2	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 Code: <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">◦ 5 oz (150 g) de fromage de chèvre</p> <p class="list">▪ 5 oz (150 g) de fromage de chèvre</p> <p class="list">▫ 5 oz (150 g) de fromage de chèvre</p> <p class="list">▸ 5 oz (150 g) de fromage de chèvre</p> <p class="list">▹ 5 oz (150 g) de fromage de chèvre</p> <p class="list">○ 5 oz (150 g) de fromage de chèvre</p> <p class="list">● 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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Override ePub CSS with userStyle.css?	barium	Sony Reader Dev Corner	11	07-16-2011 03:25 PM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM
eCub/Jutoh CSS problems	thames	ePub	8	06-01-2010 07:25 AM
Help! Newbie having problems converting HTML/CSS files	jackie_w	Calibre	6	09-14-2009 04:53 PM
Problems generating ePub from HTML/CSS	AlexBell	Calibre	3	07-17-2009 05:10 AM

04-24-2012, 04:58 PM	#2
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	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

04-24-2012, 05:28 PM	#3
Ti-Ron Connoisseur Posts: 80 Karma: 1023042 Join Date: Nov 2011 Device: Kobo Touch, iPad	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 ?

04-24-2012, 05:50 PM	#5
mncowboy Wanderer Posts: 106 Karma: 472218 Join Date: Jan 2011 Device: Kindle 3, PaperWhite 2	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!

04-25-2012, 12:08 PM	#6
huebi Zealot Posts: 121 Karma: 5070 Join Date: Dec 2010 Device: none	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.

04-27-2012, 08:16 AM	#8
Ti-Ron Connoisseur Posts: 80 Karma: 1023042 Join Date: Nov 2011 Device: Kobo Touch, iPad	@huebi and @theducks: Sorry for posting it in the wrong forum, my bad.

04-27-2012, 08:23 AM	#9
Ti-Ron Connoisseur Posts: 80 Karma: 1023042 Join Date: Nov 2011 Device: Kobo Touch, iPad	@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...

04-27-2012, 08:39 AM	#10
Ti-Ron Connoisseur Posts: 80 Karma: 1023042 Join Date: Nov 2011 Device: Kobo Touch, iPad	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!

04-29-2012, 06:20 PM	#12
Ti-Ron Connoisseur Posts: 80 Karma: 1023042 Join Date: Nov 2011 Device: Kobo Touch, iPad	Doitsu: Whoa, nice! Thanks a lot!

Advert

Advert