HTML Forum

**tannranger** · 07-05-2006, 02:13 PM

Hello,
I'm a complete beginner in web design with both HTML and CSS. I found a template (open source) that I'm using to design a web site for a professor. I designed it using mozilla composer, and when viewing with Firefox or Opera it looks fine (I believe they use a similar rendering engine?).

However, when I open the webpage with IE, the central body of text is radically shifted downwards; I can't seem to figure out why it does this. Below is the CSS used by this web page. Also, let me note of course that this template, despite its modifications by myself, is thanks to Andreas Viklund.

Can anybody tell me if the problem is with the CSS, or do I need to change the HTML in each page of the website?

Thank you very much in advance for any help that you all can provide.

body{
margin:0 auto;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#f4f4f4 url(bg.gif) top center repeat-y;
color:#303030;
}

#wrap{
background:#ffffff;
color:#303030;
margin:0 auto;
width:760px;
}

#header{
clear:both;
margin:20px 0 0 0;
padding:0;
height:45px;
}

#header h1{
width:250px;
margin:0 0 10px 0;
float:left;
}

#header p{
width:500px;
float:right;
text-align:center;
color:#a0a0a0;
margin:0 0 10px 0;
font-size:0.8em;
line-height:1.2em;
background-color:inherit;
}

#frontphoto{
margin:0 0 10px 0;
border:0;
}

#avmenu{
clear:left;
float:left;
width:150px;
margin:0 0 10px 0;
padding:0;
font-size:0.9em;
}

#avmenu ul{
list-style:none;
width:150px;
margin:0 0 20px 0;
padding:0;
font-size:1.1em;
}

#avmenu li{
margin-bottom:4px;
}

#avmenu li a{
font-weight:bold;
height:20px;
text-decoration:none;
color:#505050;
display:block;
padding:6px 0 0 10px;
background:#f4f4f4;
border-left:4px solid #cccccc;
}

#avmenu li a:hover{
background:#eaeaea;
color:#286ea0;
border-left:4px solid #286ea0;
}

.announce{
margin:10px 0 10px 0;
padding:10px;
width:130px;
color:#505050;
background-color:#f4f4f4;
line-height:1.3em;
}

#extras{
float:right;
width:120px;
margin:0 0 10px 0;
padding:0;
font-size:0.9em;
line-height:1.5em;
}

#extras p{
margin:0 0 1.5em 0;
}

#content{
margin:0 130px 20px 160px;
border-left:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
padding:0 10px 0 10px;
line-height:1.6em;
text-align:left;
}

#content h2{
font-size:1.5em;
margin:0 0 0.5em 0;
}

#content img{
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;
}

h3{
font-size:1.3em;
margin:0 0 10px 0;
}

a{
text-decoration:none;
color:#286ea0;
}

a:hover{
text-decoration:underline;
color:#286ea0;
}

a img{
border:0;
}

#footer{
clear:both;
margin:0 auto;
padding:10px 0 20px 0;
border-top:4px solid #f0f0f0;
width:760px;
text-align:center;
color:#808080;
font-size:0.9em;
}

#footer a{
color:#808080;
text-decoration:none;
}

#footer a:hover{
text-decoration:underline;
}

.left{
margin:10px 10px 5px 0;
float:left;
}

.right{
margin:10px 0 5px 10px;
float:right;
}

.textright{
text-align:right;
}

.center{
text-align:center;
}

.small{
font-size:0.8em;
}

.bold{
font-weight:bold;
}

.hide{
display:none;
}

**LadynRed** · 07-05-2006, 02:20 PM

Which one of Andreas's templates are you using ? I have most of them

We really need to see the HMTL that goes with this.

**tannranger** · 07-05-2006, 02:34 PM

Sorry, here's the HTML for the website. Also, this is Andreas01. But here's the HTML, all of the webpages I've made os far with this template have the exact same problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="your,keywords,goes,here">
<meta name="author"
content="Your Name / Original design: Andreas Viklund - http://andreasviklund.com/">
<link rel="stylesheet" type="text/css" href="andreas01.css"
media="screen,projection">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<title>Homepage of Irem Tuna</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(204, 204, 255);"
alink="#000099" link="#000099" vlink="#990099">
<div id="wrap">
<div id="header"><img style="width: 732px; height: 125px;"
alt="Wharton Accounting Department" src="wacc.gif"><br>
<hr style="width: 100%; height: 2px;"><br>
<h1 style="width: 159px;"><span class="HeadlineRed">
İ</span>rem Tuna</h1>
<br>
<br>
<br>
</div>
<br>
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="IremTunaWP.html">Working Papers</a></li>
<li><a href="IremTunaPub.html">Publications</a></li>
<li><a href="IremTunaKnowledge.html">Knowledge@Wharton</a></li>
<li><a href="IremTunaContact.html">Contact Info</a></li>
<li><a href="http://webcafe.wharton.upenn.edu/">Webcafe</a></li>
<li><br>
</li>
<li><br>
</li>
<li style="width: 153px;"><br>
</li>
</ul>
<div class="announce">
<h3>Selected Links:</h3>
<p><strong><a
href="http://www.wharton.upenn.edu/faculty/acad_depts/acctdept.cfm">Wharton
Accounting Department</a><br>
</strong></p>
<p><strong><br>
</strong></p>
<p class="textright"><a href="#"><br>
</a></p>
</div>
</div>
<br>
<div style="width: 553px; height: 423px;" id="content">
<p style="margin-left: 0px; width: 519px;"><br>
</p>
<big><br>
<br>
<br>
<br>
<img alt="Irem Tuna" src="tuna.jpg" style="width: 178px; height: 207px;"
align="left"><br>
Welcome to Irem Tuna's Home Page!<br>
</big>
Here a short introduction can be given, perhaps including a bio or CV
if thought relevant.<br>
<br>
<span class="HeadlineRed">İrem Tuna </span><br>
<span class="subhead2">Assistant Professor of Accounting<br>
<p>PhD, University of Michigan 2003; <br>
MAS, University of Illinois at
Urbana-Champaign, 1997; <br>
BS, Middle East Technical University, 1995</p>
</span><br>
<br>
</div>
<div id="footer"><span editable="true" movable="true" id="Main"></span> Copyright
© 2005 Simon Cartoon. Design by <a
href="http://andreasviklund.com">Andreas Viklund</a>.
</div>
</div>
</body>
</html>

**LadynRed** · 07-05-2006, 04:03 PM

Ok.. you've got a lot of problems in there, but this is what is causing the float drop that you are seeing:

Quote:

IE has a broken box model. With IE, the box size is rendered as box+padding+margins, so you have to be careful that your sizes do not go OVER the 760px width that is defined for the wrapper div (#wrap).

First of all, you don't need the style definition on the paragraph in this manner.
Use the #content box you already have and use margin and padding on the <p> element in the CSS file itself - assuming you don't like Andreus's formatting.

This is also unnecessary: <li style="width: 153px;"> - the #avmenu box is already defined at a specific size and even if you want the list to be narrower, do it in the CSS file.

You also do not need to use stuff like this:

Quote:

First - don't use rgb colors, use the hex values. ALL of the body styling should be done in the CSS file.
The alink, vlink, link styles also need to be done in the CSS file. Look at Andreaus's original CSS file, you only need to change those values to suit your needs.

That template is meant to be XHTML 1.1 and that means that EVERY TAG MUST be closed. That means even a <br> must be written as <br />.
Every img tag must have an ALT attribute, even if it's only alt="".
Don't use   and <br>s to space out text - that is what CSS is for.

**twhitney** · 10-19-2006, 07:08 PM

My pages render properly (probably by luck) in IE but my pages are a mess in FF. Here is the link to the Index page (homepage) www.mcn.org/1/mendoparks/Index.htm open it in both. Is my problem the same as tannranger?

**LadynRed** · 10-20-2006, 01:59 PM

I'm afraid you have many more problems than the OP here.
Don't use position: absolute for your #main, just give it a wide enough margin to push it past your left side stuff.

IE is doing it incorrectly.. it always does. It has a broken box model and tons of bugs.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!