Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 11-23-2012, 10:13 PM   #1
jobalcaen
Junior Member
jobalcaen began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Oct 2012
Location: Winnipeg, Canada
Device: Sony PRS-505
problem with floating image and relative width

Hello Everyone,

I'm trying to float an image with a max-width of 50% but its not working correctly. The following code works well in ibooks and firefox epubreader (but it ends up filling the entire page in ADE, PRS-505,aldiko :

Code:
  <div><img alt="sage gemme" src="../Images/pic0002.png" style="float: right; max-width:50%;" /></div>
It works if I change max-width to width, but then if I view the book in fullscreen in ADE it ends up getting stretched.

Any input is appreciated.

Thanks
jobalcaen is offline   Reply With Quote
Old 11-24-2012, 12:46 AM   #2
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,335
Karma: 3943904
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
For what it is worth here is what I use to float text round a drop cap image:

CSS
div.illustrationL {
margin: 0; padding: 0 0.25em 0 0;
/* border: 1px solid black; */
width: 33%;
float: left;
}
div.illustrationL img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
} /* With thanks to Elizabeth Castro */


HTML
<div class="illustrationL">
<img src="images/ch01cap.jpg"
alt="alt text"/>
</div>

It works and validates, and is taken from Elizabeth Castro's HTML, XHTML, and CSS from Peach Pit Press.
AlexBell is offline   Reply With Quote
 
Advertisement
Old 11-25-2012, 11:24 PM   #3
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 570
Karma: 2673214
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
I don't know if it is worth anything as advice, but also I usually set a maxwidth in pixels for images so they can't upsize too much. At most, 25% bigger than the native size. It might not be a "best practice" but keeps my images from fuzzing out and looming ominously.
GrannyGrump is offline   Reply With Quote
Old 11-27-2012, 05:59 PM   #4
jobalcaen
Junior Member
jobalcaen began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Oct 2012
Location: Winnipeg, Canada
Device: Sony PRS-505
Great thanks this worked perfectly
jobalcaen is offline   Reply With Quote
Old 08-15-2013, 11:20 PM   #5
Nabodita
Connoisseur
Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.Nabodita shines like a glazed doughnut.
 
Nabodita's Avatar
 
Posts: 76
Karma: 8640
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Quote:
Originally Posted by AlexBell View Post
For what it is worth here is what I use to float text round a drop cap image:

CSS
div.illustrationL {
margin: 0; padding: 0 0.25em 0 0;
/* border: 1px solid black; */
width: 33%;
float: left;
}
div.illustrationL img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
} /* With thanks to Elizabeth Castro */


HTML
<div class="illustrationL">
<img src="images/ch01cap.jpg"
alt="alt text"/>
</div>

It works and validates, and is taken from Elizabeth Castro's HTML, XHTML, and CSS from Peach Pit Press.
You just saved my sanity. Thank you!
Nabodita is offline   Reply With Quote
Old 08-17-2013, 08:53 AM   #6
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,335
Karma: 3943904
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
Quote:
Originally Posted by Nabodita View Post
You just saved my sanity. Thank you!
You're very welcome. I've learned a lot from others on MobileRead, and it's a pleasure to be able to pass some of that knowledge on.
AlexBell is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
weird image problem radiocure Conversion 8 07-10-2011 05:10 PM
Problem with masthead image kindle3reader Kindle Formats 0 02-03-2011 05:29 PM
Epub Image Problem mets Calibre 5 09-21-2010 02:26 PM
Setting Image width on news feed Wiggles Calibre 2 08-13-2010 03:10 AM
Image problem mikeywilliams25 Sigil 1 10-18-2009 02:37 PM


All times are GMT -4. The time now is 06:17 AM.


MobileRead.com is a privately owned, operated and funded community.