White space appearing either sie of image in firefox - displays correctly in IE
 

Hi Guys,

This is my first post in this forum so hopefully i am in the right area. Basically i have picked up a web development project that has some display issues and i am desperatly been trying to fix it up for my client.

The website is http://www.thinkpharmacy.com.au

Located on the right hand side of the home page is a shopping basket which can be expanded / collapsed to view the users current items. The JQuery functionality for this is working both in IE and firefox but when the basket is expanded in firefox two white lines appear above and below the items in the shopping cart.

I am thinking that it must be css as it is a display issue not so much functionality but i am neither a javascript or css guru so i could be wrong.

If anyone in this forum has seen a problem like this one before or has any advice that could help me out as to why this is happening i would be very apprieciative.

Thanks in advance.

Almac007

Insofar as I can see, the element box_content has a rigid height of 13px, when it should be 100% to utilise the white space above and below. Why that works perfectly in Internet Explorer, I am not sure.

Welcome to the community, my friend! :-)

Hi Wildhoney,

Thanks for getting back to me.

Where are you seeing that it has a rigid height of 13px?

line 162: <div class="basket_body" id="box_content"></div>

and then when i look at the basket body css i see the following:

.basket_body{
width:180px;
background:url(../images/basket_body.gif);
background-position:top;
background-repeat:repeat-y;
vertical-align:top;
padding:0;

}

from what i can tell the box_content id is being referenced by the div above us on line 160.

<div align="right" style="margin-right:15px; position:absolute; margin-top:120px;"> <span id="swap"><a class="basket_text" href="javascript:;" onClick="toogle('box_content');" onMouseOver="this.className='basket_text_over'" onMouseOut="this.className='basket_text'">Expand Basket </a><img src="../images/down.gif" width="10" height="10" align="absmiddle" /></span></div>

am i going down the right track here or am i way off?

Thanks so much for your help.

Almac007

I have now added in a height element into the CSS which has fixed the whitespace at the bottom of the basket.

.basket_body{
width:180px;
height:75px; /* 125px real image size */
background:url(../images/basket_body.gif);
background-position:top;
background-repeat:repeat-y;
vertical-align:top;
padding:0;
}

now the only problem is the whitespace appearing at the top.

Solved!!!
 

I just fixed it...

Ended up that i needed to add margin-top:0px;

to the box text and it fixed it.

.box_text{
margin-left:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#213F57;
margin-top:0px;

}

Wildhoney thanks for your advice and help with this.

Cheers,

Almac007

You really need to shrink the size of that page. It was 700kb+ when I loaded it. It should be under 100k tops. 700k/24k = way to long of a download for 30% of the world.

Yeah i know. Dont know what the go is there... they obviously havent optimised their images.

Its certainly on the to do list.

Thanks for pointing it out.

cheers,

Almac007