Website looks good in chrome and IE but not FF

[kitkat0925]

I hand coded my website. www.bondandsonsroofing.com . I have checked my site and css and have no validation issues. The site was coded in notepad ++. when you look at the site in FF you will see the name is overlapping the other wording. Another thing is that the navigation bar does not function. All of this works and looks good in IE and Chrome. Please help me to get this fixed.

[WaltS48]

Highlighting the first paragraph, right clicking and selecting "Inspect Element" shows some styles don't appear to be applied using the Firefox Developer Tools. If I remove the check mark for the struck through margin style, the page renders properly. Seems that the margin style element is the problem. But I am hardly an expert, just reporting my findings.

My suggestion for this problem would be to remove the <h1> element since you already have the company name in the logo.

Don't have any idea why the navigation bar doesn't function.

[trolly]

The navigation bar does not work because it is overlapped with the <h1> element.
I guess it is something with the float attribute. If I insert some text between the image and the <section> then it renders fine too.

[WaltS48]

Brilliant! I never thought to try that.

Unfortunately inserting some text between the image and the <section> pushes the <h1> element down in my Chromium test.

[trolly]

I don't know what is wrong but it seems that the title is somehow bound to the header element. If I give the header a height of 100px then the display is fine.

<header style="height: 100px;">
<img id="logo" src="images/sitelogo.jpg" alt="logo Call us 208-353-3707">
</header>

As far as I can see the height calculations is off at least in header and h1. Header needs to be at least 100 px and h1 70 px (when removing the empty paragraphs).

Most simple solution I found: remove the height attribute from h1.

[WaltS48]

Playing around and removing the <hr> element from the header got the nav bar to work for me.

I left the height attribute in h1, and added the header style which solved both problems. Looks the same in both Firefox, Chromium and SeaMonkey

Now kitkat0925 just needs to fix the style sheets for every page, since they all exhibit the problem.

[Dom1953]

Technically there seems to be a problem with layout logic, not syntax. The logo image is supposed to
a) float left of flowed page content (the HR element immediately following) as wall as
b) occupy 100% width.

You can't have both and Firefox is recovering badly from the contradiction. In styles.css, within the definition for #logo, include

Code: Select all

float: none;

This fixes the problem, tested.

[WaltS48]

Tested here and confirmed.

Looks like kitkat0925 is busy roofing and hasn't seen the fix yet.

[BruceAWittmeier]

I've been tinkering and it appears many of the divs do not have the # symbol preceding the name. I'm not sure it is required, but I have always used that convention. I did not copy the images to the server so they won't appear (having trouble with FireFTP also - seems you have to restart the browser to reflect the file changes).

The css file may be generic to the business but many unused code fragments appear. Same with the source. I would start from scratch rather than try to salvage the existing source. It is not overly complicated. I renamed and added some more divs just for my purpose.

Edit: Also meant to mention there is a lot of content that is not inside the <divs> so manipulating the divs has no effect on the content.

Updated the content at this link:
http://gotnarcosis.com/brucewittmeier/technical/BondSonsRoofingModified.html

The gotnarcosis.com domain was closed on 3/10/2015.

[kitkat0925]

Thanks everyone. I will be applying the fix today. Thank you so very much. Sorry it took so long. We have been busy. I also go to school.

[kitkat0925]

Playing around and removing the <hr> element from the header got the nav bar to work for me.

I left the height attribute in h1, and added the header style which solved both problems. Looks the same in both Firefox, Chromium and SeaMonkey

Now kitkat0925 just needs to fix the style sheets for every page, since they all exhibit the problem.

Sorry to seem so stupid, this is all new to me. But when you say you added the header style what are you speaking of?

[WaltS48]

Not really relevant as Dom1953's solution

Code: Select all

float: none;

for the logo style fixes the problem.

I am speaking of

Code: Select all

<header style="height: 100px;">
<img id="logo" src="images/sitelogo.jpg" alt="logo Call us 208-353-3707">
</header>

which trolly mentioned in his post.

[BruceAWittmeier]

All right...you made me feel badly that I deleted the files.

This is NOT a complete set of files but it might get you off to a good start. The images are referenced in the same directory as the main html.

Code: Select all

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">

<meta name="author" content="Kathy Bond">
<meta name="description" content="Bond &amp; Sons Roofing serves Nampa, Caldwell, Marsing, Homedale, Wilder, Greenleaf, The west side of the Treasure Valley">
<meta name="keywords"
content="shingles,designer shingles,3-tab shingles,roof ventilation,chimney flashing,hail damage,roof damage,shingle damage,waterproofing underlayment, roofing,roofing company,roofing companies,roof contractors,residential roofing,roof repair,roof installers,roofing materials, idaho roofing company, idaho roof repair, Nampa idaho roof repair, composite shingle, tile, roofing Tear-Offs, roofing Recover, New Construction, roofing company, nampa Roofing company, Caldwell">
<meta name="description" content="Family owned and operated Roofing business.">

<title>Home - Bond &amp; Sons Roofing</title>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

<div id="wrapper">

<header>
<img style="width: 799px; height: 83px;" id="logo" src="sitelogo.jpg" alt="logo Call us 208-353-3707">
</header>

<div id="hmenu">
<ul>
<li id="current"><a href="http://bondandsonsroofing.com/index.html">Home</a></li>
<li><a href="http://bondandsonsroofing.com/roofing.html">Products</a></li>
<li><a href="http://bondandsonsroofing.com/about.html">About</a></li>
<li><a href="http://bondandsonsroofing.com/contact.html">Contact Us</a></li>
</ul>
</div>

<div id="picbox"> <img src="Deerflat.jpg" alt="house with roof done" height="300" width="300">

<h1>Bond &amp; Sons Roofing, LLC</h1>

<p>We are a local roofing company that is family owned and operated.
Every job has owners working at the job, to ensure that you get the
best job possible. We guarantee our work and are very competitive in
the market. We will tell you if your whole roof don't need done and if
only a section needs repaired. We are licensed and Insured.</p>
<p>We are dedicated to providing quality workmanship and materials. We
pride ourselves on our communication, from the beginning of the project
to the end the home owner will know what is going on at every stage. </p>
<p>If you need a new shingle roof, or are building a new house and want
a quality job then you are in the right place. Give us a call today for
a free no obligation quote. We will deal with your insurance agent as
well so you don't have to deal with it either. </p>
</div>

<div id="servingArea">
<h3>Serving area</h3>
<ul>
<li>Nampa</li>
<li>Caldwell</li>
<li>Marsing</li>
<li>Homedale</li>
<li>Wilder</li>
<li>and Surrounding areas</li>
</ul>
</div>

<div id="roofingServices">
<h3>Roofing Services</h3>
<ul>
<li>Leaks</li>
<li>Repairs</li>
<li>Recover</li>
<li>Tear-Off's </li>
<li>Total Replacement</li>
</ul>
</div>

<div id="footer">
<footer class="indexcopyright"> </footer>
<p>© 2014 Bond &amp; Sons Roofing, LLC</p>
<p>License # RCE-36773</p>
<p>All Rights Reserved</p>
</div>

</div>

</body>

</html>

The styles.css file (for me it is in the same directory - you may need to move and fix the location in the source).

Code: Select all

#wrapper {
  background-color: #f0f0f0;
  margin-right: auto;
  margin-left: auto;
  width: 800px;
}

#header1 {
}

#main {
}

#footer {
}

#picbox {
}

#servingArea {
}

#roofingServices {
}

#hmenu {
}

#hmenu a:link {
}

#vmenuSA {
}

#vmenuRS {
}

#vmenuRS a:link {
}

[Dom1953]

Hi KitKat0925,

In hindsight you encountered a bug in Ghecko (Firefox's layout engine) whereby one or more consecutive block elements which

a) each have a height specification, and
b) consecutively follow a floated element image (or table for that matter), and
c) don't actually fit to the (right or) left of the float,

incorrectly update the start position of flowed content to follow, almost as if they had been layed out without the float element there at all.

Different workarounds to choose from include:

a) don't float an image if not specifically required,
b) don't provide a height specification on an immediately following block element if not specifically required,
c) explicitly clear the floated image using the CSS clear property on an immediately following element,
d) set the height of a header element containing the float to exceed that of the float,
e) heuristically insert line breaks, margins and position elements or whatever to achieve a cross browser comprimise,
f) rewrite the site without inadvertantly reproducing conditions of the bug.

Noting

a) can be achieved by adding a "float:none;" property to CSS rules for the (image) id selector #logo. One new property in styles.css.
b) might be possible if firstly the navigation bar, and then the H1 header element do not require explicit heights. a) and c) remain alternatives.
c) can be achieved by adding a "clear: both;" property to the CSS rules for the HR element (again a property addition to syles.css)
d) may fix flowed layout after the header element, but not that of the HR element within the header.
e) I really, really don't recommend.
f) as suggested by Bruce A.W. is possible after identifying the nature of the problem. You may find it overkill, however, given your busy schedule.

Personnally I liked the look in Firefox of applying both a) and c). Thanks to Trolly, WLC and BruceAWittmeier for their separate investigations which have informed mine. Please do not hesitate to ask if you have further questions.

- Dom

[trolly]

Is there a bug report for that?