Divs not showing up in IE 7

lizzy1e

05-26-2010, 11:36 AM

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:

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

#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

dome90uk

05-26-2010, 11:58 AM

Hi Liz,

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

lizzy1e

05-26-2010, 12:03 PM

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

abduraooft

05-26-2010, 12:06 PM

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 ][/COLOR] tags to wrap your code while posting here and please edit your original post to do this. Thanks.

dome90uk

05-26-2010, 12:06 PM

It wont do any harm to post a JPG :)

lizzy1e

05-26-2010, 12:31 PM

Well, the Firefox source code says:

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

<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>

effpeetee

05-26-2010, 12:48 PM

I have put the code here. (http://exitfegs.co.uk/26_5.html)
Temporarily.

Frank

lizzy1e

05-26-2010, 12:50 PM

Thanks effpeetee for hosting it online, I appreciate it, I hope that'll help.

lizzy1e

05-26-2010, 12:51 PM

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...

lizzy1e

05-27-2010, 01:03 PM

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...