hey,

 

I'm trying to fix an issue on the rollover links at the bottom of this page - the 2 on the right: My link

I've put a 5px margin to the left of the two images, but I need to put a separate margin on the left of the 2 sliding rollovers because they are sticking out...

 

I've tried:

 
.boxgrid captionfull .cover boxcaption {
margin-left: 5px;	
}

 

but that hasn't worked. Dont entirely understand the CSS, got it from a tutorial:

 

.boxgrid {
background:none repeat scroll 0 0 #D8E5F3;
float:left;
height:115px;
margin:0;
overflow:hidden;
position:relative;
width:255px;
}
.boxgrid img {
border:0 none;
left:0;
position:absolute;
top:0;
}
.boxgrid p {
color:#FFFFFF;
font:9pt "Lucida Grande",Arial,sans-serif;
margin:5px 0;
padding:3px 10px 10px;
}
.boxgrid p a {
color:#00638F;
}
.boxcaption {
background:none repeat scroll 0 0 #BFBE00;
float:left;
height:45px;
opacity:0.9;
position:absolute;
width:100%;
}
.captionfull .boxcaption {
left:0;
top:143px;
}
.caption .boxcaption {
left:0;
}
.boxgrid captionfull .cover boxcaption {
margin-left: 5px;	
}

 

any help appreciated, cheers

Where you have

<div class="boxgrid captionfull">

in the html markup, that is for two separate classes that apply to that div. Same with

class="cover boxcaption">

 

 

Your style of

.boxgrid captionfull .cover boxcaption {
margin-left: 5px;	
}

won't work as far as I know. You just need the style for either .boxgrid OR .captionfull but not both and if you have two style names with the same style they should be separated with a comma. You appear to have

.boxgrid captionfull and .cover boxcaption as two separate style names

 

Try

.captionfull, .boxcaption {
margin-left: 5px;	
}

 

I haven't tested this as I'm just pointing out wrong coding. Don't forget the . in front of style class names.

Try

.boxgrid  {
background:none repeat scroll 0 0 #D8E5F3;
float:left;
height:115px;
margin:0 5px 3px 0;
overflow:hidden;
position:relative;
width:250px;

 

and remove

#quicklinksleft .picborder {
margin-bottom:3px;
margin-left:5px;