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
James Ingmire
11,901 PointsHow do i target 'element' under the 'styles' in 'Dev tool' 'Inspector' mode. Please help driving me crazy here.
I have uploaded a screenshot to show what i mean, i am trying to fix an issue for a friends website, found the issue in that i need to change the height value however how do i target it as it has no class or id name just 'element'. I'am just using dev tools to inspect the code, its a wordpress site and cant seem to find the right way to target the height in the css. Please help me understand, thanks in advance.
[Click here](C:\Users\Anne\Pictures\Untitled.png "Untitled.png")
By the way the original problem was on the following website, the big space at the bottom of the home page was the issue, works in chrome however in Firefox, IE and Safari the gap is too large. I think the answer was to remove or change the value of
element { height: 1353px; }
to
element { height: 1150px; }
however what is element!!!??? You surely cant target element or can you? I can't tell because i don't have access to the WordPress, just want to get correct from the beginning.
James Ingmire
11,901 Points[Click here](\C:\Users\Anne\Pictures\Untitled.png"Untitled.png")
6 Answers
Jason Anello
Courses Plus Student 94,610 PointsI think I've found the part of the script that is setting the height on #forbottom
In themes/tempera/js/frontend.js on line 175 is the following code:
// Force footer at bottom of window
jQuery(document).ready(function() {
var docHeight = jQuery(window).height();
var footerHeight = jQuery('#footer2').height();
var footerTop = jQuery('#footer2').position().top + footerHeight;
var forbottom = jQuery('#forbottom').height();
if (footerTop < docHeight) {
jQuery('#forbottom').css('height',(forbottom + docHeight - footerTop -35) + 'px');
}
});
I'm still pretty much a beginner with javascript/jQuery but I think the only purpose of this code is to force the footer to the bottom of the viewport if you have a short page. The hp has enough content that the if block should not be executed. This code works correctly on every page but the hp.
These calculations are dependent upon #footer2 which is the div that contains the social links that appear at the bottom of the footer. You see them on every page but the hp.
The home page has an internal stylesheet in the head section which has the following css:
#footer2 {
display: none;
}
I think that because these social links are hidden that they're throwing off the calculations and the if block is being executed on the home page. Setting an incorrect height on #forbottom
Did your friend not want them to appear on the homepage? You could try bringing them back in by editing that internal stylesheet and see if that fixes the problem.
Otherwise, I think that the script above would have to be modified so that it worked with or without the social links.
James Ingmire
11,901 PointsYour a legend! Thanks so much, would of taken me a lot longer to work that one out. Will let you know how it goes. Much appreciated.
Jason Anello
Courses Plus Student 94,610 PointsTo make sure I'm on the right track here are we talking about the div with an id of "forbottom"? That's the only thing I can find that has a height set on it. I'm currently seeing a height of 1601px though. There's a considerable gap between the end of the main content and the footer.
The reason you're seeing element in your style panel for the height is because there is an inline style applied to that div.
<div id="forbottom" style="height: 1601px;">
Firebug shows it like this:
element.style {
height: 1601px;
}
This is just to indicate that the currently selected element has a style applied directly to it (inline) rather than the style coming from an internal or external stylesheet.
But you should be seeing some additional style rules below element that use #forbottom
So either somebody put that inline style there or there's a script running on the page that injected that style.
You can select that element in the css using the id of the div and set the height that way but the inline style is going to override whatever you put in the external stylesheet.
I'm wondering why there has to be a height set at all. If I remove the height then it takes up as much space as it needs. I would try to figure out why it was put there.
I'm not familiar with wordpress so I can't tell you where you would need to go to change that inline style.
Jason Anello
Courses Plus Student 94,610 PointsTo be clear, the gap is the gap between the swan/wine photos and the beginning of the gray footer, correct?
The height is set but it's set as an inline style in the html.
I don't think setting the height in the css is going to help you because that inline height will take precedence.
I tried disabling javascript and viewing the page and there is no height set on that element and it looks fine. Approximately 30px or so of spacing after the photos and before the footer.
This means you have a script on the page that is probably calculating and then setting that height on the element. So I would start looking at the scripts.
I've found that I can get a different height simply by moving the scrollbar a little and then refreshing the page. Try it.
At one point I had text overflowing behind the footer. So something weird is going on with a script on that page.
I'll try looking again in a little bit.
Honestly, unless you can find a good reason for why the height needs to be calculated then I would eliminate it. Let the height of the content area be the natural height it wants to be. Of course, eliminating means figuring which script is responsible for this.
James Ingmire
11,901 PointsYes you have the correct gap. Thanks alot, I will try find the script and do that, will let you know how it goes on. Any idea on how to find the script, i mean what file would it normally be in, in the same boat with wordpress, not used it before there are countless files and endless code presume making it responsive. Thanks for all your time!!
Jason Anello
Courses Plus Student 94,610 PointsYou can view the scripts within developer tools. I'll try looking myself.
James Ingmire
11,901 PointsThanks you so much, you have mad skills!
James Ingmire
11,901 PointsThanks so much, yea your on the right track but yea it's confusing the hell out of me! On IE and Firefox it says the height is 1354px and chrome it's 1347px!!
Found the hompage style sheet called style-frontpage.css with only margin and padding set to zero, no height property's set! Wondering if that means chrome is adding box-sizing or somthing or the height is not set at all! But then whats causing the gap at the bottom.
If you find an answer will be very grateful, also do you think i should just target the #forbottom and height: 100%; instead or height: 1150px; as this sets a nice gap not a huge one at the bottom.
Thanks again!!
James Ingmire
11,901 PointsAll different.
Firefox {height: 1353px;} IE {height: 1354px; } Chrome {height: 1347px; }
By the way do you mean i need to alter the height property in the html document then instead of any css file then in-order for the rule not to be overwritten? If so what would you recommend max-height,min-height or height auto, height 100%. Sorry for all the questions but its kinda taken my confidence down as i thought it would be a simple fix, oops.
James Ingmire
11,901 PointsThanks you.
Jason Anello
Courses Plus Student 94,610 PointsThe height calculation seems to be based on some combination of the viewport height as well as the scroll position, just from observation, not looking at scripts.
If I have firebug open at the bottom (which decreases my viewport height) and I scroll all the way to the bottom of the page and then hit refresh I end up getting a height of 790px which is too short for the content and it overflows the footer.
I think you're seeing these differences between browsers because they all probably have different viewport heights which would be dependent upon which toolbars and menus you have showing in each browser.
So I think that whatever this script is it was either put in there by mistake or not setup properly. Clearly it should not work like this. You can't control whether the user will do something like I've described doing and then they see a messed up page.
James Ingmire
11,901 PointsThink this would be my fault as a few days ago i adjusted the margin on one of the top margins from 30px to -30px to get more spacing between elements, i suppose its had a knock on effect. If i delelte the js code then it should all fit into place iam guessing otherwise i wil have to put the margin back on and leave the js code to its dance.
Jason Anello
Courses Plus Student 94,610 PointsDid you start seeing this gap after you made edits to the site? Or there was a big gap before you started doing anything?
James Ingmire
11,901 PointsSorry to be useless but not sure, Iam pritty sure it was after the edits were made, i made the edit to the about page so not even the homepage but must be related, i will find the div i targeted.
James Ingmire
11,901 Pointsdiv.post, div.page, .yoyo > li {
margin-bottom: -30px; }
It was to stop a big gap between the h1 'About Us' and 'Our other Pubs..' title on about us page, so if you could find a way other than -margin maybe this would be a better way to stop the knock on effect to the homepage.
Jason Anello
Courses Plus Student 94,610 PointsI can't say for sure but it doesn't seem like that would cause this problem.
So you don't know whether your friend had noticed the gap before? This gap problem was not the original problem then that you were supposed to fix?
James Ingmire
11,901 PointsNo it was "It was to stop a big gap between the h1 'About Us' and 'Our other Pubs..' title on about us page, so if you could find a way other than -margin maybe this would be a better way to stop the knock on effect to the homepage."
A few days later he sent me a message saying can you get rid of the gap on the homepage, i can ask him but wont reply till tommorow now. Thanks
Jason Anello
Courses Plus Student 94,610 PointsOk, that gap is because the div which contains the h1 had a 36px bottom margin set in style.css on line 2128 This is the style that you have overridden with -30px
Plus, there is a line break <br> between that div and the article which contains "Our other Pubs". This produces more vertical space in addition to the 36px.
Setting the margin back to around 0px and removing that line break seems to look ok to me. Otherwise, your -30px is ok if you don't have control over that line break.
Regardless, this does not seem like it would be affecting the homepage gap.
I've noticed that all other pages have two columns and we don't see the gap. The home page only has the single column. Was that always the case?
James Ingmire
11,901 PointsYea the columns have not been altered. I agree dont see how the margin alteration could effect the behavour of the homepage so the gap must of always been there. Been having a look for the js script but no luck, not sure what script or keywords iam looking for so bit of stab in the dark, thanks for the time you spent, wish i could repay you somtime. Any ideas on what i should do next except leave it too you lol, or continue what you said in the past comment, again thanks.
James Ingmire
11,901 PointsIs there no way to override the JS script without finding it because it may even be PHP? Take it we cant set a max height to stop the height goin over say 1150px even if injected with js or php even.
James Ingmire
11,901 PointsJames Ingmire
11,901 PointsCAN'T GET THE IMAGE TO LOAD ABOVE, CAN SOMEONE TELL ME WHAT I AM DOING WRONG, THE BELOW IMAGE LINK IS WHAT I TYPED IN ABOVE. ```[Click here](C:\Users\Anne\Pictures\Untitled.png "Untitled.png")
THANK YOU!