some css & ie problems. Any helping hand? :D

geodeath

12-15-2006, 12:22 PM

Hello all!

I am currently developing a site using joomla.
However, joomla has nothing to do with my problem.

After trying my site for days in firefox, i guess it came as no surprise that ie shows some things differently.

I managed to find and overcome 2 of the 3 problems i have, but one still remains.

In the following code, i have a 2 column layout, where on the first column is a flash menu on top (totally top, 0 margin, so its top side is stuck on the border)
, some content and a flash banner at the bottom (totally bottom, so the bottom side of the banner is stuck to the border). The second column has a flash banner again, which is narrow in width, but exactly as tall as the other column, so it fits nicely!

the following code words flawlessly in firefox, but in internet explorer 6 & 7 it displays some white space between the flash files so they are not stuck on the border anymore.

You can even copy & paste the code into dreamweaver or something and test it on both browsers. Although the links do not work, you can easily spot the white space. If its absolutely nessecary i will post the links but i think its easily spottable.

Thanks in advance for any help.
I am a css newbie and for this project i am forced to use inline css, so forgive me for the ugly code :D

It might be something i just dont see, my brain is wrecked after hours of searching!

<table cellspacing="0" cellpadding="0" align="left" style="border: 0px none ; margin: 0px; padding: 0px; width: 819px; height: 544px;">
<tbody>
<tr>

<td style="border: 1px solid rgb(153, 153, 153); margin: 0px; padding: 0px; width: 630px; height: 542px;">

<div align="center" style="width: 630px; height: 431px;">
<div align="center" style="width: 630px; height: 20px; margin-top: 0px; padding-top: 0px;">

//FLASH MENU ON TOP
<object width="630" height="20" align="top" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="menu">
<param name="allowScriptAccess" value="sameDomain" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"/>
<param name="movie" value="http://www.somedomain.com/folder/images/stories/menu.swf" /><param name="quality" value="high" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="20" align="middle" src="http://www.somedomain.com/folder/images/stories/menu.swf" quality="high" salign="lt" bgcolor="#ffffff" name="menu" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</div>
<div align="left" style="margin: 0px; padding: 0px; width: 100%;">
<div style="margin-left:8px !important; margin-left:4px;">

some content here

</div>
</div>
</div>

<div align="left" style="border: 0px none ; margin: 0pt; padding: 0pt; clear: both; width: 630px; height: 111px;">

//FLASH BANNER HERE
<object width="630" height="111" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="footer 01">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://somedomain.com/folder/images/stories/footer1.swf" /><param name="quality" value="high" /><param name="salign" value="lb" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="111" align="middle" src="http://somedomain.com/folder/images/stories/footer1.swf" quality="high" salign="lb" bgcolor="#ffffff" name="footer 01" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</div>
</td>

<td valign="top" align="left" style="margin: 0px; width: 819px; padding-left: 7px; padding-top: 0px; padding-bottom: 0px;">
<div align="left" valign="top" style="margin: 0px; padding: 0px; width: 176px;">

//FLASH BANNER HERE
<object width="176" height="544" align="left" id="footer" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param value="sameDomain" name="allowScriptAccess" />
<param value="http://somedomain.com/estelia/images/stories/column.swf" name="movie" /><param value="high" name="quality" /><param value="#ffffff" name="bgcolor" /><embed width="176" height="544" align="left" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="footer" bgcolor="#ffffff" quality="high" src="http://somedomain.com/estelia/images/stories/column.swf" />
</object>
</div>
<br />
</td>
</tr>
</tbody>
</table>

koyama

12-17-2006, 07:35 AM

At one point you have a table cell having some left padding. This is definitely what is causing the problem. You should remove this padding. Dreamweaver has probably altered the width of other elements to compensate for this padding. So you should check for mismatches in width's other places.

It may be a good idea to give some elements a background color while doing this. You can then clearly see where things go wrong.

<td valign="top" align="left" style="margin: 0px; width: 819px; padding-left: 7px; padding-top: 0px; padding-bottom: 0px;">

Let me know whether you succeed or not. Good luck with your CSS studies.:)

geodeath

12-22-2006, 11:15 AM

thanks for the reply.

However, changing this one property didnt help at all.
After all, my problem is with height, not width.
If you want, i can post a sceenshot or the whole code.

:)

ahallicks

12-22-2006, 11:43 AM

Hmm... in Firefox no border appears on the bottom of the left part and it does have some padding because the body automatically has padding in both browsers so you'll need to set padding: 0 in the body of the page.

As for this white gap... I can't spot it. The only difference I noticed was that in IE the left box was pushed down a few more pixels than in FF, which is fixed by the above!

And WHY are you using div within tables? Surely it's best to use one or the other, and definitely best to use CSS to position and style everything. You may not have quite so many problems then!

ahallicks

12-22-2006, 12:03 PM

Put this into Dreamweaver and see what you get

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 820px;
height: auto;
}

#leftpart {
width: 630px;
height: auto;
float: left;
}

#leftpane {
width: 630px;
height: 400px;
float: left;
border: 1px solid #000;
}

#rightpane {
width: 180px;
height: 546px;
float: left;
border: 1px solid #000;
}

#flashbanner {
width: 630px;
height: 144px;
float: left;
border: 1px solid #000;
}

.content {
padding-top: 20px;
}

</style>

</head>

<body>
<div id="wrapper">

<div id="leftpart">

<div id="leftpane">

//FLASH MENU ON TOP


<div class="content"> some content here </div>
</div>

<div id="flashbanner">
//FLASH BANNER HERE

</div>
</div>

<div id="rightpane">

//FLASH BANNER HERE


</div>

</div>

</body>
</html>

geodeath

12-23-2006, 09:08 AM

the code you posted works great!
Thanks for converting it all to div/css, however, when i applied the correct widths/heights and loaded the flash files, it seems the bottom flash banner is not aligned to the bottom. You ve seen my code, and its nothing close to yours, so i tried to make it align, but i am not sure how.

i ve posted the code below with the links as well so you can see what i mean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 820px;
height: 544px;
}

#leftpart {
width: 630px;
height: 543px;
float: left;
border: 1px solid #999;
}

#leftpane {
width: 630px;
height: 410px;
float: left;
}

#rightpane {
width: 176px;
height: 544px;
float: left;
border: 0px solid #fff;
margin-left: 8px;
}

#flashbanner {
width: 630px;
height: 111px;
float: left;
border: 0px solid #000;
}

.content {
padding-top: 20px;
}

</style>

</head>

<body>
<div id="wrapper">

<div id="leftpart">

<div id="leftpane">

<object width="630" height="20" align="top" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="menu">
<param name="allowScriptAccess" value="sameDomain" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"/>
<param name="movie" value="http://www.somedomain.com/folder/images/stories/menu.swf" /><param name="quality" value="high" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="20" align="middle" src="http://www.somedomain.com/folder/images/stories/menu.swf" quality="high" salign="lt" bgcolor="#ffffff" name="menu" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

<div class="content"></div>
</div>

<div id="flashbanner">
<object width="630" height="111" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="footer 01">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://triaexperience.com/estelia/images/stories/footer1.swf" /><param name="quality" value="high" /><param name="salign" value="lb" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="111" align="middle" src="http://triaexperience.com/estelia/images/stories/footer1.swf" quality="high" salign="lb" bgcolor="#ffffff" name="footer 01" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>

<div id="rightpane">
<object width="176" height="544" align="left" id="footer" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param value="sameDomain" name="allowScriptAccess" />
<param value="http://triaexperience.com/estelia/images/stories/column.swf" name="movie" /><param value="high" name="quality" /><param value="#ffffff" name="bgcolor" /><embed width="176" height="544" align="left" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="footer" bgcolor="#ffffff" quality="high" src="http://triaexperience.com/estelia/images/stories/column.swf" />
</object>

</div>

</div>

</body>
</html>

Oh, have i said thanks you again? :D

George