No replies
hberdan
Offline
newbie
Last seen: 5 years 38 weeks ago
Timezone: GMT-1
Joined: 2009-01-06
Posts: 1
Points: 0

Hello everyone,

I have a question about floating images next to

enclosed text.

I have a photography blog on blogger and I use image rollovers to get my point across. I do them with a java script called Simple Swap. I float the image to the right or left and use them as examples.

The problem is that in Internet Explorer 7 the

enclosed text next to the image seems to extend its block over the image and it breaks my rollover. The text wraps like it should, but when the mouse is rolled over the image, the cursor never changes from an I beam to a pointer and the mousover event never fires.

When I try the rollovers with anything but IE they seem to work fine, but even IE's treatment doesn't seem to be consistent. My wife's computer runs IE 7 and its broken on her computer. On my computer I have IE 8 running in a virtual machine, and running in IE 7 mode it handles them just fine, but they break again when I switch back to IE 8. I don't have any way of testing with IE 6 or below.

I have tried a number of things to get the text block to respect the borders of the floated image such as enclosing the image in a floated

of fixed height and width, changing the overflow properties of the

block, and things like that, but nothing I have tried seems to work except for starting the text below the image.

Any insight on this would be appreciated.

The URL for a blog entry with a broken rollover is here.

The code for the rollover and my css (it's long but I am posting all of the styling) are here.

<p>I just wanted to point out one last thing before I wrap this up. There is another reason to get photo's as close to right the first time as possible. Take a look at this image below. </p>
<img class="floatleft" src="http://lh3.ggpht.com/_sZJtd8UH44Y/SWIrYFMArkI/AAAAAAAAAHo/lxFXxRqVjfY/DSC_4007.jpg?imgmax=800"  oversrc="http://lh6.ggpht.com/_sZJtd8UH44Y/SWIsfBS_6cI/AAAAAAAAAHs/U_20IaWFKdI/DSC_4007-2.jpg?imgmax=800"  ><p>This is a picture of the cathedral inside the Chateau De Versailles in Paris. As you can see it isn't very good. You can roll your mouse over and see what I did to try and fix it. The results are underwhelming, and for one important reason. Lightroom doesn't have a crappy composition tool. I can crop out whatever that is the upper left, but that won't fix all the incomplete columns or the slightly disorienting tilt it has going on. I show you this picture as an illustration of the fact that no amount of software can replace the skill of the photographer in taking the right picture. Sure you can fix color in some cases, and you can fix exposure some times, but the software doesn't decide when to press the shutter button.</p> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<title>A Picture is Worth a Thousand Questions.: Shutter Speed</title>
<style id='page-skin-1' type='text/css'><!--
/*
-----------------------------------------------
Blogger Template Style
Name:     Minima Black
Designer: Douglas Bowman
URL:      <a href="http://www.stopdesign.com" rel="nofollow">www.stopdesign.com</a>
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc">
<Variable name="linkcolor" description="Link Color"
type="color" default="#9ad">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#ccc">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#777">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#ad9">
<Variable name="bordercolor" description="Border Color"
type="color" default="#333">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#777">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#999">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#a7a">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right">
*/
/* Use this with templates/template-twocol.html */
body {
background:#444444;
margin:0;
color:#000000;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:#666666;
text-decoration:none;
}
a:visited {
color:#013640;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a img {
border-width: 1px solid;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:700px;
margin:50px auto 10px;
border:1px solid #000000;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid #000000;
text-align: center;
color:#7f7f7f;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal bold 220% Georgia, Times, serif;
}
#header a {
color:#7f7f7f;
text-decoration:none;
}
#header a:hover {
text-decoration:underline;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% Georgia, Times, serif;
color: #777777;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 700px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 98% Georgia, Times, serif;
}
#main-wrapper {
width: 520px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:normal bold 78% Georgia, Times, serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#999999;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #000000;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#999999;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#999999;
font-weight:bold;
}
.post h3 strong, .post h3 a:hover {
text-decoration:underline;
}
.post-body {
margin:0 0 .75em;
line-height:1.2em;
}
.post-body blockquote {
font-style: italic;
margin: 2em;
max-width: 350px;
padding: 0em 1em 0em .75em;
border-left: 2px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
/*---
Webkit rendered the borders as expected, but it was the only one. This section standardizes display across browsers for uniformity only.
---*/
blockquote.imageright{
font-style: italic;
margin: 2em 0em 2em 2em;
max-width: 350px;
padding: 0em 1em 0em .75em;
border-left: 2px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
blockquote.imageleft{
font-style: italic;
margin: 2em 2em 2em 0em;
max-width: 350px;
padding: 0em 1em 0em .75em;
border-left: 2px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
/*---End Webkit Workaround---*/
img.floatleft {
float: left;
margin: .2em .5em;
border: 1px solid;
}
img.floatright {
float: right;
margin: .2em .5em;
border: 1px solid;
}
img.floatleft.noborder{
border: 0px;
}
img.floatright.noborder{
border: 0px;
}
.post-footer {
margin: .75em 0;
color:#999999;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 78% Georgia, Times, serif;
line-height: 1.4em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border: 1px solid;
}
.post p {
margin: 1em 0em;
outline: 1px solid #ffffff;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #999999;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: #999999;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
padding-left:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted #000000;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0;
padding: 4px;
border: 1px solid #000000;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 78% Georgia, Times, serif;
color: #999999;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: normal normal 78% Georgia, Times, serif;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
 
--></style>