141 users online (0 members and 141 guests)  

> > > > Need help with div tags not showing up in IE7

  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. 05-27-2010, 03:18 AM #1
    lizzy1e
    lizzy1e is offline
    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.
    Reply With Quote Reply With Quote
  2. 05-31-2010, 07:13 AM #2
    coothead
    coothead is offline
    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
    733

    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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread