View Full Version : inline block spacing

08-03-2014, 10:20 AM
Hi All

could someone tell me why the following:


has gone all weird with the white space above the buttons? it was working fine before I added the blue box graphic on the left, and it looks fine in dw live preview mode.

help greatly appreciated as always.


08-03-2014, 08:06 PM
When you use inline-block without any other type of positioning you get these strange results. If you just float the links to the right it will cure this issue.

More info: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

You have other issues though.

1. You are using images when you can just use CSS.
2. Load your javascripts inc Google tracking code before the close of the body not in the head. This is better for performance.
3. You have loads of superfluous CSS. Try using a reset or normailze css to stop you having to continually margin 0 padding 0.
4. also try to use css short hand, rather than repeating properties
5. Try not to use ID's they add unnecessary specificity
6. Try to only use classes when needed, you have ID's and classes on elements that can be selected with just decedent selectors.


08-05-2014, 06:59 PM
thanks Ricky

the float fixed it, I understand what you're saying with the other points (mostly) and will try to do that on the next one, I daren't mess with this one now as its working, lol.

thanks again.

08-05-2014, 08:27 PM
No problem.

Its just about best practice. Try and set up a decent base set of files for your self that you can use to start every new project.

I'd recommend downloading the HTML5 boiler plate and see what they are doing and take whats relevant and create your own boiler plate. Its free and its made by a whole community of top pros that continually improve it for best practice, performance, accessibility etc.


Moving the javascript to just before the body won't break anything trust me.

08-07-2014, 07:14 PM
thanks Ricky, have downloaded it and will go through it.

cheers again

08-07-2014, 08:16 PM
My pleasure mate.