dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Bug in CSS background color?

  1. #1
    Join Date
    Nov 2017
    Posts
    4

    Angry Bug in CSS background color?

    Hey guys,

    First time poster so my apologies if I'm not in the right place. I'm taking a super simple web design class at a community college and having trouble with the background color of the "main" element. At the top of the main section there appears to be a 20px border where the background color of the "nav" element bleeds in. If I apply a 1 pixel border to the main section the problem is resolved but I am still left with an undesired border. Is it just my browser or what? I've attached 3 files. 2 are screen shots of the problem and the 3rd is a zip file including all source documents for the assignment.

    Any Help is appreciated!

    https://www.dropbox.com/s/71ituokbko...quiry.png?dl=0

    https://www.dropbox.com/s/4e0z42o9cz...uiry2.png?dl=0

    https://www.dropbox.com/s/9kvym9tyxf...aJam9.zip?dl=0

  2. #2
    Join Date
    Nov 2016
    Posts
    1
    Hey, why not you host your code on codepen or similar sites. It could be much easier for us to see the code and edit it on the fly.

    [ Go to codepen and sign up. Create a new pen and copy and paste your HTML, CSS, JavaScript code there and then mention the link of your newly created pen here. ]

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,846
    Hi there IanSkelskey,

    you may possibly find this link helpful to your cause...

    http://hostetteroutfitter.com/chapte...jam9/jobs.html

    coothead
    ~ the original bald headed old fart ~

  4. #4
    Join Date
    Nov 2017
    Posts
    4
    Sorry for the delay my friend. Got busy with work but I would still like to figure this out. I made a codepen.
    Here is the link: https://codepen.io/IanSkelskey/pen/KyZYzo

  5. #5
    Join Date
    Nov 2017
    Posts
    4
    Coothead thank you for the help, but I compared our source and it looks the same except your example does not include an h2 element and it encloses the nav in a div. Making those changes does nothing... =[

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,846
    Hi there IanSkelskey,

    I have not helped you, all I have done is given you a link to help you on your way.

    You were meant to examine both the HTML and the CSS correct your failing
    efforts.

    There would not be an h2 element in that page's code for semantic reasons.

    If you are using an h2 element without a prior h1 element, then you
    are coding incorrectly.

    Personally, I would not bother with the header, nav, main and footer elements,
    as they seem superflous to requirements.

    coothead
    ~ the original bald headed old fart ~

  7. #7
    Join Date
    Dec 2012
    Posts
    1,554
    This effect is well known as margin collapse. For solutions read this:
    https://stackoverflow.com/questions/...gin-collapsing

  8. #8
    Join Date
    Nov 2017
    Posts
    4
    Quote Originally Posted by coothead View Post
    Hi there IanSkelskey,

    I have not helped you, all I have done is given you a link to help you on your way.

    You were meant to examine both the HTML and the CSS correct your failing
    efforts.

    There would not be an h2 element in that page's code for semantic reasons.

    If you are using an h2 element without a prior h1 element, then you
    are coding incorrectly.

    Personally, I would not bother with the header, nav, main and footer elements,
    as they seem superflous to requirements.

    coothead
    Okay. Haha. No idea why I didn't look at the CSS. I will do that now. Trust me I would love to get rid of the header, nav, main, and footer elements, but our teacher is quite particular about sticking to the book.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center