Space Around Image

[lloydmav]

I'm having a recurring problem with white space around any of my images in internet explorer but not having the same problem in firefox. I've tried setting all margins to 0, putting whitespace to normal in my styles etc but to no affect, I have attached screen shots of the image in question, it is the orange square image.

Above the image is a div with a top border of 2 pixels (as my section divider)and the image is placed directly below it and a flash object directly below that. A style has been applied to the image to indent it with a left margin.

Below is the html code around the image and also the stle applied to the image from my external style sheet


html code:

<div id="section2div">
<div id="section2topborder"></div>
<span style="width:478px; height:423px"><img src="images/title1_1.gif" alt="section 1 bullet" class="sectionbulletindent" /></span>
<p><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','160','height','135','class','sectionbulletindent','title','fr ee trial flash link','src','Flash/freetrial','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/freetrial' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="160" height="135" class="sectionbulletindent" title="free trial flash link">
<param name="movie" value="Flash/freetrial.swf" />
<param name="quality" value="high" />
<embed src="Flash/freetrial.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="160" height="135"></embed>
</object>
</noscript>
</p>
</div>

Related Styles:

#section2div {
width: 100%;
height: 200px;
vertical-align: top;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
white-space: normal;
}

.sectionbulletindent {
margin-left: 15px;
margin-top: 0px;
margin-bottom: 0px;
}

#section2topborder {
width: 470px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 2px;
border-top-style: dotted;
border-top-color: #999999;
}

[WebJoel]

for the class of the image (class="sectionbulletindent" ), -try adding "display:block;". See if this helps (untested).

-It looks to me as if you are using the inline-element "span" as a block-level element:

<span style="width:478px; height:423px"><img src="images/title1_1.gif" alt="section 1 bullet" class="sectionbulletindent" /></span>

A 'span' being "inline", cannot possess "height". That would come from the parent element (of which, there is not one here).

Change the "span" to a "p" and give that no-margin/no-padding, but whatever height you need.

[lloydmav]

thanks for the reply

I tried display block with no effect.

Also I'm not sure why there is span there as all I did was insert an image. I have removed this as even the height and width figures didn't make sense, the dimensions of the section2div are only 200(h) by 500(w). However after removing this there is no change to the display in IE. This is the code I currently have below, didn't quite understand the other change you suggested...

<div id="section2div">
<div id="section2topborder"></div>
<img src="images/title1_1.gif" alt="section 1 bullet" class="sectionbulletindent" />
<p><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','160','height','135','class','sectionbulletindent','title','fr ee trial flash link','src','Flash/freetrial','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/freetrial' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="160" height="135" class="sectionbulletindent" title="free trial flash link">
<param name="movie" value="Flash/freetrial.swf" />
<param name="quality" value="high" />
<embed src="Flash/freetrial.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="160" height="135"></embed>
</object>
</noscript>
</p>
</div>

[lloydmav]

bump

anyone?