As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

HTML/CSS issues

JillasJillas Registered User new member
I'm having some trouble with a website I'm making for my father. Several picture elements, the ones that are background images, are either out of place or missing, and I can't figure out why. It looks just perfectly fine in Firefox, but when opened in Internet Explorer it decides not to render correctly. The first issue is in the side navigation bar, where a background image is out of alignment by 1px. The second issue is that the decorative top bar doesn't appear - I'm guessing this has something to do with how I coded it. Here is the site in question:

http://antleritis.com/

And here is the code. There are no working links yet, my primary goal has been getting the layout correct. Keep in mind, all that I know about CSS lies before you. I was not formally trained - I simply stole snippets and pieces from various other sites and tutorials. So I'm pretty sure I just messed it up and can't hate IE too much for this blunder (although this wouldn't be the first time IE has ruined my life).

And on another note, I'm not here for color scheme or proper aesthetics tips - trust me, I would have picked different colors at the very least if it were up to me. ><
<html>
<head>
<title>
ANTLERITIS
</title>
<style type="text/css">
<!--
#part1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 124px
}
#part2 {
  position: absolute;
  top: 0px;
  left: 200px;
  right: 0px;
  height: 124px;
  background-attachment: fixed;
  background-image: url(http://www.antleritis.com/images/antleritis_piece2.png);
  background-repeat: repeat;
  background-position:top;
}
html>body #part2 {
background-position:200px 0px;
}

#part3 {
  position: absolute;
  top: 124px;
  left: 0px;
  width: 200px;
  height: 25px;
}
#button1 {
  position: absolute;
  top: 149px;
  left: 0px;
  width: 200px;
  height: 50px;
}
#button2 {
  position: absolute;
  top: 199px;
  left: 0px;
  width: 200px;
  height: 50px;
}
#button3 {
  position: absolute;
  top: 249px;
  left: 0px;
  width: 200px;
  height: 50px;
}
#button4 {
  position: absolute;
  top: 299px;
  left: 0px;
  width: 200px;
  height: 50px;
}
#button5 {
  position: absolute;
  top: 349px;
  left: 0px;
  width: 200px;
  height: 50px;
}
#button6 {
  position: absolute;
  top: 399px;
  left: 0px;
  width: 200px;
  height: 50px;
}
#part4 {
  position: absolute;
  top: 449px;
  bottom: 100px;
  left: 0px;
  width: 200px;
  background-attachment: fixed;
  background-image: url(http://www.antleritis.com/images/antleritis_piece4.png);
  background-repeat: repeat;
  background-position:top;
}
html>body #part4 {
background-position:0px 449px;
}
#part5 {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 200px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="part1"><img src="http://www.antleritis.com/images/antleritis_piece1.png"></div>
<div id="part2" style="background-image: 

url(http://www.antleritis.com/images/antleritis_piece2.png);" ></div>
<div id="part3"><img src="http://www.antleritis.com/images/antleritis_piece3.png"></div>
<div id="button1"><img src="http://www.antleritis.com/images/antleritis_button1.png"></div>
<div id="button2"><img src="http://www.antleritis.com/images/antleritis_button2.png"></div>
<div id="button3"><img src="http://www.antleritis.com/images/antleritis_button3.png"></div>
<div id="button4"><img src="http://www.antleritis.com/images/antleritis_button4.png"></div>
<div id="button5"><img src="http://www.antleritis.com/images/antleritis_button5.png"></div>
<div id="button6"><img src="http://www.antleritis.com/images/antleritis_button6.png"></div>
<div id="part4" style="background-image: 

url(http://www.antleritis.com/images/antleritis_piece4.png);"></div>
<div id="part5"><img src="http://www.antleritis.com/images/antleritis_piece5.png"></div>
</body>
</html>

Jillas on
Sign In or Register to comment.