Post by Robyn on Dec 5, 2009 6:43:20 GMT -8
My website template is almost done, but for some reason Internet Explorer version 6 and 7 plus Opera 10 refuse to load my website correctly. Safari 4 and Chrome 3 plus Firefox 3.5.5 all load it correctly.
Album to view all
In GIMP
img705.imageshack.us/i/captureg.png/
What it's supposed to look like
Firefox
Chrome
Safari
What it shouldn't look like
IE 7
Opera
IE 6 (windows xp)
Every browser is being viewed in Windows Vista SP1, but IE 6. That is being viewed in Windows XP SP 2.
Two problem are visible and obvious:
Here's the HTML file:
And here's the style.css file:
I also have an IE only css file but it's the same as style.css currently.
How do I fix the problems here?
Album to view all
In GIMP
img705.imageshack.us/i/captureg.png/
What it's supposed to look like
Firefox
Chrome
Safari
What it shouldn't look like
IE 7
Opera
IE 6 (windows xp)
Every browser is being viewed in Windows Vista SP1, but IE 6. That is being viewed in Windows XP SP 2.
Two problem are visible and obvious:
- The menu bar is two "bars" tall instead of one.
- The page stretches way off (horizontal bar)
Here's the HTML file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="./ie-only.css" />
<![endif]-->
<title>Welcome to RobertCity.com</title>
</head>
<body>
<div class="logo"><div class="top_middle">
<img src="./images/main_logo.png" />
</div></div>
<div style="word-spacing:3em;" align="center" class="menu"><div class="menu_middle">
<a href="http://robertcity.com">Home</a>
<a href="http://robertcity.com">About</a>
<a href="http://robertcity.com">News</a>
<a href="http://robertcity.com">Articles</a>
<a href="http://robertcity.com">Reviews</a>
<a href="http://robertcity.com">Games</a>
<a href="http://robertcity.com">Community</a>
<a href="http://robertcity.com">Blog</a>
<a href="http://robertcity.com">Contact</a>
</div></div>
<br />
<div class="middle"><div class="title">Welcome to RobertCity.com</div>
<div class="content">
Welcome to the independently owned website run by a 16 year old.<br /><br />
RobertCity.com provides you with everything from free games to computer hardware reviews. We have a community with a
variety of discussions that are open for anyone to contribute to. There are many articles and reviews that are being added
every week as new software, hardware, and computer games are put on sale.<br /><br />
All links to articles, contact information and more can be found at the top on the menu bar. As of December 2009, there arn't
many articles in the <a href="http://robertcity.com/reviews">reviews page</a>, but as the weeks progress you should start
seeing more articles and reviews appear. Same is true with the <a href="http://robertcity.com/about">about page</a> or the
<a href="http://robertcity.com/games"></a> games page.<br /><br />
</div>
</div>
<br />
<div align="center" class="copyright">
<img src="./images/copyright.png" />
</div>
</body>
</html>And here's the style.css file:
body {
background-repeat:repeat-x;
background-color: cfcfcf;
margin: 0px auto;
font-family: "Verdana",sans-serif;
text-align: center;
}
a:link {
color: #000080;
text-decoration: bold;
}
a:visited {
color: #000080;
text-decoration: none;
}
a:hover {
color: #000080;
text-decoration: underline;
}
a:active {
color: #000080;
text-decoration: underline;
}
img
{
border-style: none;
}
.logo {
background-image:url('./images/main_logo_bg.png');
width: 100%;
}
.menu{
background-image:url('./images/menu_button_bg.png');
font-size: 12px;
padding-top: 15px;
height: 38px;
color: black;
font-family: "Verdana Bold",sans-serif;
}
.top_middle{
text-align: center;
height: 100px;
padding-right: 470px;
}
.menu_middle{
height: 100px;
padding-right: 382px;
width: 100%;
}
.middle{
margin-left: auto;
margin-right: auto;
font-family: "Verdana",sans-serif;
text-align: left;
font-size: 12px;
background-color: white;
width: 1000px;
border-style:solid;
border-width:1px;
}
.title{
background-image:url('./images/title_bg.png');
height: 40px;
font-size: 25px;
color: white;
padding-top: 5px;
padding-left: 10px;
font-family: "Verdana Bold",sans-serif;
}
.content{
margin-left: 10px;
margin-top: 10px;
}
.copyright{
background-image: url("./images/copyright_bg.png");
width: 100%;
}I also have an IE only css file but it's the same as style.css currently.
How do I fix the problems here?
