Results 1 to 2 of 2
Related
-
Php info page not showing Forum: PHP Forum
Replies: 1 -
Different rollover images and text showing Forum: Javascript Forum
Replies: 0 -
Images In CSS Not Showing Forum: CSS Forum
Replies: 9 -
banner not showing Forum: HTML Forum
Replies: 3
-
05-27-2010, 03:18 AM #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>
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; }
-
05-31-2010, 07:13 AM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
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>