Can anyone guess why an <a> situated inside a <span> is rendered as being outside it?

DJRobThaMan · #1 01-12-2007, 01:46 PM

So far I haven't tested in IE, but in firefox this happens. Below is the code (there is some extra styling in there that I don't need because I've been trying loads of stuff to get this thing to work)

I have bolded the relevant sections in the code. Anyone know what I can do?

Thanks a lot,
Douglas

PS, an image of the problem is attached

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="Shortcut Icon" type="image/x-icon" href="/images/favico.ico">
<link rel="stylesheet" type="text/css" href="/ext/styles/halcyon.css">
<link rel="stylesheet" type="text/css" href="/ext/styles/gallery.css">
<link rel="stylesheet" type="text/css" href="/ext/styles/galleryTest.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/ext/styles/ie7.css">
<link rel="stylesheet" type="text/css" href="/ext/styles/galleryTestIE7.css">
<![endif]-->
<title>
	Photo Gallery - Halcyon Villa, Jamaica, West Indies
</title>
</head>

<body>

<div class="left">
	<img alt="Breathtaking Views" src="/images/tropicalHeader.jpg">
	<img alt="Halcyon Villa" src="/images/halcyon.gif">
	<img id="zoom" alt="" src="/images/camera.jpg">
	
</div>

<div class="right">
	<div class="menuTop"></div>
	<ul class="menu">
		<li><a title="Go back to our main page" href="/">Home</a></li>
		<li><a title="Discover more about Halcyon" href="/information">Information</a></li>
		<li><a class="active" title="Look through images of Halcyon and its surroundings" href="/gallery">Gallery</a></li>
		<li><a title="Need more information? Contact us" href="/contact">Contact Us</a></li>
		<li class="end"></li>
	</ul>
	<div class="menuBottom"></div>
	<ul class="tabs">
		<li id="label1"><a title="Look at the house" href="#">The House</a></li>
		<li id="label2"><a title="Look at the garden" href="#">The Garden</li>
		<li id="label3"><a title="Look at the view" href="#">The View</li>
		<li class="end"></li>
	</ul>
	<div class="preview">
		<span class="test" style="clear: both;"><a title="Browse through the thumbnails" href="#" style="clear: both;">Back</a></span>
		<span class="images">
			<ul>
				<li><a name="i11" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/05.jpg"></a></li>
				<li><a name="i11" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/12.jpg"></a></li>
				<li><a name="i21" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/09.jpg"></a></li>
				<li><a name="i31" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/01.jpg"></a></li>
				<li><a name="i32" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/02.jpg"></a></li>
				<li><a name="i33" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/03.jpg"></a></li>
				<li><a name="i34" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/04.jpg"></a></li>
				<li><a name="i35" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/06.jpg"></a></li>
				<li><a name="i36" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/07.jpg"></a></li>
				<li><a name="i37" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/08.jpg"></a></li>
				<li><a name="i38" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/10.jpg"></a></li>
				<li><a name="i39" title="View this image below" href="#"><img alt="" src="/images/gallery/thumbnails/11.jpg"></a></li>
				<li class="end"></li>
			</ul>
		</span>
		<span><a title="Browse through the thumbanils" href="#">Next</a></span>
	</div>
	<div class="display">
		<a title="View a larger version of this image" href="/images/gallery/05.jpg"><img alt="" src="/images/gallery/medium/05.jpg"></a>
	</div>
</div>

<div class="footerimg">
<img alt="" src="/images/footer.gif">
</div>

<div class="footer">
	Halcyon Villa Copyright &copy; 2006 - 2007 | Designed by Multi-Media Jamaica Ltd.
</div>

</body>
</html>

Code:

/************************
This is the colour scheme

focus: #537fcf;
blur: #c1d1ee;
hover: #84a3dd;

This was the colour scheme
*************************/

li
{
	list-style: none;
}

preview *, li
{
	float: left;
}

.tabs
{
	text-align: center;
}

.tabs, .preview, .display
{
	width: 39.2em;
	margin: auto;
}

.tabs li, .preview, .display
{
	background-color: #537fcf;
}

.tabs li
{
	width: 13em;
	border-left: .1em solid #ffffff;
	background-color: #c1d1ee;
	line-height: 2em;
}

.tabs li:first-child
{
	border: none;
	background-color: #537fcf;
}

a
{
	display: block;
	width: 100%;
	text-decoration: none;
	font-size: 1.2em;
}

.tabs a:hover
{
	background-color: #84a3dd;
}

.preview span
{
	display: block;
	float: left;
	line-height: 5.5em;
	width: 2em;
}

span.images
{
	width: 28em;
	height: 7em;
	line-height: 0em;
	overflow: hidden;
}

.preview li
{
	padding: .2em;
}

.preview img
{
	
}

li.end
{
	float: none;
}

.test
{
	display: block;
	border: 1px solid black;
}

ul
{
	display: block;
}

.images ul
{
	width: 1280px;
}

Nanscombe · #2 01-12-2007, 02:04 PM

Hi Douglas,

I'm relatively new to CSS but ...

I believe that you have made the <a> tag into a block tag by using the CSS

Quote:

a
{
display: block;
width: 100%;
text-decoration: none;
font-size: 1.2em;
}

I don't think you can put an inline tag like <span> around a block tag

This may be causing your problem.

I'm sure someone who has more knowledge may be able to elaborate.

Regards
Nigel

DJRobThaMan · #3 01-12-2007, 02:15 PM

Technically, yes this is true. Block elements should not be placed inside an in-line element. But this is more of a guideline than a rule and should render properly anyway. Also if you notice, I have also made that span a block element as well (Just tested taking out all the display: block; statements and it makes no difference)

Code:

.test
{
	display: block;
	border: 1px solid black;
}

I guess if I do this I should probly just use a <div>.

By the way, as I am writing this I decided to try that (using a <div>) and it now renders properly. But I'm still curious as to why something like this would happen.

Any ideas?
Douglas

thechasboi · #4 01-12-2007, 02:16 PM

DJRobThaMan

The thing about css is that it is very strict on tag opening and closings. You have open <a> tags. I suggest you close all you tags before going nut on the css. I have had this trouble with loads more lines and it could drive you nuts trying to find out why you do not validate. Well hope this helps.

DJRobThaMan · #5 01-12-2007, 02:26 PM

Holy crap.. I didn't see those open tags. Thanks.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)