...
PDA

Page not displaying correctly in FF. Ok in IE

rl.peacock47
10-15-2007, 05:39 PM
The problem is clear when you compare the website I am trying to put together by opening it in FF and then in IE.

A sample of the website is here http://www.geocities.com/robbo_lp144/Community_Maps_-_Major_Developments.html

The tabs do not overlap the banner in FF, and the blue background for the links on the right does not show, and as the text is white, you cant see the links until you move the mouse over them.

This is part of the CSS file

#tabnav { z-index: 2;
margin-left: 225px;
white-space: nowrap;
}

#tabnav, #tabnav ul li a { padding-top: 5px;
padding-bottom: 6px;
}

#tabnav ul, #tabnav ul li { margin: 0pt;
padding: 0pt;
display: inline;
list-style-type: none;
}

#tabnav ul li, #tabnav ul li a { margin-right: 5px;
}

#tabnav ul li a { border-top: 1px solid rgb(0, 0, 0);
border-left: 1px solid rgb(0, 0, 0);
border-right: 1px solid rgb(0, 0, 0);
margin: 0pt -1px 0pt 0pt;
padding-left: 5px;
padding-right: 30px;
white-space: nowrap;
line-height: normal;
}

#tabnav ul li a:link, #tabnav ul li a:visited, #tabnav ul li a:active, #tabnav ul li a:hover { text-decoration: none;
}

#tabnav ul li span.divider { display: none;
}

* html #tabnav ul li, * html #tabnav ul li a { border-top: 1px solid rgb(0, 0, 0);
width: auto;
display: inline;
}

* html #tabnav, * html #tabnav ul a { height: 0.01%;
}

* html #TABNAV { padding: 0pt;
}

#tabnav ul li a:link, #tabnav ul li a:visited { padding: 5px 10px 6px;
text-decoration: none;
background-color: rgb(65, 105, 225);
color: rgb(0, 0, 0);
font-weight: bold;
}

#tabnav ul li a:hover, #tabnav ul li a:active, #tabnav ul li a.here, #tabnav a.here, #tabnav ul a.here { background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}

#rightnav { z-index: 2;
margin-left: 713px;
white-space: wrap;
}

#rightnav, #rightnav ul li a { padding-top: 5px;
padding-bottom: 6px;
}
.clear { clear: both;
}

#rightnav ul, #rightnav ul li { margin: 0pt;
padding: 0pt;
display: inline;
list-style-type: none;
}


Tabnav is the tabs, and rightnav is the links on the right.

Here is the HTML for the site.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<html>
<head>
<script language="javascript">
function popwin(url)
{
window.open(url, 'popwin', 'width=400,height=200,resizable=no,scrollbars=no,toolbar=no,location=no,directories=no,status=no,men ubar=no,copyhistory=no');
return false;
}
</script>
</head>
<body>

<html>
<head>
<title>Major Developments - Community Maps</title>


<link rel="stylesheet" href="style8.css" type="text/css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<meta content="London, agenda21, greenmap, sustain, green, community, development, clean, environment, network, government, sustainable, map, local, living, ecology, recycle, energy, event, news" name="keywords">

<meta content="London21 Green Map V2" name="description">

<link href="inc/greenmap/images/favicon.ico" type="image/x-icon" rel="shortcut icon">

<meta content="MSHTML 6.00.2900.3157" name="GENERATOR">

</head>


<body>

<div id="wrapper">
<div id="netbar">
<div id="netlinks"><a href="http://www.london21.org/user/login">My Account</a>&nbsp;|
&nbsp;<a href="http://www.london21.org/">London 21</a>&nbsp;|&nbsp;<a class="nethere" href="http://mcsc.london21.org">Community Maps</a>&nbsp;|&nbsp;<a href="http://www.londongreenmap.org/">London
Greenmap</a>&nbsp;|&nbsp;<a href="http://www.lovelondon.org.uk/">Love London</a>&nbsp;|</div>

</div>

<div id="l21header">
<div id="gmheader"><br>

</div>

<div id="maincontent">
<div id="tabnav">
<ul>

<li><a href="http://communitymaps.london21.org/add_content.php">Add
Content</a> </li>

<li><a href="http://communitymaps.london21.org/forum.php">Discuss</a>
</li>

<li><a class="here" href="http://communitymaps.london21.org/about_map.php">What are 'Community Maps'?</a> </li>

<li><a href=""http://communitymaps.london21.org/help.php">Help</a>
</li>

<li> </li>

</ul>

</div>

<div id="page">
<div id="greenmaptext">
<p><b style=""><span style="font-size: 11pt; font-family: &quot;Trebuchet MS&quot;;" lang="EN">Major
Developments<o:p></o:p></span></b></p>

<br>

<br>

<p><span style="font-size: 11pt; font-family: &quot;Trebuchet MS&quot;;" lang="EN"><o:p></o:p></span></p>

<p></p>

<div id="maincontent">
<div id="rightbar"><br>

<ul>

<li><a href="http://communitymaps.london21.org/">Mapping
Change for Sustainable Communities</a></li>

<li><a href="http://communitymaps.london21.org/">Project
Partners</a></li>

<li><a href="http://communitymaps.london21.org/">Ecotext</a></li>

<li><a href="http://communitymaps.london21.org/">Why
East London?</a></li>

<li><a href="http://communitymaps.london21.org/">What
is Bio-Mapping</a></li>

<li><a href="http://communitymaps.london21.org/">Major
Developments</a></li>

</ul>

</div>

</div>

<div id="footer">
<p align="center"><a href="http://communitymaps.london21.org/">&copy; London
21</a></p>

</div>

</div>

</div>

</div>

</div>

</body>
</html>

It seems as if it is a problem with the CSS as that is where these particular items are formatted.


Thanks
yume
10-15-2007, 06:09 PM
Can I suggest you start off by running your html code through a validator - there are a few mistakes in there and if you correct these you'll be on a more level playing field.

http://validator.w3.org/

There's things like you've got two html tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<html>

and two " throwing links off:

<a href=""http://communitymaps.london21.org/help.php">Help</a>

Clean things up a bit and then see what happens....
vexen
10-15-2007, 06:11 PM
just like this, rightnav is included in the css and rightbar in the html...

why not giving a background color to the rightbar?

#rightbar ul {
background-color: rgb(65, 105, 225);
}

however...

you should try using a position:relative with your z-index, but i'm on a slow computer and i cannot test this right now
i've seen you use the ID of maincontent more than once, an ID should only be used once in a document.
rl.peacock47
10-17-2007, 03:13 PM
I'll try and clean the page up a bit. It seems that the first error i mention for the rightbar problem was a simple error missing out the semi-colon at the end of one of the rightbar css codes.

But im having the problem of the tabs not covering the image in firefox. It probably is a simple error like the previous one. It seems that firefox is a lot more picky in what it will understand than IE.

Thanks
_Aerospace_Eng_
10-17-2007, 04:33 PM
Actually if you change this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You will see that IE will probably end up looking the same way as Firefox in which case its not the browser thats the issue, its your code.
rl.peacock47
10-17-2007, 05:58 PM
I think I have sorted it now.

It was something to do with FF responding to a certain command in ajusting the place of tabnav in CSS, where IE just seemed to put it where it thought looked best!

Thanks

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum