So I'm trying to use css and div's instead of tables to layout a personal website. It's going fairly well but for some reason my <p> elements aren't displaying the same in firefox and explorer. Basically I want there to be 20px margins on the left and right. It's working on explorer but as we all know explorer is tolerant of shitty code. But for some reason my margin on the left side called for on the css is being ignored.
I've screwed around a whole bunch with it but can't seem to tinker out a solution.
Firefox
http://img.photobucket.com/albums/v216/ ... hotfox.jpg[/img]
Explorer
http://img.photobucket.com/albums/v216/ ... shotex.jpg[/img]
http://img.photobucket.com/albums/v216/ ... hotfox.jpg[/img]
Explorer
http://img.photobucket.com/albums/v216/ ... shotex.jpg[/img]
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Mr. Terror's Online Classroom</title>
</head>
<body>
<div class="content">
<div class="banner">
<img class="banner" src="images\bookbanner.png" />
<img class="banner_right" src="images\bookbanner.png" />
<h1 class="banner">Mr. Terror's Online Classroom</h1>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="about_me.html">About Me</a>
<li class="navbar"><a class="navbar" href="discussion.html">Discussion Board</a>
<li class="navbar"><a class="navbar" href="wiki.html">Wiki Projects</a
<li class="navbar"><a class="navbar" href="blog.html">Blog Projects</a>
</ul>
</div>
<div class="left">
<h3>Current Class Pages</h3>
<ul class="sidebar">
<li class="sidebar"><a class="sidebar" href="#">A Block College Seniors</a>
<li class="sidebar"><a class="sidebar" href="#">B Block College Sophomores</a>
<li class="sidebar"><a class="sidebar" href="#">D Block College Sophomores</a>
</ul>
<h3>Class Announcements</h3>
<h3>School Calendar</h3>
</div>
<div class="right">
<h1 class="content">Welcome To Our Online Classroom</h1>
<p id="paragraph">Here we are for yet another school year. I suggest all of you bookmark this site since it will be used semifrequently for projects and homework assignments. The applications carried by this site, are not merely for</p>
</div>
</div>
</body>
</html>
Code:
/* CSS Document */
body{
margin:10%;
background-color: eee8f8;
}
div.content{
width: 100%;
height: 600px;
background-color: f7f4fd;
border: 1px solid black;
}
div.banner{
width: 100%;
height: 100px;
border-bottom: 1px solid black;
}
div.left{
float:left;
width:25%;
height:900px;
border-right: 1px solid black;
}
div.right{
margin-top:0px;
margin-left:20px;
margin-right:20px;
padding:0px;
height:900px;
}
img.banner{
float: left;
}
img.banner_right{
float: right;
margin-top: 0px;
margin-bottom: 0px;
}
h1.banner{
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 200px;
padding-top: 20px;
text-align:center;
}
ul.navbar{
float:left;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 22%;
padding-top: 24px;
}
li.navbar{
list-style-type:none;
display:inline;
padding-left: 5px;
padding-right: 10px;
padding-bottom: 0px;
}
a.navbar{
text-decoration:none;
color: c4060b;
font-weight: bold;
}
h3{
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
}
ul.sidebar{
margin-left: 10px;
margin-right: 0px;
padding-left: 0px;
}
li.sidebar{
list-style-type:none;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
}
a.sidebar{
text-decoration:none;
color:c4060b;
font-weight:bold;
}
h1.content{
text-align:center;
margin-top:10px;
margin-left:0px;
margin-right:0px;
padding:0px;
}
#paragraph{
margin-left:20px;
margin-right:20px;
}I've screwed around a whole bunch with it but can't seem to tinker out a solution.
