PDA

View Full Version : Strange BG colour and position



spadez
Jan 27th, 2010, 01:15 PM
A background image is being applied to an image, but I cant find anywhere in the CSS where this color is being applied. Ive also been fiddling with the position of the arrows using margins and padding, but these dont seem to have an effect either.

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

You can see there is a background color to the images of #f0f0f0 and the positioning isnt correct, im trying to remove the background colour and find out how to reposition the horizontal position of these images.

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 please tell me where the background colour #f0f0f0 is being applied, and how I should be modifying the code to move the images closer in towards the centre of the image.

James

spadez
Jan 28th, 2010, 11:25 AM
Bump, I cant figure this out still.

jenius
Jan 28th, 2010, 07:59 PM
I don't see a background color (mac, safari 4) - if its a png without one applied it should be fine. It shows in your actual code (but not the code you pasted here...) that you have "#ffff" applied as the background color for your buttons - this is not a valid hex value, but some browsers may interpret it as one and add the background color

Just taking a quick look at your code, it appears as if your css and html do not match up (you have "x"s at the end, don't know if that was on purpose), and a couple of your divs are not closed (maybe you just didn't include the closes?)

Also, if you check the css validator, you'll find a couple more things (ignore the opacity errors) - try fixing these and see if they solve your problem.