CSS - IE Layout Issue

kaykills

07-23-2007, 03:12 PM

Hi,

I am having problems laying out my page which I have tried to do solely using CSS (which I always seem to have problems with). FF of course looks okay, however in IE (6&7) my content area keeps breaking down. I have spent over a day trying to fix the problem without success. The menu on the left is an swf. I am not sure if that's causing the issues. Wondering if anyone has any suggestions. A working copy can be seen at:

http://74.103.148.21/creative/

CSS

#container {
width: 950px;
position: relative;
left : 50%;
background-image:url(images/body-bg.jpg);
background-repeat:no-repeat;
height:600px;
margin-left: -475px;
}

#logo {
clear: right;
float: left;
width: 360px;
height: 75px;
padding-left: 30px;
padding-top: 35px;
}

#address {
float: right;
width: 300px;
height: 60px;
padding-right: 30px;
padding-top: 55px;
}

#content {
float: right;
width: 710px;
height: 396px;
padding-right: 10px;
padding-top: 35px;
}

#site {
float: right;
width: 340px;
height: 25px;
padding-right: 1px;
padding-top: 25px;
}

#flashcontentswf {
width: 220px;
height: 420px;
float: left;
margin-left:-389px;
margin-top: 125px;
padding:0px;
}

INDEX PAGE

<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="/creative/swfobject.js" type="text/javascript"></script>
<title>Creative Avenues</title>
</head>

<body bgcolor="#666666">
<div id="container">
<div id="logo"><img src="images/logo-ca.jpg" border="0" alt="" title="" /></div>
<div id="address"><img src="images/address.jpg" border="0" alt="" title="" /></div>
<div id="flashcontentswf"><embed id="mymovie" width="220" height="420" flashvars="wmode=transparent" quality="high" bgcolor="#ffffff" name="mymovie" src="/creative/flash/menu.swf" type="application/x-shockwave-flash" wmode="transparent"/></div>
<div id="content"><img src="images/content.jpg" border="0" alt="This is where the content is going" title="This is where the content is going" /></div>
<div id="site"><img src="images/website.jpg" border="0" alt="" title="" /></div>
</div>
</body>
</html>

Cheers in advance
K

_Aerospace_Eng_

07-23-2007, 04:58 PM

Don't thank people in advance, it makes us think you take our help for granted. Try this
<!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=utf-8" />
<style type="text/css">
html,body {
background:#666666;
margin:0;
padding:0;
}

#container {
width:950px;
background:url(images/body-bg.jpg) no-repeat;
height:600px;
margin:auto;
}

#logo {
float:left;
width:360px;
height:75px;
padding-left:30px;
padding-top:35px;
}

#address {
float:right;
width:300px;
height:60px;
padding-right:30px;
padding-top:55px;
}

#flashcontentswf {
width:220px;
height:420px;
float:left;
margin-left:1px;
display:inline;
}

#content {
float:right;
width:710px;
height:396px;
padding-right:10px;
padding-top:35px;
}

#site {
clear:both;
text-align:right;
height:25px;
padding-right:1px;
padding-top:25px;
}

.clear {
clear:both;
}
</style>
<script src="/creative/swfobject.js" type="text/javascript"></script>
<title>Creative Avenues</title>
</head>
<body>
<div id="container">
<div id="logo"><img src="images/logo-ca.jpg" border="0" alt="" title="" /></div>
<div id="address"><img src="images/address.jpg" border="0" alt="" title="" /></div>
<div class="clear"></div>
<div id="flashcontentswf">If you are seeing this you either have javascript disabled or you do not have a flash plugin installed.</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/creative/flash/menu.swf", "mymovie", "220", "420", "9", "#FFFFFF");
so.addParam('wmode','transparent');
so.addParam('quality','high');
so.write("flashcontentswf");
// ]]>
</script>
<div id="content"><img src="images/content.jpg" border="0" alt="This is where the content is going" title="This is where the content is going" /></div>
<div id="site"><img src="images/website.jpg" border="0" alt="" title="" /></div>
</div>
</body>
</html>

You had some weird things going on. You were making things harder than they had to be. I also setup swfobject for you. I saw that you had the script in place, you just didn't call the function.

kaykills

07-23-2007, 06:49 PM

awesome... much appreciated. I am so stubborn when it comes to using css for layouts. So i am now making an effort to always use it, but still have issues. Looks like it was my #container id causing most of the problem. good to know there are people out there willing to help.... cheers Aerospace.