page renders right in IE but not in any other browser HELP!!!
I'm working on a website for Business Professionals of American contest, and the page I'm working on renders right in IE6 and 7, but not in Safari, Firefox, Opera or any other browser.
Any help would be appreciated below are the screen shots and code of the site.
index.html code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>The Environment and You - living green</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Side design by Brian Jett, Tyler Rios, Dailyn Adair, Shea Rhim -->
<!-- Designed for 2008 BPA Team Web Site Design Competition -->
<!-- Tested and certified for Safari 3.0, Shiira 2.2, Firefox 3.0b1, Internet Explorer 6.0 and 7.0 -->
<!-- Took forever to get this site to work in IE :( -->
</head>
<body id="home">
<div id="page-wrap">
<img src="head.jpg" />
<div id="menu">
Hello
</div>
<img id="below_menu" src="below_head.jpg" />
<div id="mainbody" height="100%">
<div id="mainpartdiv">
<img src="heading.jpg" style="padding-left:11px; padding-top:10px;" />
<div id="maintext">
aaafdadf
</div>
</div>
<div id="sidepartdiv">
<img src="side_top.jpg" style="margin-left:-1px;" />
<div class="sidetext">
adasdfasdf
</div>
<img src="side_bot.jpg" style="margin-right:-7px; margin-bottom:-4px;" />
</div>
</div>
<!-- Start Footer -->
<img src="footer.jpg" id="footer" />
<!-- End footer -->
</div>
</body>
</html>code for style.css:
body{
background:url(head_bg.jpg) repeat-x top left #FBF5C1;
margin:0;
text-align:center; /* to support to stupid IE browser */
font-family:arial;
}
#page-wrap{
width:760px;
margin: 0 auto; /* for good browsers :) */
text-align:left;
height:100%;
}
#head{
text-align:center;
}
#menu{
text-align:center;
margin-top:11px;
padding-bottom:0px;
height:26px;
}
#below_menu{
margin-top:0px;
text-align:center;
z-index:90;
position:static;
}
#mainbody{
margin-top:-8px;
background:url(bg.jpg) repeat-y top center;
width:760px;
margin-left:-2px;
height:100%;
poisition:absolute;
}
#footer{
margin-left:-5px;
}
#mainpartdiv{
margin-left:0px;
width:0px;
float:left;
margin-top:-3px;
position:relative;
}
#sidepartdiv{
width:230px;
float:right;
margin-top:-4px;
background:url(side_b.jpg) repeat-y top left;
height:0px;
padding-left:1px;
position:relative;
z-index:100;
}
.sidetext{
padding-left:25px;
background:url(side_b.jpg) repeat-y top left;
margin-top:-5px;
margin-left:-1px;
padding-top:5px;
}
#maintext{
padding-left:30px;
padding-right:20px;
padding-bottom:20px;
}how it renders in IE
how it renders in safari and everything else
My blog: http://www.xanga.com/bjett92
DarkLight posted this at 18:32 — 1st December 2007.
He has: 287 posts
Joined: Oct 2007
I can tell you the problem, but you are not going to like the truth...
IE displays the content wrong, it reads codes different to everything else. what you should have said is "Everything is OK in every browser apart from IE"
IE is a giant problem among webmasters, I recommend you to restart your pages, with Firefox as your preview Browser.
Sorry, i know this is not what you wanted to hear, but its the truth.
All the best news here: https://newsbotnet.com
bjett92 posted this at 18:43 — 1st December 2007.
They have: 12 posts
Joined: Jul 2004
thats exactly what i've tried to do
for some reason IE looks the way i want it to, but i can't seem to get it to work in IE
i know its just a fluke that IE happened to show it the way i wanted it to look
but it also must work in IE because it is for a competition and cross-browser compatibility will be judged
thanks for your help tho
My blog: http://www.xanga.com/bjett92
DarkLight posted this at 19:29 — 1st December 2007.
He has: 287 posts
Joined: Oct 2007
Yah, I understand what your saying.
Have you tried using DIVs?
They float above the page, and its content. No mater what the scripting acceptence on the browser is, everything reads CSS the same, including IE.
You will need to use CSS. here is a great tutorial to get you started. You would probably ask me now: "how the hell can I lern a full programming unit in a day".
I can answer that very easily: "Easy". I lerned the whole thing in a couple of hours hard training, and believe me, i will never go back to tables, they are a nightmare.
I am sorry I could not be of more help... Here is the tutorial...
http://www.w3schools.com/css/default.asp
All the best news here: https://newsbotnet.com
pr0gr4mm3r posted this at 21:14 — 1st December 2007.
He has: 1,502 posts
Joined: Sep 2006
Can you post a link to this page, so I can see it with the pictures? You should be able to get this fixed with a couple tweaks.
pr0gr4mm3r posted this at 21:23 — 1st December 2007.
He has: 1,502 posts
Joined: Sep 2006
Actually, looking over it again, it looks like you're missing a 'clear' break somewhere towards the end of your page. The only problem I'm seeing is that the background image isn't getting bumped down because I'm pretty sure Firefox and others doesn't acknowledge 100% as a valid height. I would be able to tell a lot more if I could see a page with the images in my browser.
BTW, I'm assuming you're in high school if you're doing BPA, right? That was one of the things I wish I did in HS.
bjett92 posted this at 16:59 — 2nd December 2007.
They have: 12 posts
Joined: Jul 2004
thanks for all the help, but the page actually isn't on any server yet so you can't see it on the internet
i just decided to create a separate style sheet for IE and one for all other browsers with conditional statements, so now it works perfectly
thanks for the help though!
My blog: http://www.xanga.com/bjett92
bjett92 posted this at 17:01 — 2nd December 2007.
They have: 12 posts
Joined: Jul 2004
yep freshmann in high school and bpa is really great, especially if you like technology and computers
but i've been doing web design for 5 years now tho
My blog: http://www.xanga.com/bjett92
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.