My image loads to far right in Firefox but is centered in other browsers. How do I troubleshoot the conflicting code?
<!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>©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;
}<pre><nowiki><!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>©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;
}</nowiki></pre>
Modified by cor-el
الحل المُختار
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
All Replies (6)
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?
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
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.
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?
- http://en.wikipedia.org/wiki/Screenshot
- https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
Use a compressed image type like PNG or JPG to save the screenshot.
screenshot1.jpg show the way it should look screenshot2.jpg shows the way it appears in Firefox.
Thanks so much for your help!!!
الحل المُختار
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