3 Replies - 645 Views - Last Post: 01 April 2013 - 01:31 PM

#1 Darkranger85  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 146
  • Joined: 31-August 12

Weird line between image links

Posted 31 March 2013 - 08:14 PM

Ok, I'm using lightbox 2 to display images and I have a smaller thumbnail inside the link.

Now, the lightbox itself works fine, but there is a line between the images. I have used lightbox before on several other sites I have made and I don't recall ever having this issue before.

I tried text-decoration: none thinking it might be something with the link underline but that didn't help. It's also not the border cause I added a border and it works fine and the underline thing is still there.

Here is a picture.

http://i1167.photobu...zpsebc811e0.png

And here is all the css that effects it.

/*Workarounds*/

header, footer, article, aside, section, nav{
	display: block;
}

input:focus, textarea:focus, select:focus{
	outline: none;
}
/*Structure Base*/
body{
	background: url('../images/backgrounds/background.png') no-repeat top center fixed;
	font: normal 15px Arial, Helvetica, sans-serif;
	text-align: center;	
}

#container {
	width: 960px;
	margin: 0 auto;
	border: 1px solid #000;
	border-radius: 4px;
	background-color: #fff;
	color: #000;
	overflow: visible;
	text-align: left;
}

#header{
	width: 960px;
	text-align: center;
	padding-top: 5px; 
}

#horbar{
	width: 960px;
}

#centercol{
	float: left;
	width: 685px;
	text-align: justify;
	padding: 10px;
}

#rightcol{
	float: left;
	width: 234px;
	height: 100%;
	border-left: 1px dashed #000;
	padding: 0px 0px 0px 0px;
}

#footer{
	width: 960px;
	height: 35px;
	text-align: center;
	padding-bottom: 5px;
	overflow: hidden;		
}

.div_content{
	margin: 10px;
}
/*END Structure Base*/

/*Header related*/

/*END Header related*/

/*Navigation Related*/

/*END Navigation Related*/

/*Center Related*/

/*END Center related*/

/*Right Column related*/

/*End Right Column related*/

/*Footer related*/

/*END Footer related*/

/*General Changes*/
h2{
	border-bottom: 1px solid #000;
	font-size: 18px;
}

.centertext{
	text-align: center;
}

hr{
	width: 30%;
	border-color: #000;
}



And the html.

<a href="images/properties/property0001/PondsideChalet_home.JPG" rel="lightbox[property0001]" title="Pondside Chalet">
						<img src="images/properties/property0001/PondsideChalet_sml.png" class="imgbor" />
					</a>
					<a href="images/properties/property0001/PondsideChalet_yard.JPG" rel="lightbox[0001]" title="Yard">
						<img src="images/properties/property0001/PondsideChalet_Yard_sml.png" class="imgbor" />
					</a>
                	<a href="images/properties/property0001/PondsideChalet_view.JPG" rel="lightbox[0001]" title="The View">
                		<img src="images/properties/property0001/PondsideChalet_view_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_garage.JPG" rel="lightbox[0001]" title="Garage">
                		<img src="images/properties/property0001/PondsideChalet_Garage_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_shed.JPG" rel="lightbox[0001]" title="Shed">
                		<img src="images/properties/property0001/PondsideChalet_shed_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_pond.JPG" rel="lightbox[0001]" title="The Lake">
                		<img src="images/properties/property0001/PondsideChalet_pond_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_bedroom.JPG" rel="lightbox[0001]" title="First Bedroom">
                		<img src="images/properties/property0001/PondsideChalet_bedroom_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_2ndbedroom.JPG" rel="lightbox[0001]" title="Second Bedroom">
                		<img src="images/properties/property0001/PondsideChalet_2ndbedroom_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_3rdbedroom.JPG" rel="lightbox[0001]" title="Third Bedroom">
                		<img src="images/properties/property0001/PondsideChalet_3rdbedroom_sml.png" class="imgbor" />
                	</a>                
                	<a href="images/properties/property0001/PondsideChalet_gameroom.JPG" rel="lightbox[0001]" title="Basement Gameroom">
                		<img src="images/properties/property0001/PondsideChalet_gameroom_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_kitchen.JPG" rel="lightbox[0001]" title="Kitchen">
                		<img src="images/properties/property0001/PondsideChalet_kitchen_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_livingroom.JPG" rel="lightbox[0001]" title="Livingroom">
                		<img src="images/properties/property0001/PondsideChalet_livingroom_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_utilityroom.JPG" rel="lightbox[0001]" title="Utility Room">
                		<img src="images/properties/property0001/PondsideChalet_utilityroom_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_bath.JPG" rel="lightbox[0001]" title="Bathroom">
                		<img src="images/properties/property0001/PondsideChalet_bath_sml.png" class="imgbor" />
                	</a>
                	<a href="images/properties/property0001/PondsideChalet_newboiler.JPG" rel="lightbox[0001]" title="New Boiler">
                		<img src="images/properties/property0001/PondsideChalet_newboiler_sml.png" class="imgbor" />
                	</a>



Thanks guys!

This post has been edited by Darkranger85: 31 March 2013 - 08:44 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Weird line between image links

#2 Darkranger85  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 146
  • Joined: 31-August 12

Re: Weird line between image links

Posted 01 April 2013 - 06:07 AM

I found the problem.

I had the link split onto multiple lines for readability and it was causing the line.

Is there any way to counteract this? I found the code much easier to read when spread out.
Was This Post Helpful? 0
  • +
  • -

#3 Koyume  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Weird line between image links

Posted 01 April 2013 - 01:12 PM

I've always found it useful to use comment tags in the middle of a tag like that. Such as this

<a href="http://blah.com"><!--

-->Blah <!--

--></a>


It looks rather funny, but it does work, and it will separate code.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,540
  • Joined: 12-December 12

Re: Weird line between image links

Posted 01 April 2013 - 01:31 PM

There is the base tag but it can cause other issues, particularly with #target links.

I prefer to split tags between attributes, and accept that the HTML-lines might be longer than I would normally like.

Of course, another option is to reduce the length of your folder and image-names :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1