Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Carmen Burghardt
6,343 PointsFloating 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>
3 Answers
Refo Junior
4,407 Pointswhat do you mean floating? I think the output is the border comes at the bottom of tag.
Carmen Burghardt
6,343 PointsHi, 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
6,343 PointsI leave the discussion open for people that have a similar problem
Carmen Burghardt
6,343 PointsCarmen Burghardt
6,343 PointsHey! 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
Refo Junior
4,407 PointsRefo Junior
4,407 Pointsedited: 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.