• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

Web dev...for IE

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.

ShadowSlayer666

Registered
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
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.O.G.

Glorious Leader
Joined
Nov 12, 2002
Location
Rootstown, OH
Just drove by Gabriel brother's on 59 earlier tonight. :D I'm in Rootstown, right around the corner from the main campus. :)

Where's your doctype declaration? IE may be pickier about that than the others, and doctype declarations are there to ensure rendering goes smoothly.
 
OP
S

ShadowSlayer666

Registered
Joined
Jun 5, 2011
haha that actually is what i just changed and it is working mostly now. Just a noob mistake i guess haha. I dislike IE

after looking over it more in IE there is a white border that is going around the entire page. When i inspect the elements it looks like it has to do with gradient class and main container class. It might have to do with the functions to get the gradient to work in IE

edit for the edit...there is a default margin for for body that is 8px which was causing the white border
 
Last edited:

I.M.O.G.

Glorious Leader
Joined
Nov 12, 2002
Location
Rootstown, OH
Good work.

I still don't really know how to declare a doctype properly. Mostly, I think I just don't know how to write code consistent with a stated doctype.
 

petteyg359

Likes Popcorn
Joined
Jul 31, 2004
Many browsers have a base CSS they apply to every page, which may screw with your styles. You'll want to look for a CSS reset (YUI3 is good), and put it before your own CSS.
 

ebug122

Member
Joined
Nov 1, 2009
Location
Ontario, Canada
Good work.

I still don't really know how to declare a doctype properly. Mostly, I think I just don't know how to write code consistent with a stated doctype.
That's why HTML5 is awesome: <!DOCTYPE html> :D

Many browsers have a base CSS they apply to every page, which may screw with your styles. You'll want to look for a CSS reset (YUI3 is good), and put it before your own CSS.
Eric Meyer has another good one.
 

MortalSynz

Registered
Joined
Jun 8, 2012
Location
Chicago, IL
+1 for always doing a CSS reset, Eric Meyer's is the one I based mine off actually. Be aware though, it literally strips EVERYTHING. It took me a good 10-15 minutes to realize the CSS reset was the reason my font wasn't going bold with the strong tag. I wanted to cry when I realized how much time I wasted with something so stupid.