View Full Version : Why the gap?

12-30-2012, 04:48 AM
I can't work out why a small gap has appeared above the header on some pages of my site, eg

If you click on About or Home you'll see what it's meant to look like. How can I trace the source of this? TIA...

12-30-2012, 06:15 PM
The site has loads of superfluous CSS and it seems slow to load and it should be very fast as there's not that much content here and no fancy css.

Out of interest did you build this yourself or was it a template?

Regarding your problem gap, this is caused by an empty paragraph tag at the top of the pages that have the gap, look for <p></p> just after
<div class="page>

Just delete this empty tag and you should be fine.

By the way to discover issues like this use your browsers built in developer tools or something like Firebug the Firefox extension. http://getfirebug.com



12-30-2012, 11:44 PM
Thanks, there was a <p> wrapped around the <header> for some reason.

And yes, I have to get rid of some of that CSS. I built it myself, my first foray into responsive design, but then I bought a template for its responsive portfolio feature, and sewed it in, and it came with heaps of CSS. Now I've decided not to use the template bit I can remove about 80% of the CSS

<5 mins later... OK, it's gone, does that make a difference? I still need separate stylesheets for the different size screens>

12-31-2012, 04:59 AM
I'd just recheck your media queries / CSS as at phone size your navigation seems to disappear.

It's great that you are considering and indeed using responsive design but I personally think its best to nail good CSS and design first before attempting to make a site responsive.

Making a site responsive cant really be tacked on as it should really be considered from the start otherwise you'll just have a site that simply shrinks and scrolls for 10 minutes on small screens. You really need to think of the content you'll need at each stage.

Sorry, what are you asking me now I didn't really understand?

12-31-2012, 05:24 AM
Hi, what I was asking was does it load any faster.

The navigation doesn't disappear, it drops to the bottom of the page. I built this template as an exercise for a lynda.com tutorial and that's how the guy did it. I have to admit, it does seem to disappear. I'd rather it change to a dropdown menu at the top like I've seen elsewhere so I might do some more research.

The client is an author and he's naturally wordy. His blog posts (no, it's not a true blog with comments etc but that's what we're calling it) sometimes run to 2000 words. What to do? The pages have to be long.

But thanks for your feedback.

12-31-2012, 11:28 AM
Yes I remember it was a course by Chris converse, it is a bad idea though as it does look like there's no navigation. His example site was white and seemed shorter and somehow it didn't seem quite as bad.

Regarding performance I was only really going by how the site felt, it just felt a little sluggish to me, this feeling was probably compounded when I had a peek at the CSS. In truth though this wouldn't make that much difference unless they were effects such as box shadow, gradients etc.

Although I did notice that you were declaring background colours in several places and from what I could see these seemed unnecessary.

I'd have a look into it if you want to know more, Chrome has some tools built in but there are also extensions available for both chrome and Firefox to more accurately measure performance. Google are really into site performance so its a good idea to ensure your site is as fast as possible.


01-11-2013, 12:30 AM
OK, I finally got time to rejig the nav. I have put it back up the top and fixed the size and background colour and I think it looks pretty good (but that's just me). Only thing is I can't work out why it budges right up against the right side. I've adjust all the right margins and nothing happens.

Any clue here would be appreciated.

01-11-2013, 03:03 AM
cant see what you mean. the nav bar is against the left no?

01-11-2013, 03:57 AM
Sorry, should have said, when screen size is under 500px, ie mobile view.

01-11-2013, 04:40 AM
ill guess but you have 5px margins on both nav and< a> . try o margin left and increas right see what that does

01-11-2013, 05:00 AM
Thanks, that did it, changing the left margin to 0. Don't know why, but it did. :)