Need help with div tags not showing up in IE7

**lizzy1e** · 05-27-2010, 03:18 AM

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.

**coothead** · 05-31-2010, 07:13 AM

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.

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

Thread Tools

Related

Php info page not showing Forum: PHP Forum

Different rollover images and text showing Forum: Javascript Forum

Images In CSS Not Showing Forum: CSS Forum

banner not showing Forum: HTML Forum

Need help with div tags not showing up in IE7

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

Tags for this Thread