I'm just putting the finishing tweaks and fixes into a layout before I beging padding it out into a fully functional website. One problem I have left is that the strap line and the contact information in the header is placed there by moving them relatively from their natural position some 200px below where they need to be. This is definitely the cause of the issue I'm having, and if I could get them to naturally appear where they should it'd fix the problem. I actually have no idea why they're appearing so far below given the structure of the html and css rules that apply - I've tried fiddling with line-height and even a dirty fix with z-index, but to no avail. This issue doesn't raise it's head in IE, and since most viewers of this website are going to be using IE I could probably ignore it more or less safely... but I don't want to.

 

The problem is that because the strap line and contact info in the header naturally appear 20px below, where there's content, the links there become unclickable (and any text would be unselectable etc).

 

The design is at http://79.170.40.160/hireaferrari.net/ and a screenshot that illustrates the problem I'm having is here The light blue box is where the strap line naturally appears and also where the image link below is unclickable. The same goes for the right floating contact text on the header. So I know the cause of the problem... I just can't think of a fix!

 

While I'm here I might as well kill two birds with one stone. A second niggly problem I'm having is that I use a sticky footer, and somewhere along the way there's an approximately 5px high gap below the footer that I can't track down the cause of. This issue isn't as much of a problem of course, but it is annoying me. So, if anyone has any suggestions there either, I'd be very grateful.

 

Thanks!

Are you re-setting all your margins in your CSS? I had an problem not long back of some space [couple pf pixels or so] at either side of the page. Someone suggested trying out a CSS reset file, and it worked fine. You could give that ago.

 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

 

Add that to the top of your CSS.

 

There are more complicated versions you can find by simply searching 'css reset file' But this is one i cut down, it will maybe maybe fix one of the padding issues. I'm not so sure about the first problem though. Give that a go and see if it fixes anything.

 

//edit. I just noticed you had your CSS still in your html, just tried what I suggested and didn't fix the problem. I'll leave it to someone who knows what they're doing =P

Are you re-setting all your margins in your CSS? I had an problem not long back of some space [couple pf pixels or so] at either side of the page. Someone suggested trying out a CSS reset file, and it worked fine. You could give that ago.

 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

 

Add that to the top of your CSS.

 

There are more complicated versions you can find by simply searching 'css reset file' But this is one i cut down, it will maybe maybe fix one of the padding issues. I'm not so sure about the first problem though. Give that a go and see if it fixes anything.

 

//edit. I just noticed you had your CSS still in your html, just tried what I suggested and didn't fix the problem. I'll leave it to someone who knows what they're doing =P

 

Thanks for the input Pippin, and yeah the HTML, CSS (apart from jQuery UI) and JS etc is all in one file at the moment since I'm just knocking out a layout. I've used resets in the past, though not here, they can be quite useful as in your case. However, the few pixels at the bottom appeared at some point and I didn't clock it at the time - it definitely didn't used to be there. It's likely a CSS issue of a margin or padding or something interfering with the sticky footer. Just haven't managed to track it down.

I've had a quick look just having my dinner so haven't tested it

 

Try giving header lower absolute position and then remove the minus position from header-lower p

 

Nearly forgot add position:relative to header

I've had a quick look just having my dinner so haven't tested it

 

Try giving header lower absolute position and then remove the minus position from header-lower p

 

Nearly forgot add position:relative to header

 

Thanks mteam - I usually try to stay away from absolute positioning but I don't see the harm here. Just by changing the positioning to absolute and removing the minus positioning on the p style, everything jumped into place.

 

That only leaves the small space below the footer issue I've been having - which thankfully is more of a small niggle compared to the problem you just solved for me. Cheers!

Generally, try not to use position: relative and negative top margins because you move the element up and leave a space where it was. Then you have to move up the lower elements into the space, and so on, creating a mess.

 

If you want the menu at the top of the page, move the markup <ul class="top-menu">.........</ul> just after the <div class="wrapper"> and then sort out all the top and bottom margins. It may take time but you will end up with simpler code.

Generally, try not to use position: relative and negative top margins because you move the element up and leave a space where it was. Then you have to move up the lower elements into the space, and so on, creating a mess.

 

If you want the menu at the top of the page, move the markup <ul class="top-menu">.........</ul> just after the <div class="wrapper"> and then sort out all the top and bottom margins. It may take time but you will end up with simpler code.

 

So is the best thing to use absolute positioning for vertical positioning if I need to (i.e. in case where up until now I've been position: relative; top: -Xpx'ing)? Anything to tidy up my code is always appreciated.

mteam has given you a solution that works, so that's fine, using position: absolute (which takes no notice of the position of other elements, it's "out of the flow") so it's just placing itself in the required position even if it's coded "out of order" in the html markup.

 

My comment is just general info where you have a lot of divs that aren't position: absolute (ie no position or position: relative), try to code in the order that you want on the page and avoid large negative top margins and position: relative because it creates spaces and then you end up moving other elements as well to fill the spaces.

mteam has given you a solution that works, so that's fine, using position: absolute (which takes no notice of the position of other elements, it's "out of the flow") so it's just placing itself in the required position even if it's coded "out of order" in the html markup.

 

My comment is just general info where you have a lot of divs that aren't position: absolute (ie no position or position: relative), try to code in the order that you want on the page and avoid large negative top margins and position: relative because it creates spaces and then you end up moving other elements as well to fill the spaces.

 

Sorry, to make it clear, I'd moved on to talking in a more "general" sense - overall coding style. The initial problem was caused by one line paragraphs showing way below where they should be given the order of the html. I corrected it with large negative margins - I can see why this is wrong, trying to fill in space created by moved elements with other elements moved in turn gets messy fast.

 

Thanks for all the advice - I'm always looking to improve my style where possible.

Looks like 2 things are causing the extra space at the bottom

 

Try this in your css

 

.footer .cards img {
padding:12px 8px 0;/*added bottom padding 0*/}

.ui-helper-hidden-accessible {
left:-99999999px;
position:absolute;
top:0;/*added top position 0*/
}