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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Location
    Namibia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs not showing up in IE 7

    Hi there

    I'm brand new to the concept of div tags and css (used to build sites in tables in Dreamweaver back in the day - eek), so please forgive me if I ask silly questions or make mistakes in my coding...

    I'm currently trying to create a Joomla template and working on it locally, all my divs show up just fine in Firefox, but in IE7 only a couple are actually there, namely my logo; navigation; background and article... any advice would be greatly appreciated. I realise the site does not follow the standard header/left/right/maincontent/footer layout. Unfortunately, I didn't design it, I just have to build it...

    My code is as follows:

    Code:
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="topmenu">
    <jdoc:include type="modules" name="top" style="" />
    </div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="mainbody">
    <div id="content">
    <jdoc:include type="component" />
    </div>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
    and the css is:

    Code:
    #wrapper {
    	background-image: url(../images/bg2.jpg);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    	width:800px;
    	height:500px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-bottom:0px;
    }
    
    #header {
    	background-image:url(../images/logo.png);
    	background-repeat: no-repeat;
    	width:800px;
    	height:100px;
    	margin:auto;
    	margin-top:15px;
    }
    
    #topmenu {
    	width:295px;
    	height:140px;
    	float:right;
    	margin-top:20px;
    	font:"Times New Roman", Times, serif;
    	font-size:12px;
    }
    
    #footer {
    	background-image:url(../images/bg_footer.jpg);
    	width:800px;
    	height:50px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:403px;
    	clear:both;
    }
    
    #left {
    	background-image:url(../images/what_bg.png);
    	background-repeat:no-repeat;
    	width:350px;
    	height:391px;
    	margin-left:0px;
    	margin-right:auto;
    	margin-top:0px;
    	float:left;
    	position:absolute;
    	top:118px;
    }
    
    #right {
    	background-image:url(../images/we1.gif);
    	background-repeat:no-repeat;
    	width:403px;
    	height:40px;
    	margin-left:23em;
    	margin-right:0px;
    	margin-top:0px;
    	float:right;
    	position:absolute;
    	top:232px;
    }
    
    #mainbody {
    	margin-top:0px;
    	margin-left:185px;
    	margin-right:0px;
    	float:right;
    	background-image:url(../images/content_bg.png);
    	width:515px;
    	height:225px;
    }
    
    #content {
    	margin-left:35px;
    	margin-top:10px;
    	width:435px;
    	height:210px;
    }
    
    body {
    	font-family:Calibri, Verdana, sans-serif;
    }
    Thanks
    Liz
    Last edited by lizzy1e; 05-27-2010 at 01:00 PM. Reason: Adding code tags

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    64
    Thanks
    3
    Thanked 6 Times in 6 Posts
    Hi Liz,

    Can you post a link to the live page?
    Its easier to trouble shoot that way

  • #3
    New to the CF scene
    Join Date
    May 2010
    Location
    Namibia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi dome,

    My apologies, I'm working locally and don't actually have a place to host the site at this very moment so it's a bit difficult...

    Maybe it's a little unorthidox, but would it help if I posted a jpg of what the site is supposed to look like with the div tag marked an named?

    Liz

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    My apologies, I'm working locally and don't actually have a place to host the site at this very moment so it's a bit difficult...

    Maybe it's a little unorthidox, but would it help if I posted a jpg of what the site is supposed to look like with the div tag marked an named?
    Not really. How about taking the html source of the page from your browser's view source option and post here?

    PS: Please use [CODE][/CODE] tags to wrap your code while posting here and please edit your original post to do this. Thanks.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Feb 2008
    Posts
    64
    Thanks
    3
    Thanked 6 Times in 6 Posts
    It wont do any harm to post a JPG

  • #6
    New to the CF scene
    Join Date
    May 2010
    Location
    Namibia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, the Firefox source code says:

    Code:
     
      <script type="text/javascript" src="/interact/media/system/js/mootools.js"></script>
      <script type="text/javascript" src="/interact/media/system/js/caption.js"></script>
    
    <link rel="stylesheet" href="/interact/templates/_system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/css/template.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/css/joomla.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/css/menu.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/sifr/sifr-screen.css" type="text/css" media="screen" />
    <script src="/interact/templates/interact/sifr/sifr.js" type="text/javascript"></script>
    
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="topmenu">
    <ul class="menu"><li id="current" class="active item1"><a href="http://localhost/interact/"><span>Home</span></a></li></ul>
    </div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="mainbody">
    <div id="content">
    
    <div class="joomla ">
    	<div class="blog">
    
    		
    				<div class="leadingarticles">
    										
    <div class="item ">
    	<div class="item-bg">
    	
    				<div class="headline">
    		
    						<h1 class="title">
    									Profile							</h1>
    					
    					
    					
    					
    						
    		</div>
    			
    				
    			
    			
    		<p class="articleinfo">
    
    	
    				
    					
    				
    				
    		</p>
    	
    				
    		<p>Interact is a unity of creative, energetic and intelligent individuals who believe there are no ordinary moments. We have the imagination to stretch the boundaries of the norm and the courage to put good ideas into action.We listen deeply and communicate empathically.  We are passionate about delivering your message.</p>	
    			
    		
    	</div>
    </div>				</div>
    		
    		
    		
    		
    	</div>
    </div>
    </div>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
    IE7:

    Code:
     <script type="text/javascript" src="/interact/media/system/js/mootools.js"></script>
      <script type="text/javascript" src="/interact/media/system/js/caption.js"></script>
    
    <link rel="stylesheet" href="/interact/templates/_system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/css/template.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/css/joomla.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/css/menu.css" type="text/css" />
    <link rel="stylesheet" href="/interact/templates/interact/sifr/sifr-screen.css" type="text/css" media="screen" />
    <script src="/interact/templates/interact/sifr/sifr.js" type="text/javascript"></script>
    
    
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="topmenu">
    <ul class="menu"><li id="current" class="active item1"><a href="http://localhost/interact/"><span>Home</span></a></li></ul>
    </div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="mainbody">
    <div id="content">
    
    <div class="joomla ">
    	<div class="blog">
    
    		
    				<div class="leadingarticles">
    										
    <div class="item ">
    	<div class="item-bg">
    	
    				<div class="headline">
    		
    						<h1 class="title">
    									Profile							</h1>
    					
    					
    					
    					
    						
    		</div>
    			
    				
    			
    			
    		<p class="articleinfo">
    	
    				
    					
    				
    				
    		</p>
    	
    				
    		<p>Interact is a unity of creative, energetic and intelligent individuals who believe there are no ordinary moments. We have the imagination to stretch the boundaries of the norm and the courage to put good ideas into action.We listen deeply and communicate empathically.* We are passionate about delivering your message.</p>	
    			
    		
    	</div>
    </div>				</div>
    		
    		
    		
    		
    	</div>
    </div>
    </div>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
    Last edited by lizzy1e; 05-27-2010 at 12:59 PM.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have put the code here.
    Temporarily.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New to the CF scene
    Join Date
    May 2010
    Location
    Namibia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks effpeetee for hosting it online, I appreciate it, I hope that'll help.
    Last edited by lizzy1e; 05-27-2010 at 12:58 PM.

  • #9
    New to the CF scene
    Join Date
    May 2010
    Location
    Namibia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I first thought the divs may be hidden below the background in IE7 or something, but even removing the background didn't help so I really don't know...
    Last edited by lizzy1e; 05-27-2010 at 12:58 PM.

  • #10
    New to the CF scene
    Join Date
    May 2010
    Location
    Namibia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've viewed the code as it is now hosted in IE7 and those divs don't show, is the way I've positioned everything correct? I'm still not 100% on the whole absolute/relative etc. business...


  •  

    Posting Permissions

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