Hi guys,
I am having a nightmare with a small website I have built.
Here's the visual_impairments.htm page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title> Visual impairments </title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<div class="banner">
<h1>IT and Disability</h1>
</div>
<!-- BREADCRUMB TRAIL STARTS HERE, EVERY PAGE EXCEPT THE HOME PAGE SHOULD HAVE THIS!! -->
<p>You are in: <a href="index.htm">Home</a> > Visual impairments </p>
<!-- BREADCRUMB TRAIL STOPS HERE-->
<hr style="height:5px;border-width:0;color:red;background-color:red;" />
<!--PATRICK'S NAVIGATION-->
<div class="left">
<div class="right">
<div id="content">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="visual_impairments.htm">Visual impairments</a></li>
<li><a href="human_input_devices.htm">Human input devices</a></li>
<li><a href="topic3.htm">Topic 3</a></li>
<li><a href="topic4.htm">Topic 4</a></li>
<li><a href="references.htm">References</a></li>
<li><a href="group_members.htm">Group members</a></li>
</ul>
</div>
<div style="clear: both;">
</div>
</div>
</div>
<!--PATRICK'S NAVIGATION ENDS HERE-->
<!-- MAIN CONTENT STARTS HERE -->
<h2>Here goes your main heading </h2>
<p class="paragraph">My first paragraph y first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraphy first paragraph.</p>
<p class="paragraph"> Other paragraph </p>
</body>
<!-- MAIN CONTENT ENDS HERE -->
</html>And here is the CSS:
h1
{
text-align:center;
}
h2
{
text-align:center;
}
h3
{
text-align:center;
}
.paragraph
{
margin-right:100px;
margin-left:200px;
}
.list
{
margin-right:100px;
margin-left:200px;
}
#content {
padding: 10px 0px;
}
.right {
width: 600px;
float: right;
width: 85%;
text-align: left;
}
.right h2 {
color: #FF4800;
padding : 10px 0 15px 0;
}
.left {
width: 130px;
height: 180px;
float: left;
padding: 1px;
}
.left ul{
list-style: none;
padding: 0;
margin: 0;
}
.left ul a{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
div.banner{
background:#000099 url(wheelchair.jpg) no-repeat scroll right center;
border:1px solid black;
color:#FFFF00;
height:100px;
margin:0;
padding:15px 0 0 10px;
margin-bottom:10px;
}
body
{
background-color:#D0CFCF
}Image attached.
Now, it works fine in all the browsers in Windows (and validate of course) but when I try this on Linux (I have Ubuntu)in Firefox etc, the text in the navigation is not displayed in full. So, "Visual impairments" becomes "Visual" and "Human input devices" becomes "Human". It is chopping off the end, but it doesn't happen for "Group members" for whatever reason and only in Unix. But the operative system shouldn't really matter, should it?
I have spent hours trying to understand what is wrong with it and the only thing that I managed to get out of it is that it must be a css problem, but for the life of me I am not able to say what it is. I looked at the W3c schools, done a fair bit of research but I just don't know. I must admit that I am not that good with HTML and CSS I don't know much yet and this is my first website really, so be gentle please : - )!
Any help would be really appreciated, let me know if you need me to upload the rest of the pages or not
thanks
