Back To Website Design Forum

Wierd Firefox Issue

  • mysonmark
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 13, 2007
  • Posts: 24
  • Status: Offline

Post December 14th, 2007, 9:18 am

Hello,

I have been designing a very basic html website in Explorer 7. The layout is fine and I thought I was ready to put my site on the web.

I just by chance decided to take a look at it in firefox and it is doing all sorts of crazy stuff.

The main thing is, when I move my mouse towards the navigation bar my content shifts to the right. It sort of jumps. Does anyone know what could cause this.

Also, another thing but - but a minor one- is that behind my navigation bar I have a background that extends the length of my header. This background "bar" appears in Explorer but not in firefox. In firefox it just leaves a blank space for where it is in explorer 7.

I hope that my question is clear. I was not prepared for this. Is there some rule regarding margins or navigation bars that I need to know when designing a website to be compatible in more than just explorer 7. Please help. I am at a loss right now - I have come so far and would like to complete it.

Thanks so much

Charlene
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 14th, 2007, 9:18 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post December 14th, 2007, 9:59 am

Can you post a link or maybe paste some HTML/CSS for us to look at?

For your navigation, are you using a :hover effect?
- dM
  • mysonmark
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 13, 2007
  • Posts: 24
  • Status: Offline

Post December 14th, 2007, 10:57 am

Thank you so much for your reply

Yes, I as using the hover effect for the navigation... Could this be my problem? Thanks again. I appreciate your time.

Charlene



Here is the CSS
Code: [ Select ]
body {background-color: eaeaae}
h1 {color: black}
h2 {color: black}
p {color: 303030}
h3 {font-family: times}
p {font-family: courier}
hr {color: green}

#nav{
float:center;
width: 800px;
margin: 0;
Padding: 00px 0 0 0px;
list-style: none;
background: #ffcb2d url(border.jpg) repeat-x bottom left;}

#nav li{
float: left;
margin: 0 1px 0 0;
padding: 0;
font-family: "lucida grande", sans-serif;
font-size: 80%}

#nav a{
float: left;
display: block;
margin: 0;
padding: 4px 8px;
color: #ffffff;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #000000}

#nav a:hover {
color: #333;
padding-bottom: 5px;
border-color: #727377;
background: #fff url(offtab.jpg) repeat-x top left;}


#content{
float: left;
width: 50%;
margin-left: 100px;
padding-top: 20px;
}

#sidebar{
float: right;
width: 30%;}
  1. body {background-color: eaeaae}
  2. h1 {color: black}
  3. h2 {color: black}
  4. p {color: 303030}
  5. h3 {font-family: times}
  6. p {font-family: courier}
  7. hr {color: green}
  9. #nav{
  10. float:center;
  11. width: 800px;
  12. margin: 0;
  13. Padding: 00px 0 0 0px;
  14. list-style: none;
  15. background: #ffcb2d url(border.jpg) repeat-x bottom left;}
  17. #nav li{
  18. float: left;
  19. margin: 0 1px 0 0;
  20. padding: 0;
  21. font-family: "lucida grande", sans-serif;
  22. font-size: 80%}
  24. #nav a{
  25. float: left;
  26. display: block;
  27. margin: 0;
  28. padding: 4px 8px;
  29. color: #ffffff;
  30. text-decoration: none;
  31. border: 1px solid #9B8748;
  32. border-bottom: none;
  33. background: #000000}
  35. #nav a:hover {
  36. color: #333;
  37. padding-bottom: 5px;
  38. border-color: #727377;
  39. background: #fff url(offtab.jpg) repeat-x top left;}
  42. #content{
  43. float: left;
  44. width: 50%;
  45. margin-left: 100px;
  46. padding-top: 20px;
  47. }
  49. #sidebar{
  50. float: right;
  51. width: 30%;}


And here is the html

Code: [ Select ]
<head>
<center>

<title>CDM Financials</title>
<div id="branding">
<img src="bannerMJD.jpg" alt="city"/></div>
<ul id="nav">

<li id="t-home"><a href="home.html">Home</a></li>
<li id="t-About Us"><a href="Aboutus.html">About Us</a></li>
<li id="t-Services"><a href="Services.html">Services</a></li>
<li id="t-Privacy Policy"><a href="Privacypolicy.html">Privacy Policy</a></li>
<li id="t-Contact Us"><a href="Contactus.html">Contact Us</a></li>

</ul>
</center>
</HEAD>

<BODY>
<div id="wrap">
<div id="content">
<p>
<h2><b>WELCOME</b></h1>
<p>We are a full service public accounting firm offering hands on
financial solutions for individual tax payers and small to medium-sized businesses.
Our goal is to provide the highest quality financial services available at an affordable
price. Whether you are lacking the quality personal attention you deserve from your current
accounting firm or desperately need a CPA to step in to assist with complicated accounting and
tax matters, CDM provides the reliable, expert advice and services you need. We invite you to
explore our website to learn more about us and the services that we provide.

</div>
<div id= "sidebar"><img src="calculator.jpg"></div>
</div>
</BODY>



<div id="footer">
<center>
<img src="footertake4.jpg"></div>

</center>
</div>
</div>

</HTML>
  1. <head>
  2. <center>
  4. <title>CDM Financials</title>
  5. <div id="branding">
  6. <img src="bannerMJD.jpg" alt="city"/></div>
  7. <ul id="nav">
  9. <li id="t-home"><a href="home.html">Home</a></li>
  10. <li id="t-About Us"><a href="Aboutus.html">About Us</a></li>
  11. <li id="t-Services"><a href="Services.html">Services</a></li>
  12. <li id="t-Privacy Policy"><a href="Privacypolicy.html">Privacy Policy</a></li>
  13. <li id="t-Contact Us"><a href="Contactus.html">Contact Us</a></li>
  15. </ul>
  16. </center>
  17. </HEAD>
  19. <BODY>
  20. <div id="wrap">
  21. <div id="content">
  22. <p>
  23. <h2><b>WELCOME</b></h1>
  24. <p>We are a full service public accounting firm offering hands on
  25. financial solutions for individual tax payers and small to medium-sized businesses.
  26. Our goal is to provide the highest quality financial services available at an affordable
  27. price. Whether you are lacking the quality personal attention you deserve from your current
  28. accounting firm or desperately need a CPA to step in to assist with complicated accounting and
  29. tax matters, CDM provides the reliable, expert advice and services you need. We invite you to
  30. explore our website to learn more about us and the services that we provide.
  32. </div>
  33. <div id= "sidebar"><img src="calculator.jpg"></div>
  34. </div>
  35. </BODY>
  39. <div id="footer">
  40. <center>
  41. <img src="footertake4.jpg"></div>
  43. </center>
  44. </div>
  45. </div>
  47. </HTML>
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post December 14th, 2007, 11:51 am

In your selector #nav a:hover, you're adding 5px of bottom padding. I would imagine this is creating your display issues.

You're HTML has gone a little crazy, I think. I took the liberty of doing a quick clean up.

Code: [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CDM Financials</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {background-color:#eaeaae}
h1 {color: black}
h2 {color: black}
p {color:#303030}
h3 {font-family: times}
p {font-family: courier}
hr {color: green}
#nav{float:center;width:800px;margin:0;padding:0;list-style:none;background:#ffcb2d url(border.jpg) repeat-x bottom left;}
#nav li{float:left;margin:0 1px 0 0;padding: 0;font-family: "lucida grande", sans-serif;font-size: 80%}
#nav a{float: left;display: block;margin: 0;padding: 4px 8px;color: #ffffff;text-decoration: none;border: 1px solid #9B8748;border-bottom: none;background: #000000}
#nav a:hover {color: #333;padding-bottom: 5px;border-color: #727377;background: #fff url(offtab.jpg) repeat-x top left;}
#content{float: left;width: 50%;margin-left: 100px;padding-top: 20px;}
#sidebar{float: right;width: 30%;}</style></head>

<body>
<div id="branding">
    <img src="bannerMJD.jpg" alt="city"/></div>
<ul id="nav">
    <li id="t-home"><a href="home.html">Home</a></li>
    <li id="t-About Us"><a href="Aboutus.html">About Us</a></li>
    <li id="t-Services"><a href="Services.html">Services</a></li>
    <li id="t-Privacy Policy"><a href="Privacypolicy.html">Privacy Policy</a></li>
    <li id="t-Contact Us"><a href="Contactus.html">Contact Us</a></li></ul>
<div id="wrap">
    <div id="content">
        <h1><b>WELCOME</b></h1>
        <p>We are a full service public accounting firm offering hands on financial solutions for individual tax payers and small to medium-sized businesses. Our goal is to provide the highest quality financial services available at an affordable price. Whether you are lacking the quality personal attention you deserve from your current accounting firm or desperately need a CPA to step in to assist with complicated accounting and tax matters, CDM provides the reliable, expert advice and services you need. We invite you to explore our website to learn more about us and the services that we provide.</p></div>
    <div id= "sidebar">
        <img src="calculator.jpg"></div></div>
<div id="footer">
    <img src="footertake4.jpg"></div></body></html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>CDM Financials</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <style>
  8. body {background-color:#eaeaae}
  9. h1 {color: black}
  10. h2 {color: black}
  11. p {color:#303030}
  12. h3 {font-family: times}
  13. p {font-family: courier}
  14. hr {color: green}
  15. #nav{float:center;width:800px;margin:0;padding:0;list-style:none;background:#ffcb2d url(border.jpg) repeat-x bottom left;}
  16. #nav li{float:left;margin:0 1px 0 0;padding: 0;font-family: "lucida grande", sans-serif;font-size: 80%}
  17. #nav a{float: left;display: block;margin: 0;padding: 4px 8px;color: #ffffff;text-decoration: none;border: 1px solid #9B8748;border-bottom: none;background: #000000}
  18. #nav a:hover {color: #333;padding-bottom: 5px;border-color: #727377;background: #fff url(offtab.jpg) repeat-x top left;}
  19. #content{float: left;width: 50%;margin-left: 100px;padding-top: 20px;}
  20. #sidebar{float: right;width: 30%;}</style></head>
  22. <body>
  23. <div id="branding">
  24.     <img src="bannerMJD.jpg" alt="city"/></div>
  25. <ul id="nav">
  26.     <li id="t-home"><a href="home.html">Home</a></li>
  27.     <li id="t-About Us"><a href="Aboutus.html">About Us</a></li>
  28.     <li id="t-Services"><a href="Services.html">Services</a></li>
  29.     <li id="t-Privacy Policy"><a href="Privacypolicy.html">Privacy Policy</a></li>
  30.     <li id="t-Contact Us"><a href="Contactus.html">Contact Us</a></li></ul>
  31. <div id="wrap">
  32.     <div id="content">
  33.         <h1><b>WELCOME</b></h1>
  34.         <p>We are a full service public accounting firm offering hands on financial solutions for individual tax payers and small to medium-sized businesses. Our goal is to provide the highest quality financial services available at an affordable price. Whether you are lacking the quality personal attention you deserve from your current accounting firm or desperately need a CPA to step in to assist with complicated accounting and tax matters, CDM provides the reliable, expert advice and services you need. We invite you to explore our website to learn more about us and the services that we provide.</p></div>
  35.     <div id= "sidebar">
  36.         <img src="calculator.jpg"></div></div>
  37. <div id="footer">
  38.     <img src="footertake4.jpg"></div></body></html>
- dM
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post December 14th, 2007, 11:55 am

Also, it's typically a good idea to validate your CSS. I found a few errors (Check them out here.) These may have some effect on browser compatibility because IE interprets errors a little different than Firefox does. Firefox tends to be a little more strict, which I think isn't necessarily a bad thing.
phoenix web design
  • mysonmark
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 13, 2007
  • Posts: 24
  • Status: Offline

Post December 17th, 2007, 6:10 am

Thank you thank you thank you all So much!

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 120 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.