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

Just so you know, you shouldn't use characters such as > and & etc as text. I.e.:

Replace:

<p>You are in: <a href="index.htm">Home</a> > Visual impairments </p>

With:

<p>You are in: <a href="index.htm">Home</a> &gt; Visual impairments </p>

You can find a reference table here: http://www.w3schools.com/tags/ref_entities.asp

Also, in your CSS you have two widths:

.right {
width: 600px;
float: right; 
width: 85%;
text-align: left;
}

I'm assuming what you want to do there is make is so the site is expandable to 85% of the screen width but won't go smaller than 600px. If that is the case then replace width: 600px; with min-width: 600px; .

Other than that, I can't actually see anything wrong with the code. If the site is live somewhere, could you link us to it? I'm not at home right now but when I get there, I can check the site using Linux and will be able to come to a solution easier. I have Fedora Core 8 though so results may differ.

Hi there,
thanks for your suggestions, I will try that and make the amendments when I get home tonite. Unfortunately the site is not live as yet no, but I will definitely post the link when we release it if the problem is still there

When I get home I will try to replicate the problem by via a copy/paste of the code.

Just tested it and I am also getting missing words. If you remove the height: 2em under .left ul a in your CSS and it works. What's happening is the extra words are going on to the next line and since you specify a height for it, it's going out of it's box, so to speak.

Also, I retract what I said before about the width: 600px; being changed. You might as well just remove it as it isn't doing anything. I tried it myself changing it to min-width but it breaks the menu and removing it or setting it to max-width made no change so it isn't needed.

HI thanks for your replies and suggestions. I noticed the

min-width

and yes the navigation goes crazy if I put that in. Anyway, I found another way to have the text back without removing

height: 2em

, but instead in

.left ul a{

changing

width: 9em;

to

width: 12em;

so that the navigation "boxes" become a bit bigger and the text doesn't go onto the new line.

After I made the changes though the navigation stopped working in IE8 as in some of the links in the navigation were not going anywhere, and it was driving me absolutely crazy. Then when I put it online at http://www.antobbo.webspace.virginmedia.com/index.htm all the problems disappeared...odd. Anyway I will also change the ">" you mentioned before, would it cause a problem if I leave it there or is it just good practice to remove it?

It shouldn't cause problems but it is good practice to use entities (things like &gt; ). Refer to the link I provided earlier for a list.

thanks :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.