Question about ADE

crutledge · 04-14-2013, 02:14 PM

I have the following definition in the CSS:

Code:

.centerbox{
width:50%;
padding:10px
font-size : 90%;
margin-left:auto;
margin-right:auto;
margin-bottom:1em;
}

It displays properly centered on the page in Sigi, Calibre ePub reader, Kindle, and Sony but in ADE it is left justified. See attached images.

Is this a problem with ADE or have I missed something?

Thanks

Terisa de morgan · 04-14-2013, 02:51 PM

Where is the alignment in that definition?

I mean, for alignment I think you need:

Code:

text-alignment: center;

crutledge · 04-14-2013, 02:58 PM

Quote:

Originally Posted by Terisa de morgan

Where is the alignment in that definition?

I mean, for alignment I think you need:

Code:

text-alignment: center;

I don't wish to center the text - only the block.

PeterT · 04-14-2013, 03:08 PM

Faulty css ? Missing ; on

Code:

padding:10px

Jellby · 04-14-2013, 03:12 PM

Quote:

Originally Posted by crutledge

Code:

.centerbox{
margin-left:auto;
margin-right:auto;
}

That's the part that's centering the block, and the part that doesn't work in ADE, because, according to the ePub spec:

"Reading Systems may set the value of any margin property whose specified value is auto to 0."

and it seems ADE just chooses to do that, there's not much we can do.

But, since you are using a relative width, anyway (width:50%), you can get the desired effect with:

Code:

margin-left:25%;
margin-right:25%;

(actually, I'm surprised it works in the Sony, which version is it?)

sellew · 04-14-2013, 03:14 PM

Quote:

Originally Posted by crutledge

I have the following definition in the CSS:

Code:

.centerbox{
width:50%;
padding:10px;
font-size : 90%;
margin-left:auto;
margin-right:auto;
margin-bottom:1em;
}

It displays properly centered on the page in Sigi, Calibre ePub reader, Kindle, and Sony but in ADE it is left justified. See attached images.

Is this a problem with ADE or have I missed something?

Thanks

Please note there is a semicolon missing in the 3rd line of your code. ADE will ignore the rest of the stylesheet if it finds any tiny error or mistype.

crutledge · 04-14-2013, 04:45 PM

Quote:

Originally Posted by Jellby

That's the part that's centering the block, and the part that doesn't work in ADE, because, according to the ePub spec:

"Reading Systems may set the value of any margin property whose specified value is auto to 0."

and it seems ADE just chooses to do that, there's not much we can do.

But, since you are using a relative width, anyway (width:50%), you can get the desired effect with:

Code:

margin-left:25%;
margin-right:25%;

(actually, I'm surprised it works in the Sony, which version is it?)

That did it. Thanks very much.

Charlie

Toxaris · 04-15-2013, 03:11 AM

You can also use this:

.center{text-align: center;}
.centerbox{width:50%; padding:10px font-size : 90%; margin-bottom:1em; }

<div class="center"><p class="centerbox">This text will be left-aligned, but centered in a block.</p></div>

04-14-2013, 02:14 PM	#1
crutledge eBook FANatic Posts: 18,301 Karma: 16078357 Join Date: Apr 2008 Location: Alabama, USA Device: HP ipac RX5915 Wife's Kindle	Question about ADE I have the following definition in the CSS: Code: .centerbox{ width:50%; padding:10px font-size : 90%; margin-left:auto; margin-right:auto; margin-bottom:1em; } It displays properly centered on the page in Sigi, Calibre ePub reader, Kindle, and Sony but in ADE it is left justified. See attached images. Is this a problem with ADE or have I missed something? Thanks Attached Thumbnails

04-14-2013, 02:51 PM	#2
Terisa de morgan Grand Sorcerer Posts: 6,686 Karma: 12595249 Join Date: Jun 2009 Location: Madrid, Spain Device: Kobo Clara/Aura One/Forma,XiaoMI 5, iPad, Huawei MediaPad, YotaPhone 2	Where is the alignment in that definition? I mean, for alignment I think you need: Code: text-alignment: center;

04-14-2013, 03:08 PM	#4
PeterT Grand Sorcerer Posts: 13,698 Karma: 79983758 Join Date: Nov 2007 Location: Toronto Device: Libra H2O, Libra Colour	Faulty css ? Missing ; on Code: padding:10px

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
ADE Registry Question	vanillabean	ePub	4	05-30-2012 08:06 AM
ADE question	ButterflyBill	ePub	2	10-01-2011 01:20 AM
Dumb ADE question	Catlady	General Discussions	23	08-04-2011 12:05 PM
PRS-300 Newbie question about ADE	luthier58	Sony Reader	7	06-07-2010 05:23 PM
Another question about ADE	crutledge	Sigil	0	05-21-2010 06:03 PM

04-15-2013, 03:11 AM	#8
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	You can also use this: .center{text-align: center;} .centerbox{width:50%; padding:10px font-size : 90%; margin-bottom:1em; } <div class="center"><p class="centerbox">This text will be left-aligned, but centered in a block.</p></div>

Advert

Advert