Block Spacing in IE7

[the.ronin]

Does anyone know how to fix the odd spacing between the left, middle, and right block areas in IE7? Please see the image below. Notice how the space between the left and middle block areas are clearly bigger than the spacing between the middle and right block areas ...



In Firefox 3, the spacing is fine.

[thomas.d]

Hi t.r,

you've obviously fixed it.

What was the matter?

[the.ronin]

Not sure if I have.

I did notice that when the flash movie was not embedded, the spacing was fine. So I came across a "more compliant" way of embedding a flash movie - basically using just the <object> tag and not the <embed> tag which, as I understand, is really meant to accommodate Netscape mostly. That seemed to do the trick. However, the flash movie appears abnormally small now. When I try to increase the size, I run into the sizing issue again.

So I will continue to noodle with it.

[the.ronin]

Yup, I am definitely still having issues.

I've traced down to the padding in the css. I tried creating a new style based on the portal-panel and called it "wwatch-panel." Note that the padding has been set to 0px.

Code: Select all

.wwatch-panel {
	background-color: #D9DADC;
	color: #28313F;
	margin-bottom: 4px;
	padding: 0 0px;
	color: #3f3f3f;
}

When I do this, the flash movie is flush up against the edges and the spacing between blocks is perfect, but now ...



... as you can see, I've lost the background and the corners. I have tried cloning the other portal-panel styles (h3, p, h4) as wwatch-panel with little success. Any advice would be greatly appreciated.

For reference here is the block code:

Code: Select all

<!-- WaveWatch Surf Report Block -->
<!-- Created by Tribal Surf (c) 2008 -->
<!-- http://www.tribalsurf.net -->
<!-- http://www.wavewatch.com/-->
<!-- Special thanks to Kevin of http://www.board3.de/-->

<div class="wwatch-panel">
	<div class="inner">
		<span class="portal-corners-top"><span></span></span>
			<h3>Surf Report</h3>
			<!-- IF not S_USER_LOGGED_IN -->
			<center><img src={WWATCH_LOGO} width="100" height="13" /><br /><br />
			<strong><a href="{U_REGISTER}">Register</a></strong> to access<br />regional surf reports.<br />
			</center>
			<!-- ENDIF -->
			<!-- IF S_NO_WWATCH and S_USER_LOGGED_IN -->
			<center><img src={WWATCH_LOGO} width="100" height="13" /><br /><br />
			Set regional surf reports in the<br /><strong><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a></strong><br />
			</center>
			<!-- ENDIF -->
			<!-- IF S_SET_WWATCH -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="180" height="210"><param name="movie" value="http://www.wavewatch.com/flash_tools/current_magnet.swf?theLocation={WWATCH_REGION}&city={WWATCH_LOC}" /><param name="quality" value="high" /><param name="wmode" value="transparent"><embed src="http://www.wavewatch.com/flash_tools/current_magnet.swf?theLocation={WWATCH_REGION}&city={WWATCH_LOC}" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="180" height="210"></embed></object>
			<!-- ENDIF -->
		<span class="portal-corners-bottom"><span></span></span>
	</div>
</div>
<br style="clear:both" />

[Huor]

Ahoy,

what i recognized myself is that the flash code is not w3c compatible - so I searched for a solution and found this site http://www.alistapart.com/stories/flashsatay

doing the stuff mentioned there makes my site again w3c valid - and i didn't have recognized any troubles with the spacing even not in IE7...
Maybe in general it has something to do with the w3c validity

[the.ronin]

Thank you, Huor.

I actually came across that same article myself. I believe the non-compliance stems from the Netscape specific coding making use of the embed tag in addition to the object tag.

After a few more head-against-keyboard pounding, I blamed the spacing on the css padding. It was forcing the flash movie outside of the block and creating the spacing issue. What I ended up doing was to clear out the div after the top corners using br clear both. While that fixed the spacing issue in IE by letting the flash movie sit flush against the sides of the block, it created a spacing issue just above the flash movie in FF!! To address that, I forced a div style of margin-top at negative 10px. That fixed spacing on all sides for FF and IE ... and looks fine on Safari and Chrome (decided, what the heck, let’s test it all).

Perhaps it is ghetto hack coding but it works ...

Code: Select all

<!-- WaveWatch Surf Report Block -->
<!-- Created by Tribal Surf (c) 2008 -->
<!-- http://www.tribalsurf.net -->
<!-- http://www.wavewatch.com/-->
<!-- Special thanks to Kevin of http://www.board3.de/-->

<div class="portal-panel">
<div class="inner">
<span class="portal-corners-top"><span></span></span>
			<h3>Surf Report</h3><br style="clear:both" />
			</div></div>
			<div style="margin-top: -10px; background-color:#D9DADC;">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="180" height="153"><param name="movie" value="http://www.wavewatch.com/flash_tools/current_magnet.swf?theLocation=7&city=S. CA (Orange County)" /><param name="quality" value="high" /><param name="wmode" value="transparent"><embed src="http://www.wavewatch.com/flash_tools/current_magnet.swf?theLocation=7&city=S. CA (Orange County)" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="180" height="153"></embed></object>
						</div>
<div class="portal-panel">
<div class="inner">
<br />
<span class="portal-corners-bottom"><span></span></span>
</div>
</div>
<br style="clear:both" />