PDA

View Full Version : Image not displaying correctly



spadez
Jan 26th, 2010, 02:26 PM
Hi.

Simple issue really. I have an image 14px x 8 px. The box created for the image is correct, but the image is being forced off its image space because there is a gap on the left side of the image (3px).

I cannot find any mention of this space in the stylesheet.

Here is a link to my page:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14

Here are the two images in question:
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-left.png
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-right.png

In summary, the entire image isnt being display properly, it is being padded one side and cropped the other side.

Here is my HTML:

<div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>


Here is my CSS:


#slideshow-controlsx {
position: relative;
height: 14px;
margin: 0px 0 -58px;
overflow: hidden;
z-index: 100;
text-align: left;
top:200px;
}

#main-image-container > #slideshow-controlsx {
margin-bottom: -50px;
margin:0 auto;
}

#slideshow-controlsx ul {
position: relative;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none inside;
width:690px;
/* background-color: #000;*/
/* opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=40); Lower opacity for IE since the controls don't hide */
}

#slideshow-controlsx ul li {
float: left;
margin: 0;
padding: 0;
}

#slideshow-controlsx button {
width: 8px;
height: 14px;
/*margin: 0;
padding: 0;*/
/* background-color: #000;*/
padding:0px;
border: none;
text-align: center;
cursor: pointer;
}


Can anyone help me out with this please? Its driving me nuts!

James

abduraooft
Jan 26th, 2010, 02:41 PM
Try removing the width and height from

#slideshow-controlsx button {/*theme.css (line 382)*/
width: 8px;
height: 14px;

padding:0px;
border: none;
text-align: center;
cursor: pointer;
}