CSS is executed in linear format (meaning that whatever was the last command in is what you’ll see) however, it doesn’t always work flawlessly.
When you say you’re adding ‘custom css’ are you adding in another CSS file and linking to it in your head? Or are you adding more CSS lines to your Theme’s existing stylesheet?
If it’s the former then be sure your custom stylesheet is linked to AFTER the theme’s default stylesheet. If it’s the latter, be sure your custom CSS lines are BELOW the lines that control that space (use something like firebug or Firefox’s built in ‘inspect element’ to be sure you’re targeting the correct CSS selectors).
As a last resort you can add !important to your custom style declaration before you close it with the semi-colon (‘;’) – this tells your browser to override any conflicting styles with your own), but you should be able to resolve the conflict without it.
Hi Trisha,
I am using a custom CSS plug and this is where i am adding all of my code.
I am very new to this so if you could please spell this out for me as simply as possible i would really appreciate it.
Many Thanks
ADam
OK in that case the first thing is to figure out where your whitespace is coming from, likely some margin or padding on either the header or ‘content’ selectors.
SO using firefox, go to your page and click near the top, then right-click and select “Inspect Element” – this will open a box at the bottom of the page, where you can highlight by clicking on the various div’s and tags (open any with the right-pointing triangle if needed to find nested tags).
When you have a tag highlighted (div id=’header’ or just header) for example, on the right side it will show you the CSS that is being applied. On the page when you have something highlighted below it will show you that section with a dash-line border, and using colors it will indicate the amount of padding and/or margin.
When you find out which has the offending extra space, look in the CSS box on the right to see which stylesheet and line number is adding it (your custom CSS or the Theme’s default stylesheet), and try changing that to see if it fixes the problem. Changes you make in the CSS styles in the right side are TEMPORARY only, once you leave the page they disappear, but when you’re happy with the changes, apply them to the appropriate place – your custom CSS is the best place to put them, you may need to add a new selector and styles to match what you’re changing.
When you see something crossed out, that means that a later style declaration is taking precedence – so if you have a custom style and it’s crossed out, then the Theme’s style is taking precedence. Just add “!important” (without the quote marks) to the end of YOUR style, before the semi-colon.
Here’s an example:
header {margin:0!important;}
I hope this helps……good luck with this!
