2 column Page Layout works in Firefox but not IE

tupulo · 26-Feb-2008, 01:15 PM #1

Hi
I have a 2 column page layout in XHTML and CSS which displays fine in Firefox but not in IE. In IE version 7, the 2nd column appears way down the screen on the RHS.

Any help would be greatly appreciated.

Here is the HTML code followed by the css code:

HTML code:

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">

<head>
<title>Page Layout with CSS</title>
<link rel="stylesheet" type="text/css" href="reportlayout.css" />
</head>

<body>

<div id="container">

<div id="top" ><h1>Combining available standards and tools to build a
compliance oriented website management system</h1></div>

<div id="authors">
<table cellspacing="0" cellpadding="2" border="0" align="center">

<tr>
<td align="center"><font size="5"><b>Neeraj Arora</b></font></td>
<td align="center"><font size="5"><b>Linda Pannan</b></font></td>
</tr>

<tr>
<td align="center">School of Computer Science and Information</td>

<td align="center">Teaching Fellow (Online Learning)</td>
</tr>

<tr>
<td align="center">Technology</td>
<td align="center">Teaching and Learning Portfolio</td>
</tr>

<tr>
<td align="center">RMIT University</td>
<td align="center">RMIT University</td>
</tr>

<tr>
<td align="center">ASSETT Research Group</td>
<td align="center">ASSETT Research Group</td>
</tr>

<tr>
<td align="center">Melbourne, Victoria, Australia</td>
<td align="center">Melbourne, Victoria, Australia</td>
</tr>

<tr>
<td align="center">narora@narora.net,</td>

<td align="center">linda.pannan@rmit.edu.au</td>
</tr>

<tr>
<td align="center">nearora@cs.rmit.edu.au</td>
<td align="center"></td>
</tr>

</table>
</div>

<div id = "main">

<div id="col1"> <h2>ABSTRACT</h2>

<p class="columntext">Analyses of representative organisational structures and their implications
for management of organisations' websites reveals that
the various roles of developers and users of the system and content
are of prime importance. Typically, policy and mandated procedures
are used within organisations to enforce standards that deliver
compliance, usability, and accessibility. A poorly presented
organisational website resulting from any shortfalls in implementing
the required processes and possible misinterpretations of the
procedures not only reflects badly on the organisation and its ability
to manage other business activity well, but also creates a lot of
additional work for the system administrators.</p>
<p class="columntext">This paper describes the design of a system to manage organisational
websites created by using a combination of tools available
in the public domain. The system facilitates standards compliance,
and by providing for the enforcement of good design it also addresses
usability and accessibility. An example implementation is
discussed as it assists in understanding the design. We conclude by
identifying the work needed to further improve the proposed system
design and increase its functionality.</p>

<h2>1. INTRODUCTION</h2>
<p class="columntext">Business corporations have embraced the Web as an effective
tool for communication and marketing for some years now. As
public funding for post secondary education declines further and
globalisation threatens their market share [12], universities, also,
have more recently invested much effort in the development, standardisation,
and use of their websites for similar purposes as they
adopt economic rationalist management approaches in seeking to
reduce costs, and boost revenues.</p>
<p class="columntext">Standards compliance refers to websites being conformant to
recommendations provided from time to time by the World Wide
Web Consortium (W3C) [36]. The W3C provides recommendations</p>

</div>

<div id="col2">
<p class="columntext">for markup formats used to present information and styling,
such as XML Schema [30], (Extensible) Hyper Text Markup Language
((x)HTML) [35], Cascading Style Sheets (CSS) [34], Extensible
Markup Language (XML) [25], Extensible Stylesheet Language
(XSL) [26], and XSL Transformations (XSLT) [5].</p>

<p class="columntext">Hull [14] defines accessibility in terms of a website that is capable
of being reached, and that the information within it is easily
obtainable, extending well beyond the definition that simply provides
for the needs of people with disabilities. He contends that to
achieve accessibility it is important that, first, websites be accessible
to the technologies, for example through consistent markup
and styling so that components of the content may be found by
electronic means, and second, to people. To achieve this a website
needs to be standards compliant and needs to follow commonly accepted
guidelines, facilitating its accessibility. Nielsen [20] defines
usability as a quality attribute. He considers it comprises the learnability
of basic tasks when a website design is first encountered,
the efficiency of performing these tasks, the memorability of performing
these tasks using a website design, the errors made while
performing them, and satisfaction gained by users of a website. The
design of a website directly influences these features, and we can
conclude that the design of a website directly influences its usability.
Further, the quality of a website depends on a combination of
its standards compliance, accessibility, and usability.</p>

<p class="columntext">Nielsen and Coyne [21], Nielsen et al. [22], and Nielsen and Norman
[23] have shown that investment in accessibility and usability
of organisational websites yields returns in the form of profit. Although
they target only commercial organisations in their articles
these findings are equally applicable to universities and their website
developments as they aim to increase their revenue through increased
visibility and effective market exposure for their programs
and services, in attempts to attract more students.</p>

</div>
</div>

<div id="footer">
<p>Appears in Proceedings of The Eleventh Australian World
Wide Web Conference, Gold Coast, Queensland, Australia,
ISBN 0975164430,
pages 20 37,
July 2005.
Neeraj Arora and Linda Pannan, c
2005. The authors assign to Southern
Cross University and other educational and nonprofit
institutions a
nonexclusive
licence to use this document for personal use and in courses
of instruction provided that the article is used in full and this copyright
statement is reproduced. The authors also grant a nonexclusive
licence to
Southern Cross University to publish this document in full on the World
WideWeb and on CDROM
and in printed form with the conference papers
and for the document to be published on mirrors on the World Wide Web.</p>
</div>

</div>
</body>
</html>

____________________________________________________________

CSS code

#container
{
width: 95%;
margin: 10px auto;
line-height: 130%;
}

#top
{
padding: .5em;

}
#top h1 { padding: .5em; margin: 0; line-height: 100%; text-align: center;}

main
{
width: 95%
}

#col1
{
float: left;
width: 50%;
padding 2em;
}

#col2
{
position:relative;
float: right;
width: 50%;

}

ul
{
text-align:justify;
}

#footer
{
clear: both;
margin: 0;
color: #333;
font-size: 11.5px;
text-align: justify;
}

img
{
display: block;
margin-left: auto;
margin-right: auto
border-style

utset;
border-color: red;
border-width:4px;

}

.columntext
{
text-align: justify;
margin-left: 2%;
margin-right: 2%;
font-size: 13px;}

tomdkat · 26-Feb-2008, 02:18 PM #2

I don't have access to IE7 but IE6 (Maxthon 2.0.8) renders the page like Firefox 3.0b3 and Opera 9.5b2 on Windows XP.

EDIT: How does IE7 behave if you get rid of the first line in your HTML file:

Code:

<?xml version="1.0" encoding="UTF-8"?>

Peace...

tupulo · 26-Feb-2008, 02:37 PM #3

I got rid of the first line but IE7 behaves just the same.
Thanks

tomdkat · 26-Feb-2008, 05:10 PM #4

I found three syntax errors in your stylesheet. Actually, Firefox 3.0b3 did.

Here they are:

Code:

#col1
{
float: left;
width: 50%;
padding 2em;
}

Your "padding" attribute is missing a colon. Change it to this:

padding: 2em;

Code:

img
{
display: block;
margin-left: auto;
margin-right: auto 
border-styleutset;
border-color: red;
border-width:4px;
}

Your border-style attribute is wrong. It should probably be:

border-style: outset;

Lastly, the margin-right attribute is missing a semi-colon at the end. Change that line to:

margin-right: auto;

I don't know if either of those will affect IE7's rendering of your page but those syntax errors should be fixed anyway.

Peace...

tomdkat · 26-Feb-2008, 05:55 PM #5

Ok, making the corrections above makes the page render incorrectly in Firefox and Opera too.

Removing the padding in element "col1" fixes the layout issue and it should layout right in IE7 now too. Removing the padding in element "col1" gets rid of the padding you wanted in that column. However, you can put the text in the col1 element inside a DIV that HAS the padding, like this:

Code:

#col1
{
float: left;
width: 50%;
}

.padding {
padding: 2em;
}

and then:

Code:

<div id="col1">
<div class="padding"> <h2>ABSTRACT</h2>

Be sure to close out the new "padding" DIV at the end of the col1 element.

See what that does.

Peace...

rick22 · 29-Feb-2008, 08:52 AM #6

man.... why there are always difference in designs in IE and mozilla? :x

tomdkat · 29-Feb-2008, 10:52 AM #7

Quote:

Originally Posted by rick22

man.... why there are always difference in designs in IE and mozilla? :x

Because IE doesn't support the W3C standards well. It's more like IE vs just-about-every-other-modern-browser-out-there.

I can sit down and design a page that will work fine in Mozilla Firefox, Seamonkey, Opera, and Safari without any additional changes. It *might* work in IE7 and would probably need tweaks for IE6.

IE8 should reduce this issue even more and bring new issues of its own.

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)