42 users online (0 members and 42 guests)  


  Results 1 to 2 of 2

Related

  1. Php info page not showing    Forum: PHP Forum
    Replies: 1
  2. Different rollover images and text showing    Forum: Javascript Forum
    Replies: 0
  3. Images In CSS Not Showing    Forum: CSS Forum
    Replies: 9
  4. banner not showing    Forum: HTML Forum
    Replies: 3
  1. #1
    lizzy1e's Avatar
    New User

    Status
    Offline
    Join Date
    May 2010
    Posts
    1

    Need help with div tags not showing up in IE7

    Hi everyone

    I'm totally new to using div tags to build sites, I used to use tables back in the day... and I've spent the past week trying to learn this and put together a Joomla template. It looks fantastic in Firefox, but when I try to preview it in IE7, half the div tags don't even show up. Please forgive any ridiculous mistakes I make, this is really me just learning as I go along. The site doesn't really follow a standard header, left, right, maincontent,footer design; I'm afraid. I didn't actually design it, but I do have to build it. I'm working locally, so I don't have an actual live site to show right now, but hopefully the code below will help:

    Code:
    <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>
    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);
    	background-repeat:no-repeat;
    	background-position:bottom;
    	width:800px;
    	height:55px;
    	margin-left:auto;
    	margin-right:auto;
    	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;
    }
    Any help would be muuuuch appreciated, really.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Need help with div tags not showing up in IE7

    Hi there lizzy1e,

    and a warm welcome to these forums.

    Unfortunately, as you are using so many images, it is difficult to know how your page is really meant to look.

    So what I have done is modified the code so that it appears exactly the same cross-browser wise.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>untitled document</title>
    
    <style type="text/css">
    body  {
        margin-top:15px;
     }  
      
    #wrapper {
        background-image:url(../images/bg2.jpg);
        background-repeat:no-repeat;
        background-position:center bottom;
        width:800px;
        margin:auto;
     }
    
    #header {
        background-image:url(../images/logo.png);
        background-repeat:no-repeat;
        height:100px;
    }
    #left {
        float:left;
        width:350px;
        height:391px;
        margin-top:3px;
        background-image:url(../images/what_bg.png);
        background-repeat:no-repeat;
     }
    #topmenu {
        float:left;
        width:295px;
        height:140px;
        margin:3px 0 0 155px;
        font-family:'times new roman',times, serif;
        font-size:12px;
     }
    
    #right {
        float:left;
        width:404px;
        height:40px;
        margin-left:23px;
        background-image:url(../images/we1.gif);
        background-repeat:no-repeat;
     }
    
    #mainbody {
        float:left;
        width:450px;
        height:211px;
        background-image:url(../images/content_bg.png);
     }
    
    #content {
        width:436px;
        height:197px;
        margin:7px;
     }
    
    #footer {
        clear:both;
        height:55px;
        background-image:url(../images/bg_footer.jpg);
        background-repeat:no-repeat;
        background-position:bottom;
     }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="header"></div>
    
    <div id="left"></div>
    
    <div id="topmenu"></div>
    
    <div id="right"></div>
    
    <div id="mainbody">
    
    <div id="content"></div>
    
    </div><!-- end #mainbody -->
    
    <div id="footer"></div>
    
    </div><!-- end #wrapper -->
    
    </body>
    </html>
    
    If this is not exactly what you require, then let us see how you want how you want it to look.



Tags for this Thread