• 0

CSS - Where is this whitespace coming from?!


Question

Hello all,

Working on a website and for the life of me i cant find out where some whitespace is coming from - would really appreciate some help.

Have a look at the site here. Click the "Industries" tab on the homepage (in the tabbed section to the right under the image slider aka not the main header) - see the white space (7px i think) below the thumbnail images, where is it coming from?

Ive been searching through firebug for the last 20 minutes and cant see anything and im starting to go mad.

Cheers for the help

EDIT: Screen shot here: http://img84.imageshack.us/img84/1926/cssf.png

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Thanks for the reply. But I mean the industries tab in the main page content - not the heading. Click the tab and have a look at the images. See what I mean? Cheers

Link to comment
Share on other sites

  • 0

Excuse me? Click the link I gave and in the content on the main page (NOT in the heading) there is a tab that says industries under the slider. I'll post a screen shot in a sec

Link to comment
Share on other sites

  • 0

For your div class "client" you will need to specifiy a smaller line-height, as in body you specify it to be a rather large 22px. When I disabled that part of the CSS, the whitespace was reduced. Try adding in a "line-height:10px;" under the "client" class.

Link to comment
Share on other sites

  • 0

Sorry my bad, should read things fully saw industries and just clciked that! Anyway think i know what you mean and used firebug to locate whats up.

change

 .tabdiv {
		background:#FFF;
		padding:10px;
		overflow:hidden;
    }

to

 .tabdiv {
		background:#FFF;
		padding:10px 0px 0px 10px;
		overflow:hidden;
    }

Link to comment
Share on other sites

  • 0

For your div class "client" you will need to specifiy a smaller line-height, as in body you specify it to be a rather large 22px. When I disabled that part of the CSS, the whitespace was reduced. Try adding in a "line-height:10px;" under the "client" class.

Works, for me - 9px is the winner and just add some padding around the headings.

Link to comment
Share on other sites

  • 0

Fiddling with the line heights did the trick. Cheers for that - dont think i would have ever thought of that!

Just wondering, apart from the obvious lack of a logo and a search bar at the top, are there any comments / criticisms you could make on the design?

Cheers

Link to comment
Share on other sites

  • 0

The white space appears because the images have display set to inline by default and they behave like text i.e. have white space above and below depending on line-height in effect. Set the display to block and you will get the tight fit needed.

Link to comment
Share on other sites

  • 0

The white space appears because the images have display set to inline by default and they behave like text i.e. have white space above and below depending on line-height in effect. Set the display to block and you will get the tight fit needed.

Ahh thats it. Thanks for explaining that

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.