CSS CSS Basics (2014) Basic Selectors ID Selectors

Carmen Burghardt
Carmen Burghardt
4,778 Points

Floating orange footer line

My footer line (orange is floating), you have any idea what I could have been doing wrong?

main-footer{

padding-top: 60px; padding-bottom: 60px; border-bottom: solid 10px orange; }


HTML <footer id="main-footer"> <p>All rights reserved to the state of <a href="#">California</a>.</p> <a href="#top">Back to top »</a> </footer>

alt text

3 Answers

what do you mean floating? I think the output is the border comes at the bottom of tag.

Carmen Burghardt
Carmen Burghardt
4,778 Points

Hey! Thanks for your reply, I already tried, to remove the "padding-bottom: 60px;". I wish i could have added a screenshot, but basically is the orange footer line( that we had to make in the video, CSS basics ID selectors) is not positioned at the bottom of the window but is an X amount of pixels above the bottom of my screen. While I see in the video, that the orange line is supposed to be at the bottom of the screen (so no space between the bottom and the line). I hope this clarifies it, if not please let me know!

Just a thought, could it have something to do with my browser? I use Chrome

edited: maybe that amount of pixel is default margin of the tag in your browser, try inspect element, select the tag and see what is going on.

Carmen Burghardt
Carmen Burghardt
4,778 Points

Hi, I found in the browser an extra div on the bottom of my code. The problem is that some plugins, seemingly add extra divs (see down below). In my case, it was the plugin for Colorblinding ( a plugin to see how some websites look like in different types of color blindness). Disable, remove or change the setting of a plugin, should do the trick.

......
</footer>

<div id="blockColorblindContent"><svg id="colorBlindSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="full"> <filter id="protanopia"> <feColorMatrix type="matrix" values="0.567, 0.433, 0, 0, 0, 0.558, 0.442, 0, 0, 0, 0, 0.242, 0.758, 0, 0, 0, 0, 0, 1, 0" in="SourceGraphic"></feColorMatrix> </filter> <filter id="protanomaly"> <feColorMatrix type="matrix" values="0.817,0.183,0,0,0 0.333,0.667,0,0,0 0,0.125,0.875,0,0 0,0,0,1,0" in="SourceGraphic"></feColorMatrix> </filter> <filter id="deuteranopia"> <feColorMatrix type="matrix" values="0.625,0.375,0,0,0 0.7,0.3,0,0,0 0,0.3,0.7,0,0 0,0,0,1,0" in="SourceGraphic"></feColorMatrix> </filter> <filter id="deuteranomaly"> <feColorMatrix type="matrix" values="0.8,0.2,0,0,0 0.258,0.742,0,0,0 0,0.142,0.858,0,0 0,0,0,1,0" in="SourceGraphic"></feColorMatrix> </filter> <filter id="tritanopia"> <feColorMatrix type="matrix" values="0.95,0.05,0,0,0 0,0.433,0.567,0,0 0,0.475,0.525,0,0 0,0,0,1,0" in="SourceGraphic"></feColorMatrix> </filter> <filter id="tritanomaly"> <feColorMatrix type="matrix" values="0.967,0.033,0,0,0 0,0.733,0.267,0,0 0,0.183,0.817,0,0 0,0,0,1,0" in="SourceGraphic"></feColorMatrix> </filter> <filter id="achromatopsia"> <feColorMatrix type="matrix" values="0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0,0,0,1,0" in="SourceGraphic"></feColorMatrix> </filter> <filter id="achromatomaly"> <feColorMatrix type="matrix" values="0.618,0.320,0.062,0,0 0.163,0.775,0.062,0,0 0.163,0.320,0.516,0,0 0,0,0,1,0" in="SourceGraphic"></feColorMatrix> </filter> </svg></div>  ```
Carmen Burghardt
Carmen Burghardt
4,778 Points

I leave the discussion open for people that have a similar problem