...

View Full Version : 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum