Help with html design in IE

one man clappin · 21-03-2011 12:49pm #1

Hi
I am a first year student and one of our modules is HCI. We have to design and build a website.
I downloaded a CSS style sheet to use as a template. Now when i go to view the pages in IE the links buttons are not aligned properly. The webpage works perfect in firefox and chrome.
Is there code that i can insert that will align the pages in firefox and IE.
Apologies if I dont make much sense.

Dermo · 21-03-2011 12:57pm

You will need to show some of the code to see what needs to be fixed. What versions of IE do you have to support?

one man clappin · 21-03-2011 2:08pm

Thanks Dermo, I am using IE 8 here in college.

Below is home page of website.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<meta name="Keywords" content="The National, indie rock, brooklyn, boxer, alligator, high violet, fake empire, conversation 16," />
<meta name="home" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>The Geese of Beverly Road</h1>
<h2>Menu</h2>
<ul>
<li class="first"><a href="home.html" accesskey="1" title="">Home</a></li>
<li><a href="about.html" accesskey="2" title="">About</a></li>
<li><a href="discography.html" accesskey="3" title="">Discography</a></li>
<li><a href="photos.html" accesskey="4" title="">Photos</a></li>
<li><a href="links.html" accesskey="5" title="">Links</a></li>
</ul>
</div>
<div id="content">
<div id="colOne"></div>
<div id="colTwo">
<h2><center>
Welcome to The National Fansite
</center></h2>
<center>
<img src="images/l_821fbee22d414013bfb9d2ccc673cf14.jpg" width="444" height="349" alt="the national">
</center>

<p> </p>
</div>
<ul>
<li class="first"><a href="home.html" accesskey="1" title="">Home</a></li>
<li><a href="about.html" accesskey="2" title="">About</a></li>
<li><a href="discography.html" accesskey="3" title="">Discography</a></li>
<li><a href="photos.html" accesskey="4" title="">Photos</a></li>
<li><a href="links.html" accesskey="5" title="">Links</a></li>
</ul>
<h3><p style="font-family:arial"> We'll run like we're awesome</h3>
<div id="footer">
<p>Copyright (c) 2011 TheGeeseofBeverlyRoad.com. All rights reserved. Design by Mike Tynan</p>
</div>
</body>
</html>

Dermo · 21-03-2011 2:20pm

the only major problem I can see in that is that the content div is never closed.
But it's the css code that I would really need to see, sadly most browsers have different css quirks

Liam Byrne · 21-03-2011 2:20pm

We'd need to see the content of default.css

matt-dublin · 21-03-2011 2:31pm

put this inside your <head> tags

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

one man clappin · 21-03-2011 2:32pm

Sorry cannot attach these files so i have to insert them here.

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
background: #000000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #E7E7E7;
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-family: Georgia, "Forte", Times, serif;
color: #FFFFFF;
}

h1 { font-size: 34px; }

h2 {
margin-bottom: 10px;
padding: 0 0 22px 0;
font-size: 24px;
background: #000000 url(images/img3.gif) repeat-x left bottom;
}

h3 {
padding: 0 0 22px 0;
font-size: 13px;
background: #000000 url(images/img3.gif) repeat-x left bottom;
}

p {
margin-top: 0;
text-align: justify;
line-height: 160%;
}

a {
color: #FE4E00;
}

a:hover {
text-decoration: none;
}

.list {
margin: 0;
padding: 0;
list-style: none;
}

.list li {
padding: 5px 0;
background: url(images/img5.gif) repeat-x;
}

.list li.first {
background: none;
}

/* Header */

#header {
width: 681px;
margin: 0 auto;
padding: 40px 0 0 13px;
height: 90px;
background: url(images/img1.gif) repeat-x left bottom;
}

#header h1 {
float: left;
}

#header h2 {
display: none;
}

#header ul {
float: right;
margin: 0;
padding: 15px 0 0 0;
list-style: none;
}

#header li {
display: inline;
}

#header a {
display: block;
float: left;
padding: 0 14px 0 20px;
background: url(images/img2.gif) no-repeat left center;
text-decoration: none;
font: bold 12px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}

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

#header .first a {
background: none;
}

/* Content */

#content {
width: 694px;
margin: 0 auto;
}

#colOne {
float: left;
width: 179px;
padding: 0 0 0 21px;
}

#colOne h3 {
margin-top: 14px;
}

#colTwo {
float: right;
width: 394px;
padding: 0 29px 0 0;
}

/* Footer */

#footer {
clear: both;
width: 694px;
margin: 0 auto;
padding: 30px 0 0 0;
}

#footer p {
padding: 20px 0 0 0;
background: url(images/img4.gif) repeat-x;
text-align: center;
color: #8A8A8A;
}

one man clappin · 21-03-2011 9:19pm

matt-dublin wrote: »

put this inside your <head> tags

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Thanks Matt, I tried that but no luck.

matt-dublin · 21-03-2011 10:19pm

just looked there in firefox and IE8 and both look the same? i don't see the misalignment?

one man clappin · 22-03-2011 10:19am

Sorry Matt, that page seems to be ok.:o The following page is not aligned, using the same style sheet etc.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About</title>
<meta name="Keywords" content="The National, indie rock, brooklyn, boxer, alligator, high violet, fake empire, conversation 16," />
<meta name="Description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>The Geese of Beverly Road</h1>
<h2>Menu</h2>
<ul>
<li class="first"><a href="home.html" accesskey="1" title="">Home</a></li>
<li><a href="about.html" accesskey="2" title="">About</a></li>
<li><a href="discography.html" accesskey="3" title="">Discography</a></li>
<li><a href="photos.html" accesskey="4" title="">Photos</a></li>
<li><a href="links.html" accesskey="5" title="">Links</a></li>
</ul>
</div>
<div id="content">
<div id="colOne"></div>
<div id="colTwo">
<h1><center> The National </center></h1>
<center><img src="images/the-national-420-420x0.jpg" width="341" height="402" /></center>

<p>In 1991, Matt Berninger and Scott Devendorf met while attending the University of Cincinnati where they also met Mike Brewer, Casey Reas, and Jeff Salem, to make the lo-fi garage band Nancy (which was named after Matt's mother), aspiring to sound like Pavement. The band was together for five years, but only released one album, titled 3429 Ruther, on Wife Records. The group slowly dissolved when Matt, Scott, Jeff, and Casey moved to Brooklyn.

Bryan, Bryce, and Aaron were childhood friends who played in several bands together over the years. When their last effort Project Nim broke up in 1998, they joined Matt and Scott in Brooklyn via the Devendorf relationship.

When the band was formed in 1999, it was called The National (although the domain name of the band's website is americanmary.com because, according to Matt Berninger in an interview with Better Propaganda, "t's a song off our first record. We never thought of changing the (website) name, although we should have." Several of the members continued to work day jobs throughout the early years, including being involved in New York's dot-com boom in the late 1990s </p>
</div>
<ul>
<li class="first"><a href="home.html" accesskey="1" title="">Home</a></li>
<li><a href="about.html" accesskey="2" title="">About</a></li>
<li><a href="discography.html" accesskey="3" title="">Discography</a></li>
<li><a href="photos.html" accesskey="4" title="">Photos</a></li>
<li><a href="links.html" accesskey="5" title="">Links</a></li>
</ul>
<div id="footer">
<p>Copyright (c) 2011 TheGeeseofBeverlyRoad.com. All rights reserved. Design by Mike Tynan</a>.</p>
</div>
</body>
</html>

daymobrew · 22-03-2011 4:07pm

<p>Copyright (c) 2011 TheGeeseofBeverlyRoad.com. All rights reserved. Design by Mike Tynan[b]</a>[/b].</p>

The closing link tag has not been opened.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">

You should add the doctype to the top of the problem file.

I ran the code through the W3C HTML Validator and it reported on a missing closing 'div' and on the obsolete 'center' tags.

one man clappin · 22-03-2011 6:01pm

Thanks Daymo I will look at that later.

matt-dublin · 22-03-2011 8:11pm

this works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About</title>
<meta name="Keywords" content="The National, indie rock, brooklyn, boxer, alligator, high violet, fake empire, conversation 16," />
<meta name="Description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>The Geese of Beverly Road</h1>
<h2>Menu</h2>
<ul>
<li class="first"><a href="home.html" accesskey="1" title="">Home</a></li>
<li><a href="about.html" accesskey="2" title="">About</a></li>
<li><a href="discography.html" accesskey="3" title="">Discography</a></li>
<li><a href="photos.html" accesskey="4" title="">Photos</a></li>
<li><a href="links.html" accesskey="5" title="">Links</a></li>
</ul>
</div>
<div id="content"></div>
<div id="colOne"></div>
<div id="colTwo">
<h1><center> The National </center></h1>
<center><img src="images/the-national-420-420x0.jpg" width="341" height="402" /></center>




<p>In 1991, Matt Berninger and Scott Devendorf met while attending the University of Cincinnati where they also met Mike Brewer, Casey Reas, and Jeff Salem, to make the lo-fi garage band Nancy (which was named after Matt's mother), aspiring to sound like Pavement. The band was together for five years, but only released one album, titled 3429 Ruther, on Wife Records. The group slowly dissolved when Matt, Scott, Jeff, and Casey moved to Brooklyn.

Bryan, Bryce, and Aaron were childhood friends who played in several bands together over the years. When their last effort Project Nim broke up in 1998, they joined Matt and Scott in Brooklyn via the Devendorf relationship.

When the band was formed in 1999, it was called The National (although the domain name of the band's website is americanmary.com because, according to Matt Berninger in an interview with Better Propaganda, "[i]t's a song off our first record. We never thought of changing the (website) name, although we should have." Several of the members continued to work day jobs throughout the early years, including being involved in New York's dot-com boom in the late 1990s </p>
</div>
<ul>
<li class="first"><a href="home.html" accesskey="1" title="">Home</a></li>
<li><a href="about.html" accesskey="2" title="">About</a></li>
<li><a href="discography.html" accesskey="3" title="">Discography</a></li>
<li><a href="photos.html" accesskey="4" title="">Photos</a></li>
<li><a href="links.html" accesskey="5" title="">Links</a></li>
</ul>
<div id="footer">
<p>Copyright (c) 2011 TheGeeseofBeverlyRoad.com. All rights reserved. Design by Mike Tynan</a>.</p>
</div>
</body>
</html>

problem was with headers and an open div

one man clappin · 22-03-2011 10:44pm

Thanks a million Matt. I really appreciate it.

Help with html design in IE

Comments