A Bit of Trouble with CSS

[mattyd]

To begin, I have not written any HTML/CSS in about 4-years, so in a sense I'm relearning.

My issue at this point is this:

I want my footer to span the length of the window. Simple enough; But, it is leaving an approximately 10-px gap on the left of the screen.

Here is the the CSS:

footer
{
float: left;
width: 1230px;
padding:40px;
background-color:#c81818; /* the critical component */ 
border-top: 4px solid #c81818; 
border-left: 4px solid #c81818; 
border-right: 4px solid #c81818; 
border-bottom: 4px solid ##c81818; 
margin:0px;
font-family:"Trebuchet MS",Helvetica, sans-serif;
color:#ffffff;
font-size:16px;
}

I will supply the URL or further mark-up upon request.

Thank you in advance!
Matthew

[JorgeM]

If you want it to span the width of the window, the width should be set to 100%.

Also the gap could be the body element. You should consider including a CSS "reset" at the top of the file. In the meantime, you may consider applying a margin:0 to the html & body element.

[mattyd]

Thank you, Sir. I will try your suggestions today.

Matthew

[JorgeM]

You can supply the URL too. that's fine.

[mattyd]

(I just wrote you a long post, JorgeM, and upon submission, it disappeared - This is an ongoing problem/bug here)

Rewritten, short version:

Thank you for all your help.

I tried you suggestions from your post above.

My URL is (Please note, the project does not launch until 1/1/15, so this page is basically a landing for bots to start indexing - I warn you, it's not pretty!): http://redlinedown.com/

Thank you in advance,
Matthew

[Dani]

(I just wrote you a long post, JorgeM, and upon submission, it disappeared - This is an ongoing problem/bug here)

Yet one I can't reproduce and no one seems to be able to give me any hints as to what is going on when it happens or how long it's been going on or anything reproducable :(

[mattyd]

Dani: It is happening constantly to me. Very frustrating.

When I have the time, I will reproduce it multiple times and file an official bug report for you, all steps, browser version(s), OS, line connection speed etc.

My speciality is QA - I will help with this.

Thank you.

Matthew

[pixelsoul]

I've seen it happen once now too. Keeping a console open when submitting might show some clues as to what is happening there.

[JorgeM]

A few things that I noticed...

1) you had absolute positioning on the body element. Remove that.
2) you need to "reset" the elements to override the default user agent (browser styles). So add margin:0 to the body element.
3) on the footer, you are applying a border that's the same color as the background, so i'm not sure the thought there, but you had an error on border-bottom. the color you assigned included 2 #s.

Result of these adjustments....

If you would like to "push" the footer down to the bottom of the page even when there is not enough content in the page to "naturally" push the footer down, here is an overview on how to do that: Pushing a Footer to the Bottom of a Web Page

[mattyd]

Thank you, JorgeM! You're awesome.

I'll get back to you on this.

[mattyd]

JorgeM:

I am looking into CSS Reset - I never knew of this before and it's so important - Thank you.

Q: Should I use the reset code in a seperate CSS file?
Q: This practice will not override my current preset styles, only affect built-in, browser CSS styles?
Q: In my default CCS file, do I apply the reset above each intended element, such as:

*{ margin:0; padding:0; }
p { margin:5px 0 10px 0; }

Would this not render all of my styles defunct?

Also, in the above code snippet, I do not understand the following: "margin:5px 0 10px 0;", why is 0 after 5px and also after 10px? What does that do?

I will wait to implement this until I hear back from you.

Thank you in advance for all your assistance!

Matthew

[travis.holt.921_2]

Change the body css in your style.css to the following...

body {
margin: 0px !important;
background-color: #ffffff;
vertical-align: top;
}

[JorgeM]

Hi Matthew,

Should I use the reset code in a seperate CSS file?

You can. That's fine. However, you can just include the reset section first in your existing style sheet so the other styles override the reset settings.

This practice will not override my current preset styles, only affect built-in, browser CSS styles?

Yes correct; you have to apply the reset styles first. Styles are applied in order.

In my default CCS file, do I apply the reset above each intended element...

I create a "reset block" so this block is first before any of my own styles.

 *{ margin:0; padding:0; }

This is called the universal selector. May not be a good idea. Do some reading on that.

Also, in the above code snippet, I do not understand the following:

 margin:5px 0 10px 0;

why is 0 after 5px and also after 10px? What does that do?

Margin is a shortcut property. It is made up of margin-top, margin-right, margin-bottom, and margin-left. and in that order.

 margin: top right bottom left;

[kevwood]

i use this to reset everything, i place this at the top of the style sheets.

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, table, 
    caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
}

cannot remeber where i got this from but it was posted to me as a reset for the browser styles, it seems to work with no problems.