Removing padding and extra space

[ShaunHill]

http://www.shaunhillphotography.co.uk/shop/

There is extra space at the end of the white part of the page which is annoying, and between the top of the black space underneath and the start of the footer.

The black space disappears if you don't display the page in full-screen.

http://www.shaunhillphotography.co.uk/gallery/

On this page in Firefox, it shows a black border and the 4 images do not sit on one line, where they do in Chrome.

I have been using firebug and I know that the white space is part of: div#content

The black space is part of: div#main_container

The picture properties section is defined somewhere in div.entrycontent

I just can't figure out what is controlling these and how I can change it.

Does anyone have any idea what I would need to do to reduce this space for the first two elements and stop Firefox showing borders around the images and over two lines rather than one?

[sunfighter]

In this file

http://www.shaunhillphotography.co.uk/wp-content/themes/photocrati-theme/styles/dynamic-style.php

Find and change as shown:

PHP Code:

#main_container {
    //min-height        :    100%;/*     REMOVE THIS     */                
    height:450px;                /*     ADD THIS        */ 
    z-index            :    -1;
    } 


Why do you call a .css file .php?

[ShaunHill]

Thank you for your reply.

If this is what should appear:

PHP Code:

#main_container {
    height:450px;                
    z-index            :    -1;
    <?php if($one_column == 'ON') { ?>
    width            :    960px;
    padding            :    0 15px;
    margin            :    0 auto;
    background        :    #<?php echo $one_column_color; ?>;
    <?php } ?>
}

This is how it is rendered:



Why is this?

[sunfighter]

You didn't put the end curly bracket back.

#main_container {
    height:450px;
    z-index :-1;
    } <= HERE    

[ShaunHill]

Thank you once again for your reply.

#main_container {
    height:450px;
    z-index :-1;
    } 
	<?php if($one_column == 'ON') { ?>
	width			:	960px;
	padding			:	0 15px;
	margin			:	0 auto;
	background		:	#<?php echo $one_column_color; ?>;
	<?php } ?>
}

I tried this and got a very similar result to before, but the footer had gone to the middle and left a bit. Unexpected result?

[sunfighter]

Not an answer, but you have one too many </div>s in the html. It should end like this:

					<div class="clear"></div>
				</div>
			</div><!-- #container -->
			<!--<div id="sidebar"></div>-->
		</div><!-- #main -->
	</div><!-- #wrapper -->
</div><!-- #main_container -->

<div class="footer_wrapper">

The problem comes from this css file:

<link rel='stylesheet' id='jigoshop_frontend_styles-css'  href='http://www.shaunhillphotography.co.uk/wp-content/plugins/jigoshop/assets/css/frontend.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='jigoshop_theme_styles-css'  href='http://www.shaunhillphotography.co.uk/wp-content/plugins/jigoshop/assets/css/frontend.css?ver=3.5.1' type='text/css' media='all' />

which you call twice. Trying to figure out what is wrong just brings up more problems. I think with a little work you could put these elements into divs and not use the <ul><li>s nor their styling and get things to look ok without a lot of trouble.