Need help eliminating horizontal 'bars' that appear at top and bottom of page

HTML & CSS
1

I hope I can explain this so that it will make sense.

The problem I am having is that I have somehow caused my footer background-height to double. I have also caused a dark browser-wide band to appear at the top of the browser. Before I go on I want to define how my site is organized.

I have three html folders and one css folder: These are:
html folders : major, minor and other
css folder : css

The css folder contains: home.css, majorStyle.css, minorStyle.css and reset.css stylesheets.

Here is the site link: http://www.pabriles.com/home.html

Looking at the home page you will see my footer with a text-high background along the full width of the browser. That is done by design and is how all the pages are suppoosd to look.

When you click on the menu only four menu selections work: The Basics, Hand Tools, Power Tools and More
If you click on any of the first three you will see that these pages have a wide footer background and a dark wide line at the very top.

If you click on the More menu selection it does not have these issues.

The problem - I believe - lies in how the link and script tags between the head tags are referenced from each html page. For instance, in a problem page - Hand Tools - the tags are as follows:

 <link rel="stylesheet" href="css/reset.css"> 
 <link rel="stylesheet" href="../css/majorStyle.css"> 
 <script src="js/modernizr.js"></script>

The page without the problem - More page - are as follows:

    <link rel="stylesheet" href="../css/reset.css"> 
<link rel="stylesheet" href="../css/majorStyle.css"> 
<script src="js/modernizr.js"></script>

Yes, I could make all the html pages like the latter are, but with the reset.css as it is a lot of styling is ignored. I will admit that all of these problems came about because I organized my files into folders. This tells me my directory linking is incorrect to say the least.

Any thoughts or comments will be greatly appreciated.

Thanks!

2

I’m not quite sure what you are saying but the simple fact is that:

<link rel="stylesheet" href="css/reset.css">

www.pabriles.com/major/css/reset.css

There is no stylesheet at that address and therefore the reset styles are not being applied and hence you get all the default margins on the body and everywhere else.

The stylesheet is here:

<link rel="stylesheet" href="../css/reset.css">

http://www.pabriles.com/css/reset.css

The …/ tells the browser to move up a directory.

3

@PaulOB

First of al, l thanks for your post.

Because I was not very knowledagble of a few things I was not able to make myself clear.

I was aware that …/ would take me up a directory, but I was basing content results on an < em > tag < /em > that I had embedded in my content. When the italics did not appear I thought this was due to how I had set up my path(s). I am now setting my paths as follows:`

<link rel="stylesheet" href="../css/reset.css"> 
<link rel="stylesheet" href="../css/majorStyle.css"> 
<script src="../js/modernizr.js"></script>

Now, everything is working as it should. I am styling my scripted lines via a class. My upper and lower border’s are gone. I am now good to go. Lesson learned.

Thanks again.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.