Muffin_Fox
11-21-2008, 10:53 PM
Oh my, first post ever on these forums, scary. So, sorry about the length of this, but I'm long-winded like that.... D:
Anyways, I should start with a bit of back story in terms of my project. I'm designing a section of my high schools web page (the section for the technology department, to be specific). I was chosen, because I was the only one in my class that knew HTML (which is surprising, in a class in the technology department...). This said, when I learned HTML, people were still ranting to me how much IE4 sucked...and with this newfangled (a 17 year old shouldn't be using that word, should I?) XHTML stuff, it got annoying. I read a book or two, as well as a few web tutorials, and made a fairly simple webpage, and when I showed it to the "web admin" (22 year old art grad teacher D: ), she was happy.
However, I showed it to her in Firefox, and just for the purpose of testing, when I went back to my classroom, I tested a few more browsers. FF2, pass. Opera 9, pass. Safari [whatever version is new], pass. Chrome, pass. IE, D: Fail. Well, the easiest way to explain it, would be in pictures, so:
(for some reason, the screenshots look REALLY dark, sorry, but, not quite in the mood to re do them off of my laptop.)
This is what one of the pages looks like in FF:
http://img401.imageshack.us/img401/4890/foxfoxry7.png
And in Safari:
http://img165.imageshack.us/img165/5184/safariov8.png
And in IE:
http://img246.imageshack.us/img246/6382/ieng6.png
(paint FTW)
Here is my CSS sheet (I used quite a few divs for 3 pages):
/* Basic Background for the Body*/
body {
background-color:#000000;
font-family:tahoma, veranda, arial, sans-serif;
background-image: url(images/background.png);
}
/* Text Formatting */
h1.title {
color:#EEAD0E;
text-align:center;
}
h3.secondtitle {
color:#EEAD0E;
text-align:center;
line-height:1px;
position:relative;
top:-10px;
}
p.welcomeboxtext {
color:#EEAD0E;
}
/*Divs */
div#welcome {
display:block;
width:200px;
text-align:left;
margin: 0px auto;
text-align:center;
background-color:#555555;
background-image: url(images/welcomeheader.png);
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:120px;
}
div#header {
width:1024px;
background-color:#555555;
background-image: url(images/header.png);
border-style: solid;
border-width:2px;
border-color:#333333;
}
div#links {
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:255px;
}
div#linksv2 {
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:295px;
}
div#staff {
width:200px;
background-color:#555555;
background-image: url(images/techheaderright.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:800px;
top:120px;
}
/*links*/
a:link {color:#EEB422;}
a:visited {color:#82CFFD;}
a:hover {color:#FFFFFF;}
/*More Divs*/
div#bottombox{
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:410px;
}
div#version{
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:490px;
}
div#hpmiddle{
width:570px;
background-color:#555555;
background-image: url(images/hpmiddlebg.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:220px;
top:120px;
}
Here is the HTML for the page in the pictures above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/html-transitional.dtd">
<html>
<head>
<title>Sachem North Tech Department Webpage</title>
<link rel="stylesheet" type="text/css" href="stdcss.css" />
</head>
<body>
<div id="header"><h1 class="title">Sachem North Technology Department</h1>
<h3 class="secondtitle">Homepage</h3>
</div>
<div id="welcome"><p class="welcomeboxtext">Welcome to Sachem North's Technology Department homepage. To begin your journey, click on one of the links below.</p></div>
<div id="links">
<ul>
<li><a href="WWW.MUFFIN.COM">Homepage</a></li>
<li><a href="">Teacher List D:</a></li>
<li><a href="">Course List</a></li>
<li><a href="">Useful Links</a></li>
<li><a href="">Sachem Robotics Webpage</a></li>
</ul></div>
<div id="hpmiddle">The video that would be showing a montage of the tech department would be here.</div>
<div id="staff"><p class="welcomeboxtext">Technology Education is the study of the human made world.
We live in a society that increasingly depends upon technology.
Citizens who understand and are comfortable with the concepts
and workings of modern technology will be better prepared for
the workplace and better able to participate fully in society and
in the global marketplace. Technologically literate
citizens employ systems-oriented thinking as they interact with
the technological world, cognizant of how such interaction affects
individuals, our society, and the environment.</p></div>
<div id="bottombox"><p class="welcomeboxtext">Current Chairperson:<br /><b>Eric Jorgensen</b></p></div>
<div id="version"><p class="welcomeboxtext">Placeholder Text...</div></body>
</html>
I really hope this is something simple to fix, I've already had it be recommended to write an entire new set of pages for IE alone, and then make the homepage a javascript redirect to go to the right page for IE or other browsers. I really don't want to do this, so I hope yalls can help D:
Anyways, I should start with a bit of back story in terms of my project. I'm designing a section of my high schools web page (the section for the technology department, to be specific). I was chosen, because I was the only one in my class that knew HTML (which is surprising, in a class in the technology department...). This said, when I learned HTML, people were still ranting to me how much IE4 sucked...and with this newfangled (a 17 year old shouldn't be using that word, should I?) XHTML stuff, it got annoying. I read a book or two, as well as a few web tutorials, and made a fairly simple webpage, and when I showed it to the "web admin" (22 year old art grad teacher D: ), she was happy.
However, I showed it to her in Firefox, and just for the purpose of testing, when I went back to my classroom, I tested a few more browsers. FF2, pass. Opera 9, pass. Safari [whatever version is new], pass. Chrome, pass. IE, D: Fail. Well, the easiest way to explain it, would be in pictures, so:
(for some reason, the screenshots look REALLY dark, sorry, but, not quite in the mood to re do them off of my laptop.)
This is what one of the pages looks like in FF:
http://img401.imageshack.us/img401/4890/foxfoxry7.png
And in Safari:
http://img165.imageshack.us/img165/5184/safariov8.png
And in IE:
http://img246.imageshack.us/img246/6382/ieng6.png
(paint FTW)
Here is my CSS sheet (I used quite a few divs for 3 pages):
/* Basic Background for the Body*/
body {
background-color:#000000;
font-family:tahoma, veranda, arial, sans-serif;
background-image: url(images/background.png);
}
/* Text Formatting */
h1.title {
color:#EEAD0E;
text-align:center;
}
h3.secondtitle {
color:#EEAD0E;
text-align:center;
line-height:1px;
position:relative;
top:-10px;
}
p.welcomeboxtext {
color:#EEAD0E;
}
/*Divs */
div#welcome {
display:block;
width:200px;
text-align:left;
margin: 0px auto;
text-align:center;
background-color:#555555;
background-image: url(images/welcomeheader.png);
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:120px;
}
div#header {
width:1024px;
background-color:#555555;
background-image: url(images/header.png);
border-style: solid;
border-width:2px;
border-color:#333333;
}
div#links {
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:255px;
}
div#linksv2 {
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:295px;
}
div#staff {
width:200px;
background-color:#555555;
background-image: url(images/techheaderright.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:800px;
top:120px;
}
/*links*/
a:link {color:#EEB422;}
a:visited {color:#82CFFD;}
a:hover {color:#FFFFFF;}
/*More Divs*/
div#bottombox{
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:410px;
}
div#version{
width:200px;
background-color:#555555;
background-image: url(images/welcomeheader.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:10px;
top:490px;
}
div#hpmiddle{
width:570px;
background-color:#555555;
background-image: url(images/hpmiddlebg.png);
text-align:center;
border-style: solid;
border-width:2px;
border-color:#333333;
position:absolute;
left:220px;
top:120px;
}
Here is the HTML for the page in the pictures above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/html-transitional.dtd">
<html>
<head>
<title>Sachem North Tech Department Webpage</title>
<link rel="stylesheet" type="text/css" href="stdcss.css" />
</head>
<body>
<div id="header"><h1 class="title">Sachem North Technology Department</h1>
<h3 class="secondtitle">Homepage</h3>
</div>
<div id="welcome"><p class="welcomeboxtext">Welcome to Sachem North's Technology Department homepage. To begin your journey, click on one of the links below.</p></div>
<div id="links">
<ul>
<li><a href="WWW.MUFFIN.COM">Homepage</a></li>
<li><a href="">Teacher List D:</a></li>
<li><a href="">Course List</a></li>
<li><a href="">Useful Links</a></li>
<li><a href="">Sachem Robotics Webpage</a></li>
</ul></div>
<div id="hpmiddle">The video that would be showing a montage of the tech department would be here.</div>
<div id="staff"><p class="welcomeboxtext">Technology Education is the study of the human made world.
We live in a society that increasingly depends upon technology.
Citizens who understand and are comfortable with the concepts
and workings of modern technology will be better prepared for
the workplace and better able to participate fully in society and
in the global marketplace. Technologically literate
citizens employ systems-oriented thinking as they interact with
the technological world, cognizant of how such interaction affects
individuals, our society, and the environment.</p></div>
<div id="bottombox"><p class="welcomeboxtext">Current Chairperson:<br /><b>Eric Jorgensen</b></p></div>
<div id="version"><p class="welcomeboxtext">Placeholder Text...</div></body>
</html>
I really hope this is something simple to fix, I've already had it be recommended to write an entire new set of pages for IE alone, and then make the homepage a javascript redirect to go to the right page for IE or other browsers. I really don't want to do this, so I hope yalls can help D: