Coding Forum

**enrmpaga** · 01-12-2007, 08:05 AM

hello all, i've been working on this webby since yesterday and in microsoft explorer the site displays fine and working how it should be.

however in firefox all the contents on the page are displaying aproximately 100pixels to the left, then if i click on a link the contents on the page shift to there intended position. If i keep clicking a link the contents continue to shift left to right.

html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Author" content="me">
<meta name="keywords" content="keywords">
<meta name="description" content="desription">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Pro-Active Legal</title>

<style type="text/css" media="screen">@import url(style.css);</style>
</head>

<body>
<div id="viewer">
<div id="main">
<div id="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="jpgs/alphapa.jpg" width="299"></td>
<td><img src="jpgs/banner.bmp" width="449"></td>
</tr>

</table>
</div>

<table id="navtab" width="700" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="200" valign="top">
<img src="jpgs/proactive-logo.jpg" alt="PROACTIVE LEGAL" width="199px" height="135px">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 2</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 3</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 4</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 5</a></li>
</ul>

</div>
</td>

<td valign="top">
<div id="navcrums">
<table summary="Navigation Crums" border="0" cellspacing="0" class="crumstab">
<tr class="crumstab">
<td class="crumstab">You Are Here: <a title="Home Page" class="breadcrumblinked" href="index.html">Home</a>
> <span class="breadcrumbcurrent">Home</span></td></tr>
</table></div>


<br>
<h1>Welcome to Pro-Active Legal</h1>
<p><font size="3">pg content</p>

</tr></table>
</div> 

<div id="footer">
<p>footer info</p>
</div>

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

CSS:

html, body, #viewer {
min-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

h1 {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 15pt;
color: #990000;
}

html>body #viewer {
height: auto;
}

#viewer {
position: absolute;
top: 0;
left: 0;
}

#main {
height: auto;
padding: .5em;
padding-top: 0em;
padding-bottom: 5em;
width: 80%;
margin: 0 auto;
}

#header {
border: 0 none;
display: table;
width: 60%;
}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(jpgs/background.bmp);
background-repeat:repeat-x;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
background-image: url(jpgs/background.bmp);
background-repeat: repeat-x;
height: 120px;
background-position: bottom;
vertical-align: bottom;
text-align: center;
}

#nav {
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: #000000;
width: 200px;
}

#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#nav li {
border-bottom: 1px solid #ffffff;
margin: 0;
list-style: none;
list-style-image: none;
}

#nav li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #000066;
border-right: 0px;
background-color: #990000;
color: #fff;
text-decoration: none;
width: 180px;
font-size: 10pt;
}

html>body #nav li a {
width: auto;
}

#nav li a:hover {
border-left: 10px solid #333366;
border-right: 0px;
background-color: #993333;
color: #fff;
}

#navtab {
margin: 27px 0px 0px 34px;
}

#navcrums td {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
padding-bottom:2px;
padding-left:6px;
padding-right:6px;
}

#navcrums a {
text-decoration: underline;
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
}

end code...

i've been looking over the code myself for the past two hours now and am getting nowhere.. if somebody can spot the problem i would be greatful..

thanks michael..

**LadynRed** · 01-12-2007, 10:34 PM

First thing.. dump the tables, you do not need them for layout, that's what the CSS will do.

Second thing, do NOT design and test using IE as your primary because IE 6 (and below) have so many bugs and does so many things WRONG, you'll drive yourself nuts. Test against FF FIRST, then kick IE until it behaves.

Third, do not use position: absolute on everything, it will cause you trouble. Absoutely positioned elements are completely removed from the document flow and are completely unaffected by anything else on the page.

In your html - images must have width AND height defined. It is also NOT a good idea to use bmp images, stick to jpg, gif or png. If those 2 images make up your header, consider putting them in as a background to your #header instead.

Rather than using an image for your page title, use the proper HEADING - H1 - H6, the search engines will like it much better.

Try this:

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Author" content="me">
<meta name="keywords" content="keywords">
<meta name="description" content="desription">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Pro-Active Legal</title>

</head>

<body>
<div id="viewer">
<div id="main">
<div id="header">

<img src="jpgs/alphapa.jpg" width="299" height="200"><img src="jpgs/banner.bmp" width="449" height="200">
</div>
<h1>PROACTIVE LEGAL</h1>


<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 2</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 3</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 4</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank">Link 5</a></li>
</ul>

</div>

<div id="navcrums">
<p class="crumstab">You Are Here: <a title="Home Page" class="breadcrumblinked" href="index.html">Home</a>
> <span class="breadcrumbcurrent">Home</span></p>
</div>


<div id="content">
<h1>Welcome to Pro-Active Legal</h1>
<p>pg contents go here pg contents go here pg contents go here pg contents go here
pg contents go here pg contents go here pg contents go here pg contents go here pg contents go here
</p>

</div> 
<br class="brclear"> 

<div id="footer">
<p>footer info</p>
</div>
</div> 

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

CSS:

html, body, #viewer {
min-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

h1 {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 15pt;
color: #990000;
}

html>body #viewer {
height: auto;
}

#viewer {
position: relative;
/*top: 0;
left: 0;*/
/*border: 1px solid red;*/

}

#main {
height: auto;
padding: .5em;
padding-top: 0em;
padding-bottom: 5em;
width: 80%;
margin: 0 auto;
border: 1px solid blue;
}

#header {
/*border: none;*/
/*display: table;*/
width:80%;
height: 200px;
}
#content{
margin-left: 220px;
background: #FFF8DC;
}

body {
margin: 0;
/*margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;*/
background: url(jpgs/background.bmp)repeat-x;
/*background-repeat:repeat-x;*/
text-align: center; /*makes IE center */
}
img{
border: none;
}

#footer {
/*position: absolute;*/
/*bottom: 0;*/
width: 100%;
background: #666 url(jpgs/background.bmp) repeat-x;
/*background-repeat: repeat-x;*/
height: 120px;
background-position: bottom;
/*vertical-align: bottom;*/
text-align: center;

}

#nav {
float: left;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: #000000;
width: 200px;
}

#nav ul {
list-style: none;
margin: 0;
padding: 0;
/*border: none;*/
}

#nav li {
border-bottom: 1px solid #ffffff;
margin: 0;
list-style: none;
/*list-style-image: none;*/
}

#nav li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #000066;
border-right: 0px;
background-color: #990000;
color: #fff;
text-decoration: none;
width: 180px;
font-size: 10pt;
}

#nav li a {
width: auto;
}

#nav li a:hover {
border-left: 10px solid #333366;
border-right: 0px;
background-color: #993333;
color: #fff;
}

#navtab {
margin: 27px 0px 0px 34px;
}

#navcrums{
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
padding: 0 6px 2px 6px;
margin-left: 30px;
/*padding-bottom:2px;
padding-left:6px;
padding-right:6px;*/
}

#navcrums a {
text-decoration: underline;
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
}
.crumstab{
margin-left: 30px;
}

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;

}

No tables !