[SOLVED] Help Please

[scottjcampbell]

Hi, i have been trying to correct this for some time now. My website has an avatar system where users can upload their own avatars, on a page, i have thumbnails of all of the images a user has uploaded, i cannot seem to get the thumbnails to line up properly, i am really sorry if this doesn't make much sense, but i have copied the source of a page with thumbnails going off the page and i was wondering if anyone can help

 

It is located here: http://campbellmember.co.uk/test.php

 

I have removed other tabs as they are irrelevant, though i would really be grateful if anyone can be of help.

 

Thank You, SCOTT CAMPBELL.

[Maq]

We need to see your relevant CSS.  We also need to know exactly what you mean. 

 

When I view your page in FF3 it looks like the only problem is that the little gray rectangles don't encapsulate your thumbnails.  IE6 looks fine.

[scottjcampbell]

Here is a screenshot, i have pointed out the areas i am concerned about:

 

The style for the borders on the images is:

 

#label {border-color:#C1C7CC;

border-style:solid;

border-width:medium;}

#label.chosen {border-color:#FBE49B;}

 

I have looked through all of my CSS files relating to this page and edited them to see if they make any difference, though it doesn't.

 

I believe the problem is caused because there is not enough room in the div and the remaining images are being pushed onto the next line (WHAT I WANT TO HAPPEN ANYWAY) though they are not being correctly aligned.

 

Thanks Scott Campbell.

[TheFilmGod]

<label id="label" for="000a052fIqk.jpg">
<img src="/include/avatar/1/000a052fIqk.jpg"/>
</label>

 

<label> is an inline tag. If you want it to display it similar to a div, you would need to make it display: block;. I never have nested images within labels. I might be wrong, but as far as know, labels should not have anything else in them other than text.

 

Your image should have a specified width and height. I also recommend an alt tag. These are basics semantics. 

[scottjcampbell]

<label id="label" for="000a052fIqk.jpg">
<img src="/include/avatar/1/000a052fIqk.jpg"/>
</label>

 

<label> is an inline tag. If you want it to display it similar to a div, you would need to make it display: block;. I never have nested images within labels. I might be wrong, but as far as know, labels should not have anything else in them other than text.

 

Your image should have a specified width and height. I also recommend an alt tag. These are basics semantics. 

I have included display:block; though it makes the image use up a whole line, which is not what i want. I have also set the width, height and alt though still no luck.

 

I'm using a <label> because i want the user to be able to select their avatars, my reason for making the radio buttons hidden. If there are any other ways to do this, then i am open to new ideas (Not Sarcasm - i really am).

[TheFilmGod]

Instead of using a <label>, why don't you use a simple link? Would that work?

 

What you are trying to do, is rather intriguing. Using hidden radio buttons, with labels as a way to select them is pretty smart. I have never heard of that, and I have read quite a few html books.

 

Did you try validating your html? It is very possible that labels are not allowed to have images. But I might be incorrect. Validating is a good start in debugging the issue.

 

What is your complete css code? Maybe I can help. Please explain clearly how you would want it to look like! 

[scottjcampbell]

Instead of using a <label>, why don't you use a simple link? Would that work?

 

What you are trying to do, is rather intriguing. Using hidden radio buttons, with labels as a way to select them is pretty smart. I have never heard of that, and I have read quite a few html books.

 

Did you try validating your html? It is very possible that labels are not allowed to have images. But I might be incorrect. Validating is a good start in debugging the issue.

 

What is your complete css code? Maybe I can help. Please explain clearly how you would want it to look like! 

But i need the link to select the radio box for the form, if you know what i mean?

I want the user to choose a picture instead of clicking a box next to the picture, this would be easier, i'm sure there are some javascript's that can do this? I have googled for sometime with no luck for this specific example.

 

Thanks, Scott

[scottjcampbell]

Here are all of the CSS files attached to the page, by the way:

	.dhtmlgoodies_tabPane{
	height:21px;	/* Height of tabs */
	border-bottom:1px solid #919b9c;
}
.dhtmlgoodies_aTab{
	border-left:1px solid #919b9c;
	border-right:1px solid #919b9c;
	border-bottom:1px solid #919b9c;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	padding:5px;		

}
.dhtmlgoodies_tabPane DIV{
	float:left;
	height:100%;	/* Height of tabs */
	padding-left:3px;
	vertical-align:middle;
	background-repeat:no-repeat;
	background-position:bottom left;
	cursor:pointer;
	position:relative;
	bottom:-1px;
	margin-left:0px;
	margin-right:0px;
}
.dhtmlgoodies_tabPane .tabActive{
	background-image:url('../images/tab_left_active.gif');
	margin-left:0px;
	margin-right:0px;	
	z-index:10;	
}
.dhtmlgoodies_tabPane .tabInactive{
	background-image:url('../images/tab_left_inactive.gif');
	margin-left:0px;
	margin-right:0px;
	z-index:1;
}

.dhtmlgoodies_tabPane .inactiveTabOver{
	background-image:url('../images/tab_left_over.gif');
	margin-left:0px;
	margin-right:0px;
}
.dhtmlgoodies_tabPane span{
	font-family:arial;
	vertical-align:top;
	font-size:11px;
	padding-left:3px;
	padding-right:3px;		
	line-height:21px;
	float:left;
}
.dhtmlgoodies_tabPane .tabActive span{
	padding-bottom:1px;
	line-height:20px;
}

.dhtmlgoodies_tabPane img{
	float:left;
}

* {
    padding: 0;
    margin: 0;
} 

a {
color: #3B6EBF;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}


#wrap {
margin: 20px auto;
width: 724px;
background: #fff url('images/midbg.jpg');
background-repeat: repeat-y;
}

#top { 
background: #fff url('images/topbg.jpg');
height: 30px;
}

#content {
padding: 0 40px 0 40px;
}
#bottom {

background: #fff url('images/botbg.jpg');
height: 30px;
}


.header {
height: 100px;
background: #85ACF7 url('images/hidr.jpg');
}

.header h1 { padding-left: 17px; padding-top: 22px; font-size: 22px; color: #FFF; }
.header h1 a { font-size: 22px; color: #FFF; text-decoration: none;}
.header h2 { padding-left: 17px; padding-top: 0px; font-size: 17px; color: #FFF; }

.middle {
float: left;
width: 59%;
margin: 0 10px;
padding: 1% 1%;
text-align: justify;
}

.right {
float: left;
width: 30%;
margin: 0 10px;
padding: 1% 1%;

}

.right ul {
padding: 20px 0 15px 20px;
margin:0;
}

.right li {
margin-bottom:5px;
list-style-type: square;
color: #3B6EBF;
}

.middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.right h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}


#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}

#footer {
text-align: center;
color: #666;
}

/*General styles - NOT really related to the forms*/
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#404040;
}
#container {padding:20px;}

/*Forms defaults - change as needed*/
input, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#404040;
}
label {color:#999;}
label.chosen {color:#333;}
#label {border-color:#C1C7CC;
border-style:solid;
border-width:medium;}
#label.chosen {border-color:#FBE49B;}
/*Transparent items*/
.outtaHere {
position:absolute;
left:-3000px;
}
/*Radio buttons*/
.radioArea, .radioAreaChecked {
display:block;
float:left;
clear:left;
width:15px;
height:14px;
font-size:0;
cursor:pointer;
}
.radioArea {background:url(images/radio.gif) no-repeat left top;}
.radioAreaChecked {background:url(images/radio.gif) no-repeat left bottom;}

/*Checkboxes*/
.checkboxArea, .checkboxAreaChecked {
display:block;
float:left;
clear:left;
width:13px;
height:13px;
font-size:0;
padding:0;
margin:0;
cursor:pointer;
}
.checkboxArea {background:url(images/checkbox.gif) no-repeat left top;}
.checkboxAreaChecked {background:url(images/checkbox.gif) no-repeat left bottom;}
.focused {border:1px dotted #ddd;}

/*Text inputs*/
.textinput, .textinputHovered {
height:15px;
background:url(images/input_bg.gif) repeat-x left top;
border:none;
padding:4px 0;
vertical-align:middle;
}
.textinputHovered {background-position:left bottom;}
.inputCorner {
padding-bottom:0;
vertical-align:middle;
}

/*Text areas*/
.txtarea .tr, .txtarea .tr_xon {background:url(images/txtarea_tr.gif) no-repeat top right;}
.txtarea .tr_xon {background:url(images/txtarea_tr_xon.gif) no-repeat top right;}
.txtarea img.txt_corner {
width:5px;
height:5px;
display:block;
}
.txtarea .br, .txtarea .br_xon {background:url(images/txtarea_br.gif) no-repeat top right;}
.txtarea .br_xon {background:url(images/txtarea_br_xon.gif) no-repeat top right;}
.txtarea .cntr {background:url(images/txtarea_cntr.gif) repeat-y right top;}
.txtarea .cntr_xon {background:url(images/txtarea_cntr_xon.gif) repeat-y right top;}
.txtarea .cntr_l, .txtarea .cntr_l_xon {
width:5px;
background:url(images/txtarea_l.gif) repeat-y left top;
float:left;
}
.txtarea .cntr_l_xon {background:url(images/txtarea_l_xon.gif) repeat-y left top;}
.txtarea textarea {
border:0;
background:none;
padding:0;
margin:5px;
}

/*Selects*/
.selectArea {
width:200px;
height:21px;
background:url(images/select_bg.gif) repeat-x left top;
}
.selectArea .left {
width:8px;
height:21px;
float:left;
background:url(images/select_left.gif) no-repeat left top;
}
.selectArea .right {
width:21px;
height:21px;
float:right;
background:url(images/select_right.gif) no-repeat left top;
}
.selectArea .right a {
display:block;
width:200px;
height:21px;
margin-left:-179px;
position:absolute;
}
.selectArea .right i {display:none;}
.selectArea .center {
width:160px;
color:#FFF;
padding-top:3px;
overflow:hidden;
white-space:nowrap;
}

/*Selects drop-down*/
.optionsDivInvisible, .optionsDivVisible {
position:absolute;
margin-top:-1px;
margin-left:3px;
width:172px;
background:#6f7074;
padding:2px;
font-size:11px;
z-index:20;
}
.optionsDivInvisible {display:none;}
.optionsDivVisible {display:block;}
.optionsDivVisible p {
margin:0;
padding:0;
}
.optionsDivVisible a {
color:#F2F2F2;
text-decoration:none;
display:block;
padding:1px 4px;
border:1px solid #6f7074;
}
.optionsDivVisible a:hover {
color:#FFF;
background:#5F6062;
border-color:#cfd0d6;
}

/*Button*/
.buttonSubmit, .buttonSubmitHovered {
width:auto;
height:26px;
color:#FFF;
font-weight:bold;
padding:2px;
background:url(images/button_bg.gif) repeat-x left top;
cursor:pointer;
border:none;
}
.buttonSubmitHovered {background-position:left bottom;}
.buttonImg {vertical-align:bottom;}

Sorry if it is a bit much, but i have looked through it all and have no luck. - Inserted for Maq and TheFilmGod

[scottjcampbell]

Hi, i have now sorted this problem with the suggestions made to me in previous posts. I have decided to not use the <label> tags and instead just use a normal image, along with some javascript i found online which selects the corresponding radio box.

 

Thanks for your help, Scott Campbell.