Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - IE Layout Issue

    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
    Code:
    #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

    Code:
    <!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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Don't thank people in advance, it makes us think you take our help for granted. Try this
    Code:
    <!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.
    Last edited by _Aerospace_Eng_; 07-23-2007 at 06:02 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •