Forum Moderators: open
Sincere apologies if this has been covered before, I've had a go searching the forum with Google but I failed to turn up anything specific.
I'm attempting my first fully XHTML site, moving across from HTML 4.01. The site is rendering perfectly in Firefox but appears to be producing weird screen artefacts in Internet Explorer. These artefacts can be removed by modifying the doctype, which leads me to assume its to do with the 'quirks' mode that IE is supposed to enter when XHTML is used.
More specifically, I have a 3 column, floated, liquid layout. The body has a background which is repeated down the left side of the screen. For whatever reason, the bottom of the right hand column appears to be replicated further up and to the left of the document. I cannot 'highlight' this text, and the cursor does not turn to a caret when I hover over it.
Also part of the body background is changed to white, and a border seems to appear and disappear.
Is this a known issue? I suppose there isn't a simple fix...
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
Yes the XHTML and CSS validate, CSS with a few warnings...
I will post the XHTML and CSS, just trying to remove all the site specific references first :)
Thanks,
Jamie
The XHTML:
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><head>
<title>england football news and info :: [removed].co.uk</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head><body>
<div id="header">
<a href="./" title="England FC Homepage"><img src="header-football.gif" width="48" height="49" alt="England Football" title="England Football" id="headerFootball" /></a>
<div id="headerUserLine">
<div id="headerRegister">
<a href="./" title="England Football">Home</a> ¦ <a href="register.asp" title="Register to post in the forum and a free newsletter">Register</a>
</div><div id="headerLogin">
<form action="#" method="post" id="formLogin">
<label for="username">Username:</label>
<input type="text" name="username" id="username" /><label for="password">Password:</label>
<input type="password" name="password" id="password" /><input type="submit" value="Log In" class="loginButton" />
</form>
</div></div>
<div id="headerTagLine">
<spantext</span>
</div><div id="headerNewsTicker">
<div id="pageDate"></div>
<div id="news-scroller">wood! wood!</div>
</div><div id="headerLogo">
<a href="./" title="title here"><img src="england-fc-logo.jpg" width="746" height="79" alt="England Football" title="Homepage" /></a>
</div></div>
<div id="container">
<div id="menu">
<div class="menuHeader">England World Cup 2006</div>
<div class="menuItem">
<a href="#" title="England Football News">News Archive</a>
<p>England Football News</p>
</div><div class="menuItem">
<a href="#" title="Discussion and banter in the EnglandFC forum">Forums</a>
<p>Discussion and banter in the EnglandFC forum</p>
</div><div class="menuItem">
<a href="#" title="Learn about past tournaments">World Cup History</a>
<p>Learn about past tournaments</p>
</div><div class="menuHeader">World Cup Entertainment</div>
<div class="menuItem">
<a href="#" title="Ringtones - Three Lions, Great Escape">World Cup Ringtones</a>
<p>Great Escape or Three Lions?</p>
</div><div class="menuItem">
<a href="#" title="England football trivia">Pub Facts</a>
<p>Top trivia - it's cheaper than pool!</p>
</div></div>
<div id="content">
<div id="contentCountdown">
<h2>Countdown to the World Cup</h2>
<span id="countdown"></span>
</div></div>
<div id="features">
<div class="feature">
<h3>Latest Forum Post</h3>
<p>Suspendisse libero. Nulla enim tortor, porta ac, sagittis non, vestibulum sit amet, tortor. Nam accumsan. Mauris dignissim mauris molestie nisi. Ut nec arcu. Proin lorem mauris, cursus id, interdum tempus, suscipit at, sem. Praesent interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div><div class="feature">
<h3>[removed].co.uk Poll</h3>
<p>Question goes here</p>
<form action="#">
<label for="result1">One</label>
<input type="radio" name="poll" id="result1" /><label for="result2">One</label>
<input type="radio" name="poll" id="result2" /><label for="result3">One</label>
<input type="radio" name="poll" id="result3" /><input type="submit" value="Vote!" />
</form>
</div><div class="feature">
<h3>Text message updates!</h3>
<p>text text text.</p>
</div></div>
</div>
</body>
</html>
The CSS:
/* Page */
body {
margin: 0;
padding: 0;background-image: url(leftbar-grass-background.jpg);
background-repeat: repeat-y;font-size: 12px;
font-family: Arial, sans-serif;
}a {
font-weight: bold;
text-decoration: underline;
color: #CC0000;
}img {
border: 0;
}/* Header */
#header {
margin: 0 0 0 15px;
border-top: 5px solid #CC0000;
}#headerUserLine {
background-image: url(header-background-fade.jpg);
background-repeat: no-repeat;
background-color: #990000;
height: 45px;
overflow: hidden;
}
#headerRegister {
float: left;
overflow: hidden;
height: 45px;
width: 200px;
margin: 10px 0 0 50px;
color: #FFFFFF;
}
#headerLogin {
float: right;
width: 400px;
height: 45px;
margin: 10px 10px 0 0;
}
#headerFootball {
position: absolute;
left: 20px;
top: 20px;
}#headerTagLine {
clear: both;
background-color: #CC0000;
height: 30px;
background-image: url(header-strap.gif);
background-repeat: no-repeat;
background-position: center center;
}
#headerTagLine span {
display: none;
}#headerNewsTicker {
background-color: #680000;
height: 30px;
}
#pageDate {
float: left;
}
#news-scroller {
overflow: hidden;
/*width: 520px;*/
width: 80%;
float: right;
margin: 5px 10px 0 0;
}#headerLogo {
text-align: center;
background-image: url(grass-square.jpg);
background-repeat: repeat;
}/* Login Form */
#formLogin input {
font-size: 10px;
font-family: Arial, sans-serif;
color: #CC0000;
width: 80px;
}
#formLogin input.loginButton {
background-image: url(form-button-background.gif);
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
border: none;
margin-left: 10px;
width: 52px;
height: 18px;
}#formLogin label {
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: bold;
color: #CC0000;margin-left: 10px;
}/* Container */
#container {
margin: 0 0 0 15px;
border-top: 5px solid #CC0000;
}/* Menu */
#menu {
float: left;
width: 20%;
background-color: #6A0000;
padding: 5px;
background-image: url(menu-background.gif);
background-repeat: no-repeat;
/*background-position: right 50%;*/
}
.menuHeader {
background-color: #FFFFFF;
color: #336600;
font-style: italic;
font-weight: bold;
text-align: center;
}.menuItem {
border-top: 1px solid #000000;
padding: 5px;
}
.menuItem a {
background-image: url(menu-bullet.gif);
background-repeat: no-repeat;
background-position: 0 50%;padding-left: 15px;
}
.menuItem p {
margin: 0;
padding: 0;font-size: 10px;
color: #FFFFFF;
}/* Content */
#content {
float: left;
width: 60%;}
#contentCountdown {
text-align: center;
font-size: 14px;background-color: #660000;
margin: 5px;
padding: 5px;color: #CCCCCC;
}
#contentCountdown h2 {
font-size: 14px;
margin: 0;
padding: 0;
}/* Features */
#features {
float: right;
width: 18%;
background-image: url(grass-square.jpg);
background-repeat: repeat;
border-left: 1px solid #CC0000;
}
.feature {
background-color: #FFFFFF;
margin: 15px 0 0 0;
}
.feature h3 {
background-color: #CC0000;
margin: 0;
padding: 2px;
color: #FFFFFF;
font-style: italic;
font-weight: normal;
font-size: 12px;
text-transform: uppercase
}
.feature p {
margin: 0;
padding: 2px;
color: #999999;
}
.feature form {
margin: 0;
padding: 0;
}
Sorry, it's all a bit messy at the moment as i'm just playing about in preparation for the full project.
Grateful for any help,
Jamie
[edited by: encyclo at 3:43 pm (utc) on Nov. 4, 2005]
[edit reason] tidying up [/edit]
<?xml version="1.0" encoding="ISO-8859-1"?> and move your doctype to the very first line of the document (no white spece).
The use of an XML prolog pushes IE into quirks mode, which will cause endless problems. The XML prolog is not required, so you should always avoid using it.
