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, 09: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-23-2012, 11:46 PM   #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: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
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
Old 11-25-2012, 10:24 PM   #3
GrannyGrump
Obsessively Dedicated...
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: 3,200
Karma: 34977556
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, 04: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, 10:20 PM   #5
Nabodita
Connoisseur
Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.
 
Nabodita's Avatar
 
Posts: 97
Karma: 44418
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, 07: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: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
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 04:10 PM
Problem with masthead image kindle3reader Kindle Formats 0 02-03-2011 04:29 PM
Epub Image Problem mets Calibre 5 09-21-2010 01:26 PM
Setting Image width on news feed Wiggles Calibre 2 08-13-2010 02:10 AM
Image problem mikeywilliams25 Sigil 1 10-18-2009 01:37 PM


All times are GMT -4. The time now is 05:47 AM.


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