- Joined
- Jun 5, 2011
If the title has not scared you away maybe you can help me with my problem. I am learning web development and have an assignment to make a page for my school. The page is looking okay in firefox and chorme, but I have no idea what is happening in IE. I am just trying to set up a layout for the site so far.
The problem appears to be IE's interpretation of width: 100%
If this is not clear enough i can try to explain a little more. Thank for any help guys
The site can be viewed from here http://www.cs.kent.edu/~ktoplak/testing/index.shtml
This is the main page
this is the navbar.html
this is the css
The problem appears to be IE's interpretation of width: 100%
If this is not clear enough i can try to explain a little more. Thank for any help guys
The site can be viewed from here http://www.cs.kent.edu/~ktoplak/testing/index.shtml
This is the main page
HTML:
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="main.css"/>
<!--<![endif]-->
</head>
<body class="gradient">
<div id="mainContainer">
<div id="header">
<!--#include virtual="navbar.html" -->
</div>
<div id="contentContainer">
<div id="content">
<p>
Put Your Content Here
</p>
</div>
</div>
</div>
</body>
</html>this is the navbar.html
HTML:
<center><img id="logo" src="Assets/logo.png" /></center>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Why CS?</a></li>
<li><a href="#">Why is CS Important?</a></li>
<li><a href="#">Job Oppurtunities</a></li>
</ul>this is the css
HTML:
body{
min-width: 900px;
min-height: 600px;
}
div#mainContainer{
margin: -10px 10% 0 10%;
min-height: 600px;
box-shadow: 0 .3em 1em black;
}
div#contentContainer{
width: 100%;
height:100%;
background-color: #f0f0f0;
}
div#content{
margin-left: 10px;
}
div#header{
background-color: #283955;
}
img#logo{
padding-bottom: 20px;
}
#nav{
min-width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
white-space: nowrap;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
text-align: center;
float: left;
width: 25%; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #EEBB00;
background-color: #fff; }
.gradient {
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #888, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF888888, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF888888, endColorstr=#FFFFFFFF)";
}
I'm in Rootstown, right around the corner from the main campus. 
