 |
|
|
 |
www.shebangwebsites.co.za
Joined: 4/4/2008
Posts: 325
|
|
|
Hi Armand.
Tried that - only works in IE browsers. In FF / Chrome / Safari / Opera the text sits below the image.
Jon
|
| |
|
|
 | |
|
|
 |
Joined: 9/16/2003
Posts: 787
|
|
|
mm itested it in forefox just now
you do need a good doctype otherwise its gets rendered in wrong mode
put this in the ascx skin right above you start the html of the skin
<script runat="server">
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim skinDocType as Control = Me.Page.FindControl("skinDocType")
If Not skinDocType is Nothing
CType(skinDocType, System.Web.UI.WebControls.Literal).Text="<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">"
End If
End Sub
</script>
Armand Datema
Get my new skin ( lots of design variations [18 headers, 30 titlebars, 30 breadcrumbs, 3 footers ], 50+ typography containers , 50+ page templates and an online theme builder for unlimited skin variations) Aura>
For all your skin conversions
2DNN
Follow me on Twitter
|
| |
|
|
| |
|
|
|
www.shebangwebsites.co.za
Joined: 4/4/2008
Posts: 325
|
|
|
Hi Armand
Thank you for your reply.
As it stands, your markup will display image left and text right in FF, but try add a whole lot of text... Like so:
<div style="margin-bottom:15px;">
<img style="float:left;margin-right:10px;" height="95" width="95" src="imgholder_95X95.gif"/>
<div style="float:left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>
<div style="clear:both;"></div>
Text displays below the image, as it does not a defined width. If you set a width for the text div, it works, but as I say above, this is for templates where I don't know the width.
|
| |
|
|
| |
|
|
|
Joined: 9/16/2003
Posts: 787
|
|
|
Hi
I did test with mega bundle of test but I checked you are right it worked in my dnngrid960.com css framework but not in standard clean html
I found this in my bookmarks
http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
Armand Datema
Get my new skin ( lots of design variations [18 headers, 30 titlebars, 30 breadcrumbs, 3 footers ], 50+ typography containers , 50+ page templates and an online theme builder for unlimited skin variations) Aura>
For all your skin conversions
2DNN
Follow me on Twitter
|
| |
|
|
| |
|
|
|
Joined: 9/16/2003
Posts: 787
|
|
|
the last suggestiion used widths as well, now you can set thsi thread to resoved ;)
tested in ie 5.5 and ie6 ( using ietester ) firefox, ie7, opera, chrome, safari
the hacks are for ie 6 and the * are for making sure other html elments align correctly as well so not just pure text also h1 h2 etc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
img {float:left;margin:10px;}
.content{overflow:auto;}
/* mac hide \*/
* html .content {height:1%}
/* end hide */
</style>
</head>
<body>
<div class="holder">
<img src="http://www.dotnetnuke.com/Portals/_default/Skins/Ultimo/images/DotNetNuke-Logo.gif" width="100" height="100" alt="Example image" />
<div class="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime pl
</div>
</div>
<div class="holder">
<img src="http://www.dotnetnuke.com/Portals/_default/Skins/Ultimo/images/DotNetNuke-Logo.gif" width="100" height="100" alt="Example image" />
<div class="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime pl
</div>
</div>
<div class="holder">
<img src="http://www.dotnetnuke.com/Portals/_default/Skins/Ultimo/images/DotNetNuke-Logo.gif" width="100" height="100" alt="Example image" />
<div class="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime pl
</div>
</div>
<div class="holder">
<img src="http://www.dotnetnuke.com/Portals/_default/Skins/Ultimo/images/DotNetNuke-Logo.gif" width="100" height="100" alt="Example image" />
<div class="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime pl
</div>
</div>
</body>
</html>
Armand Datema
Get my new skin ( lots of design variations [18 headers, 30 titlebars, 30 breadcrumbs, 3 footers ], 50+ typography containers , 50+ page templates and an online theme builder for unlimited skin variations) Aura>
For all your skin conversions
2DNN
Follow me on Twitter
|
| |
|
|
| |