I have a question as to why Internet Explore won't read my webpage...yet Firefox and Opera read it just fine...
To me, it seems that internet explore is disregarding my external CSS file...because when I launch the index.html file, IE reads it without the CSS file...I don't know why though...BUT...when I created another HTML file and linked ANOTHER CSS file that I quickly made, it worked fine...So it must be the CSS code or something...
Here is the HTML code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My Homepage</title>
<link rel="stylesheet type="text/css" href="index.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Homepage</h1>
</div>
<div id="main">
<h2>Welcome to my Homepage</h2>
</div>
<div id="wrapper2">
<div id="nav2">
<a class="button" href="page1.html"><span>Page 1</span></a>
<a class="button" href="page2.html"><span>Page 2</span></a>
</div>
</div
<div id="footer">
<A HREF="http://www.freebuttons.com/"><IMG SRC="http://www.freebuttons.com/ima/banner2.gif" WIDTH=88 HEIGHT=31 BORDER=0 ALT="FreeButtons"></A>
</div>
</div>
</body>
</html>
And here is the CSS code...
body {
background-color: #00008B;
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 100%;
background-color: #87CEFA;
margin-top: auto;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #FF0000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
text-decoration: underline;
font-size: 1.5em;
color: rgb(100,100,150);
}
div#wrapper2 {
width: 10.4%;
background-color: #87CEFA;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 0px;
margin-right: 50px;
padding: 5px;
border: thin solid #FF0000;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 10px;
float: auto;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #FF0000;
}
a:link {
text-decoration: overline;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
div#footer ul li{
color: #000000;
background-color: transparent;
display: inline;
}
div#footer ul li a{
color: #115EAC;
background-color: transparent;
text-decoration: none;
}
div#footer ul li a:hover{
text-decoration: none;
}
.clear {
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('http://www.freebuttons.com/freebuttons/Neon/NeonDh4.gif');
color: white;
display: block;
float: auto;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 0px;
padding: right: 18px; /* slidding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url ('http://www.freebuttons.com/freebuttons/Neon/NeonDa4.gif');
display: block;
line-height: 14px;
padding: 5px 0 5px 20px;
}
a.button:active {
background-position: bottom right;
color: #000;
outline: none; /*hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /*push text down lpx */
}
Im thinking it must be an Error inside the CSS file...I've deleted each section at one time in the CSS file and tested it, didn't work...I've deleted the ENTIRE DIV section, didn't work...in my test file, DIV worked and so did the CSS file...I created 2 new files, HTML and CSS, and copied the text from the old files into the new and saved it under a new name and still doesn't work...
I'm fairly new to HTML and CSS, so I'm kinda stuck...
It works fine in others browsers EXCEPT Internet Explore...and I want it to work with all browsers...
Anyone know what the problem is?
Thanks
Regards,
PcPro12