PDA

View Full Version : firefox/explore compat issuses.. need help...



enrmpaga
Jan 12th, 2007, 02:13 PM
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>Company title</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" 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>
&gt; <span class="breadcrumbcurrent">Home</span></td></tr>
</table></div>

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

</tr></table>
</div> <!-- End Main -->


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


</div> <!-- End Viewer -->
</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 eternaly grateful ..

thanks michael..

ahallicks
Jan 12th, 2007, 02:43 PM
Dude, code tags. Please read the faq and rules! And a link to your site would be great :)

enrmpaga
Jan 12th, 2007, 03:13 PM
there's just something coded wrong making the webby behave like this in firefox.

I think i maybe the list <ul> settings, making it expand moving the navigation in the process.

sorry, my html with tags:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Author" content="Michael Pagan">
<meta name="keywords" content="keywords">
<meta name="description" content="description">
<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"> <!-- sets the viewpoint -->
<div id="main"> <!-- sets main body of pg -->
<div id="header"> <!-- page header -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="jpgs/alphapa.jpg" alt="PROACTIVE LEGAL" width="299"></td>
<td><img src="jpgs/banner.bmp" alt="PROACTIVE LEGAL" width="449"></td>
</tr>

</table>
</div> <!-- end header -->

<!-- navigation -->
<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" title="Pro-Active Legal">Home</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank" title="Proactive Legal">Link 2</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank" title="Proactive Legal">Link 3</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank" title="Proactive Legal">Link 4</a></li>
<li><a href="http://www.proactivelegal.co.uk/" target="_blank" title="Proactive Legal">Link 5</a></li>
</ul>
</div> <!-- end navigational array -->

<!-- quick link display -->
<table id="quicklinks" border="0" cellspacing="0">
<tr class="linkstitle">
<td class="linkstitle"><b>Quick Links</b></td>
</tr>
<tr class="desc1">
<td class="desc1"><a title="Quick Link 1" href="http://www.proactivelegal.co.uk/" target="_blank">Quick Link 1</a></td>
</tr>
<tr class="desc2">
<td class="desc2">Quick Link 1... example text...</td>
</tr>
<tr class="desc3">
<td class="desc3">&nbsp;</td>
</tr>
<tr class="desc1">
<td class="desc1"><a title="Quick Link 2" href="http://www.proactivelegal.co.uk/" target="_blank" class="link">Quick Link 2</a></td>
</tr>
<tr class="desc2">
<td class="desc2">Quick Link 2... example text...</td>
</tr>
<tr class="desc3">
<td class="desc3">&nbsp;</td>
</tr>
<tr class="desc1">
<td class="desc1"><a title="Quick Link 3" href="http://www.proactivelegal.co.uk/" target="_blank" class="link">Quick Link 3</a></td>
</tr>
<tr class="desc2">
<td class="desc2">Quick Link 3... example text...</td>
</tr>
<tr class="desc3">
<td class="desc3">&nbsp;</td>
</tr>
</table>
</td>
<!-- Breadcrumbs-->
<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>
&gt; <span class="breadcrumbcurrent">Home</span></td></tr>
</table></div> <!-- end breadcrumbs-->

<!--Page Contents-->
<br>
<h1>Welcome to Pro-Active Legal</h1>
<p>pg content</p>
</tr></table></div> <!-- End Main -->


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


</div> <!-- End Viewer -->
</body>
</html>

Excavator
Jan 12th, 2007, 05:15 PM
Hello enrmpaga,
In FF2 and IE7 I can't really see any differences in how it's displayed.

The code tags ahallics was referring to is the code window:
paste your css/html here

When writing your message, click on the # in the editor window and put your code inside [ code][ /code] tags