X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

My image loads to far right in Firefox but is centered in other browsers. How do I troubleshoot the conflicting code?

Posted
<!DOCTYPE HTML>
<html>

<head>
 <!-- #BeginEditable "doctitle" -->
 <title>Falmouth Goat Races</title>
 <!-- #EndEditable -->
 <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
 <style type="text/css">
.auto-style1 {
 font-size: medium;
}
</style>
</head>

<body>

<div id="wrapper">
 
  <div id="top">
   
   <div id="logo"> 
    <img src="images/goatracelogo1.jpg" height="106" width="760" />
   </div>
   
   <div id="social-media">
    <p class="auto-style1">Connect With Us</p>
    <ul>
     <li><a href="https://www.facebook.com/FalmouthGoatRace?ref=ts&fref=ts"><img src="images/icons/facebook.png" alt=fb /></a></li>
     
    </ul>
    
   </div>
   
  </div>
  
  <div id="topnav">
   <ul>
    <li><a href="index.html">WELCOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="products.html">PRODUCTS</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="team.html">TEAM</a></li>
    <li><a href="contact.html">CONTACT</a></li>
   </ul>
  </div>
  
  <div id="banner">
   <img src="images/fb3.jpg" alt="ken" height=250px; width=333px; class="kenny"/>
  </div>
  
  <div id="subbanner">
   <h3>

Welcome to the Home Page of the

Falmouth Civic Association,

Falmouth, PA </h3>
   <h3>

   Along the beautiful Susquehanna River

</h3>
   <h3>

   Just below Three Mile Island</h3>
  </div>
 
        <div id="content">
            <!-- #BeginEditable "Content" -->
            <h1>The Legend of the Goat Race </h1> 
            <p class="hipple">

            <img alt="hipple" height="329" src="images/hipple.jpg" width="151" style=float:left; >Once upon a time in a tiny village called Falmouth, there were several old timers sitting around the Village Store discussing life's misfortunes. It seems that John was a little down on his luck at the horse track. Seeing as they all had goats as family pets, prompted Glenn to remark that they might as well bet on goats.

            Well, that was all it took for Ken, the practical joker of the group, to get an idea! The next day, Ken placed an ad in the local newspaper, advertising a Goat Race in Falmouth and giving his friend Glenn's phone number.

            Meanwhile, back in the village, life went on as usual. Except, people started calling Glenn's phone number wanting to enter their goats in the race. Which didn't make any sense to poor Glenn's wife, who spent half of the day answering the telephone. But, being a good wife, she took everyone's name and phone number and when Glenn returned home that evening, she gave him the stack of messages (entries).

            Now as the "good ol' boys" got together that night, they decided the only way to save face was to hold a goat race. And it was such a huge success that they have done it every year from that day up to the present.</p>

  </div> 
 
  <div id="footer">
   <p>&copy;Copyright - 2013 Falmouth Goat Races </p>
  </div>
        
   </div>

</body>
</html>



/* Reset */

html, body { margin: 0; padding: 0; border: 0;  
    background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
 margin: 0;
 padding: 0;
 border: 0;
 vertical-align: baseline;
 background: transparent;
 }

img  { margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
 margin: 0; padding: 0; border: 0;
 vertical-align: baseline;
 background: transparent;
 }
 
table { border-collapse: collapse; border-spacing: 0; }
 
input, select, textarea, form, fieldset {
 margin: 0; padding: 0; border: 0;
 }

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
 display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
 font-family: Arial, Helvetica, sans-serif;
 font-size:100%;
 font-weight: normal;
 font-style: normal;
 line-height: 100%; 
 text-indent: 0;
 text-decoration: none;
 text-align: left;
 color: #000;
 }

ol, ul { list-style: none; }


/* Global */

html  { }
body { background-color:#eeeeee; }



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* Text Elements */

p            { color:#000; font-size:12px; line-height:150%;  }
p .left   { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right   { margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a            {   }
a:link   { color: #00f;  }
a:visited  { color: #0f0;  }
a:active  { color: #000;  }
a:focus   { color: #666;  }
a:hover      { color: #f00;  }

blockquote   { color:#000; font-size:12px; }

strong       { font-weight: bold; }
em         { font-style: italic; }

/* Images */



/* Lists */

ul           {  }
ol           { list-style-type:decimal; }

ul li      { color:#000; font-size:12px; }
ol li       { color:#000; font-size:12px; }

dl           {   }
dt         {   }
dd           {  }



/* Tables */

table        { width:100%; }

tr    { }
.odd   { background-color:#eee; }
.even   { background-color:#fff; }

th           { font-weight: bold; }
thead, th     { background: #ccc; }

tbody   {   }

th,td,caption  {  }
caption   {  }

tfoot        { }
.tfooter  { background-color:#ccc; text-align:center; font-style:italic; }

caption      { background: #efefef; }


/* Containers */

#wrapper    { width:950px; height:1100px;margin:0px auto; background-color:#ffffff;   }

#top    { background-color:#000000; width:100%; padding:20px 0; overflow:hidden;  }

#logo    { margin:0 0 0 10px; float:left; }

#social-media  { float:right; margin:0 10px 0 0; }
#social-media p  { color:#ffffff; font-size:11px; margin:4px 10px 4px 0px; }
#social-media img { width:36px; height:36px; }
#social-media ul li { display:inline; }

#topnav    { background-color:#333333; clear:both;   }
#topnav ul   { width:100%; float:left; margin:0px; background-color:#333333;
      border-bottom:3px #cccccc solid; } 
#topnav ul li  { display:inline; }
#topnav ul li a  { float:left; padding:10px 20px; }

#topnav a:link  { color:#ffffff; }
#topnav a:visited { color:#ffffff; }
#topnav a:active { color:#ffffff; }
#topnav a:hover  { color:#ffffff; background-color:#770000; }
#topnav a:focus  { color:#ffffff; }




#subbanner    { width:100%; background-color:#555555; 
      padding:15px 0; overflow:hidden;    }
#subbanner h3  { color:#ffffff; font-size:16px; font-weight:bold; 
      text-align:center; line-height:180%; }

#content    { float:left; width:875px; padding:20px; }
#content h1   { margin: 0 0 20px 0; font-size:32px;
      border-bottom:1px #777777 solid; padding:20px 0;  }
#content p   { margin:16px 0; line-height:160%; }
#content h2   { margin:20px 0 0 0; }
#content img  { padding:8px; border:1px #888888 solid; margin:8px; }


#footer    { clear:both; background-color:#000000; padding:10px 0;  }
#footer p   { text-align:center; color:#ffffff; }

#box1 {   }

#box2 {   }

#box3 {   }

#box4 {   }

#box5 {   }

#box6 {   }


/* Layout Extra */




/* Navigation Extra */



/* Forms */

form { text-align:left; margin:20px; }

label, submit, input, textarea {
 border:0; padding:0; margin:0; background:none; 
 }

label { 
 float: left; width: 150px;
 text-align:right; display:block;
 }
 
input, textarea { 
 border:1px #333 solid; margin-left:10px;  
 }

input { 
 width: 280px; margin-bottom: 16px; 
 }

textarea {
 width: 280px; height: 150px;
 margin-bottom: 16px;
 }

select { }

.submit {
 width:90px; height:25px;
 margin-left:150px;
 font-size:12px;
}

h1 {
 text-align:center
}


br { clear: left;  }

#banner {
 background-color:black
}

.kenny {margin: 0px auto; display: block;}

.hipple {
 margin-left:15px; font-size:18px; 
}

Modified by cor-el

Chosen solution

That looks like a missing clear:both rule that causes Firefox to start that image at the right of the menu bar.


#banner {
 background-color:black;
 clear:both; 
}
Read this answer in context 2

Additional System Details

Installed Plug-ins

  • Shockwave Flash 11.6 r602
  • Next Generation Java Plug-in 10.17.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.02
  • Google Update
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • 5.1.20125.0
  • VLC media player Web Plugin 2.0.2
  • RealJukebox Netscape Plugin
  • RealNetworks(tm) RealPlayer Chrome Background Extension Plug-In
  • RealPlayer(tm) HTML5VideoShim Plug-In
  • RealPlayer(tm) LiveConnect-Enabled Plug-In
  • 15.0.0.198
  • Provides additional functionality on Facebook. See our web site for details.
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers
  • Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
  • DRM Netscape Network Object
  • Npdsplay dll
  • DRM Store Netscape Plugin
  • np-mswmp
  • Office Plugin for Netscape Navigator
  • Macromedia Shockwave for Director Netscape plug-in, version 8.5

Application

  • Firefox 19.0.2
  • User Agent: Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0
  • Support URL: http://support.mozilla.org/1/firefox/19.0.2/WINNT/en-US/

Extensions

  • DownloadHelper 4.9.14 ({b9db16a4-6edc-47ec-a1f4-b86292ed211d})
  • Easy YouTube Video Downloader 6.7 ({c0c9a2c7-2e5c-4447-bc53-97718bc91e1b})
  • Firebug 1.11.2 (firebug@software.joehewitt.com)
  • Troubleshooter 1.0a (troubleshooter@mozilla.org)
  • United States English Spellchecker 6.0 (en-US@dictionaries.addons.mozilla.org)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: NVIDIA GeForce 7300 LE
  • adapterDescription2:
  • adapterDeviceID: 0x01d1
  • adapterDeviceID2:
  • adapterDrivers: nv4_disp
  • adapterDrivers2:
  • adapterRAM: Unknown
  • adapterRAM2:
  • adapterVendorID: 0x10de
  • adapterVendorID2:
  • direct2DEnabled: False
  • direct2DEnabledMessage: [u'']
  • directWriteEnabled: False
  • directWriteVersion: 0.0.0.0
  • driverDate: 1-3-2013
  • driverDate2:
  • driverVersion: 6.14.13.774
  • driverVersion2:
  • info: {u'AzureContentBackend': u'none', u'AzureCanvasBackend': u'cairo', u'AzureFallbackCanvasBackend': u'none'}
  • isGPU2Active: False
  • numAcceleratedWindows: 2
  • numTotalWindows: 2
  • webglRenderer: Google Inc. -- ANGLE (NVIDIA GeForce 7300 LE)
  • windowLayerManagerType: Direct3D 9

Modified Preferences

  • accessibility.typeaheadfind.flashBar: 0
  • browser.cache.disk.capacity: 358400
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size.use_old_max: False
  • browser.cache.disk.smart_size_cached_value: 358400
  • browser.places.smartBookmarksVersion: 4
  • browser.startup.homepage: www.yahoo.com
  • browser.startup.homepage_override.buildID: 20130307023931
  • browser.startup.homepage_override.mstone: 19.0.2
  • dom.mozApps.used: True
  • extensions.lastAppVersion: 19.0.2
  • keyword.URL:
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1363436774
  • places.history.expiration.transient_current_max_pages: 80491
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • privacy.cpd.offlineApps: True
  • privacy.cpd.siteSettings: True
  • privacy.sanitize.migrateFx3Prefs: True
  • privacy.sanitize.timeSpan: 0
  • security.warn_viewing_mixed: False

Misc

  • User JS: No
  • Accessibility: No
jscher2000
  • Top 10 Contributor
2368 solutions 20966 answers

Instead of posting HTML here, which the board is not really designed to handle, could you edit your post to clear that out and provide the URL to the page that has the problem?

When I look at the home page at http://www.falmouthgoatrace.org/ I don't see a problem.

When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.

(1) Bypass Firefox's Cache

Use Ctrl+Shift+r to reload the page fresh from the server.

Alternately, you also can clear Firefox's cache completely using:

orange Firefox button (or Tools menu) > Options > Advanced

On the Network mini-tab > Cached Web Content : "Clear Now"

If you have a large hard drive, this might take a few minutes.

(2) Remove the site's cookies. Save any pending work first.

While viewing a page on the site, you can call the dialog to remove the cookie using either:

  • right-click and choose View Page Info > Security > "View Cookies"
  • Alt+t (open the classic Tools menu) > Page Info > Security > "View Cookies"

Then try reloading the page. Does that help?

Question owner

I am so sorry for using the site against what is intended. My problem lies in that I have not uploaded this to the server and this only happens when I am using Expression Web 4 and go to Preview in Browser and the image I am using on the page shifts drastically to the right. It works fine in Safari, Chrome, and IE8. I have no idea why as the code looks fine to me. Any ideas what might be causing it to shift like that in Firefox? I have tried to clear all cookies and browsing history. It still does not center the image as I would like. Once again sorry for the trouble. Just need a little guidance is all

jscher2000
  • Top 10 Contributor
2368 solutions 20966 answers

There are some things I can successfully guess at without seeing them, but I can't do it in this case...

Could you post just the minimal amount of the page needed to re-create the problem, i.e., do a Save As, then remove everything unnecessary until the problem goes away, then undo the last thing you removed. You can post the source of your resulting page on Pastebin (http://pastebin.com/) and provide a link in a reply.

cor-el
  • Top 10 Contributor
  • Moderator
10762 solutions 96861 answers

I've edited your post to show the HTML and CSS code so it should be possible to look at it more closely.
Of course we do not have the images, but it seems to look OK to me if I compare the layout between Firefox and Google Chrome.

Can you attach a screenshot?

Use a compressed image type like PNG or JPG to save the screenshot.

Question owner

screenshot1.jpg show the way it should look screenshot2.jpg shows the way it appears in Firefox.

Thanks so much for your help!!!

cor-el
  • Top 10 Contributor
  • Moderator
10762 solutions 96861 answers

Chosen Solution

That looks like a missing clear:both rule that causes Firefox to start that image at the right of the menu bar.


#banner {
 background-color:black;
 clear:both; 
}

Modified by cor-el