display: none not working in ePub CSS

sladflob · 05-09-2019, 03:50 AM

I have a book that contains a number of <hr class="transition"/> elements. When I read the book using KOReader on my Kobo this results in a long horizontal line which annoys me. I can get rid of the problem by removing all the <hr../> elements, but I thought a "better" way would be to use "display: none" in the book's stylesheet.

The stylesheet already contains a block for .transition so I figured that inserting "display: none;" at the top of that block would do what I want, but for some reason this does nothing. Just wondering if anyone can shed any light on what's going on. Like I said, I know I can fix it by deleting the tags but I'd like to learn a bit more about ePubs by changing the CSS.

Thanks.

RbnJrg · 05-09-2019, 09:29 AM

Quote:

Originally Posted by sladflob

I have a book that contains a number of <hr class="transition"/> elements. When I read the book using KOReader on my Kobo this results in a long horizontal line which annoys me. I can get rid of the problem by removing all the <hr../> elements, but I thought a "better" way would be to use "display: none" in the book's stylesheet.

The stylesheet already contains a block for .transition so I figured that inserting "display: none;" at the top of that block would do what I want, but for some reason this does nothing. Just wondering if anyone can shed any light on what's going on. Like I said, I know I can fix it by deleting the tags but I'd like to learn a bit more about ePubs by changing the CSS.

Thanks.

Try inserting "display: none;" at the end of the class ".transition". That because if you add that line at the beginning, it could be possible that some lines after, inside the .transition class, is something like "display: block;" that would overwrite what you wrote at the starting. So, write the property "display: none;" AT THE END.

Turtle91 · 05-09-2019, 01:39 PM

^^^ What RbnJrg said...

The LAST style processed has priority unless the style has higher 'specificity'.

sladflob · 05-09-2019, 07:46 PM

Quote:

Originally Posted by RbnJrg

Try inserting "display: none;" at the end of the class ".transition".

Worked perfectly. Thanks!

05-09-2019, 03:50 AM	#1
sladflob Connoisseur Posts: 63 Karma: 10 Join Date: Feb 2013 Device: Kobo Touch, Aura One	display: none not working in ePub CSS I have a book that contains a number of <hr class="transition"/> elements. When I read the book using KOReader on my Kobo this results in a long horizontal line which annoys me. I can get rid of the problem by removing all the <hr../> elements, but I thought a "better" way would be to use "display: none" in the book's stylesheet. The stylesheet already contains a block for .transition so I figured that inserting "display: none;" at the top of that block would do what I want, but for some reason this does nothing. Just wondering if anyone can shed any light on what's going on. Like I said, I know I can fix it by deleting the tags but I'd like to learn a bit more about ePubs by changing the CSS. Thanks.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Buy Non working kindle voyage with a working Display/Digitizer.	SKK	Flea Market	2	06-24-2017 10:35 PM
Kindle Previewer: error converting from epub with specific CSS and `display: none`	arthurattwell	Kindle Formats	3	08-10-2016 08:42 AM
Display block ... why? (Question about CSS and Calibre)	NASCARaddicted	ePub	7	06-23-2013 09:26 PM
working with fonts in css	jayz	Kindle Formats	9	10-29-2012 04:09 PM
Override ePub CSS with userStyle.css?	barium	Sony Reader Dev Corner	11	07-16-2011 03:25 PM

05-09-2019, 01:39 PM	#3
Turtle91 A Hairy Wizard Posts: 3,347 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	^^^ What RbnJrg said... The LAST style processed has priority unless the style has higher 'specificity'.

Advert