Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Image Links won't load in firefox.

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-30-2008, 02:47 PM   PM User | #1
gh05
Regular Coder

 
Join Date: Aug 2008
Posts: 133
Thanks: 14
Thanked 0 Times in 0 Posts
gh05 is an unknown quantity at this point
Image Links won't load in firefox.
Has anyone had this problem before?

I have a basic css div panel containing a list of images which are also links. In internet explorer they appear fine but in firefox they don't show at all. (there is not even a red cross to say the image won't load).

Code as below but i can't post the site as it hasn't been uploaded to the internet yet (am just testing locally for now.)



Code:
#bottomPanel
{
clear:both;
height:100px;
font-weight: bold;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
margin: 10px 90px 0 90px;
padding 7px 7px 7px 7px;
}



<div id="bottomPanel">
<a href""><img src="H:\CCLNFiles\image006.jpg" height="80" width="120"/></a>
<a href=""><img src="H:\CCLNfiles\image008.jpg" height="85" width="160"/></a>
<a href=""><img src="H:\CCLNfiles\image002.jpg" height="85" width="160"/></a>
<a href=""><img src="H:\CCLNfiles\image003.jpg" height="105" width="72"/></a>
<a href=""><img src="H:\CCLNfiles\image004.png" height="75" width="70"/></a>
</div>
gh05 is offline   Reply With Quote
Old 10-30-2008, 02:55 PM   PM User | #2
jerry62704
Senior Coder

 
jerry62704's Avatar
 
Join Date: Oct 2007
Location: Springfield, IL
Posts: 1,046
Thanks: 9
Thanked 81 Times in 81 Posts
jerry62704 is on a distinguished road
Looks reasonable, but we need a link to the full page to see it in context.
__________________
.
.
...and gladly would he learn and gladly teach

Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls
jerry62704 is offline   Reply With Quote
Old 10-30-2008, 03:10 PM   PM User | #3
gh05
Regular Coder

 
Join Date: Aug 2008
Posts: 133
Thanks: 14
Thanked 0 Times in 0 Posts
gh05 is an unknown quantity at this point
I haven't uploaded the full site to the internet yet but the full document is given here so saving this as html will let you view it in both browsers:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">


<html>
<head>
<title>Welcome to the CCL Website</title>
<style type="text/css"> 


#container
{
width:1109px;
}

A:link {text-decoration: none; color: #0000FF;}
A:visited {text-decoration: none; color: #0000FF;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
img{border:0;}

#topPanel
{
height:100px;
font-weight: bold;
background-color: #ffffff;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080; 
margin: 10px 0 0 0;
padding 7px 7px 7px 7px;
}

#leftPanel
{
float:left;
height:340px;
width:250px;
font-weight: bold;
background-color: #FFFF7E;
text-align:center;
border:medium double #000080; 
margin: 5px 5px 0 0;
padding 7px 7px 7px 7px;
}

#rightPanel
{
float:right;
height:340px;
width:250px;
font-weight: bold;
background-color: #FFFF7E;
text-align:center;
border:medium double #000080; 
margin: 5px 0 0 0;
padding 7px 7px 7px 7px;
}

#centerPanel
{
float:left;
height:340px;
width:570px;
background-color: #FFFF7E;
font-weight:bold;
text-align:center;
border:medium double #000080; 
margin: 5px 5px 0 5px;
padding 7px 7px 7px 7px;

}


#bottomPanel
{
clear:both;
height:100px;
font-weight: bold;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
margin: 10px 90px 0 90px;
padding 7px 7px 7px 7px;

}


</style> 

</head>
<body>

<div id="container">
<div id="topPanel">

</div>

<div id="leftPanel">
	<b>The Partners</b><br/><br/>
	<a href=""> Learning Service</a><br/><br/>
	<a href=""> Colleges</a><br/><br/>
	<a href=""> Coleg Glan Ddi</a><br/><br/>
	<a href=""> WEAD</a><br/><br/>
	<a href=""> Languages for Adults</a><br/><br/>
	<a href=""> Voluntary Action</a><br/><br/>
	<a href=""> YMCA</a>
</div>

<div id="rightPanel">
		<b>Forthcoming Events</b><br/><br/>
		Mon 12th January<br/>
		<a href="">Learning Event - National Museum </a><br/><br/>
    	  	Wed 15th February<br/>
		<a href="">Taster sessions - Central Library</a><br/><br/>
		Fri 7th February<br/>
		<a href="">Network Meeting - Howardian</a><br/>
</div>

<div id="centerPanel">

	<div id="topCenter">
		<br/><br/><p>Centered Text</p>
	</div>

	<div id="bottomCenter">
	</div>

</div>



<div id="bottomPanel">
<a href""><img src="H:\CCLNFiles\image006.jpg" height="80" width="120"/></a>
<a href=""><img src="H:\CCLNfiles\image008.jpg" height="85" width="160"/></a>
<a href=""><img src="H:\CCLNfiles\image002.jpg" height="85" width="160"/></a>
<a href=""><img src="H:\CCLNfiles\image003.jpg" height="105" width="72"/></a>
<a href=""><img src="H:\CCLNfiles\image004.png" height="75" width="70"/></a>
</div>


</div>

</body>
</html>
gh05 is offline   Reply With Quote
Old 10-30-2008, 03:38 PM   PM User | #4
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,678
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Quote:
H:\CCLNFiles\image006.jpg
This is windows path, which can be recognised by IE, since it's a MS product, unlike Firefox.

The web directory structure is more like a *Nix file structure.
You may use it like
Code:
file:///H|/CCLNFiles/image006.jpg
but better to copy those images or the entire folder near to your html file and address them like
/CCLNFiles/image006.jpg or ../CCLNFiles/image006.jpg depending upon the relative path of those files.
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
Last edited by abduraooft; 10-31-2008 at 11:49 AM..
abduraooft is offline   Reply With Quote
Old 10-30-2008, 04:32 PM   PM User | #5
gh05
Regular Coder

 
Join Date: Aug 2008
Posts: 133
Thanks: 14
Thanked 0 Times in 0 Posts
gh05 is an unknown quantity at this point
Thanks abduraooft!
gh05 is offline   Reply With Quote
Old 10-30-2008, 04:48 PM   PM User | #6
jerry62704
Senior Coder

 
jerry62704's Avatar
 
Join Date: Oct 2007
Location: Springfield, IL
Posts: 1,046
Thanks: 9
Thanked 81 Times in 81 Posts
jerry62704 is on a distinguished road
There is an error (16 actually) in your html. One important one is the "<a href"">" on line 135. Here is the code without errors and formatted:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to the CCL Website</title>
<style type="text/css"> 


#container {
	width:1109px;
	}

a:link {
	text-decoration: none; color: #0000FF;
	}
a:visited {
	text-decoration: none; color: #0000FF;
	}
a:hover {
	text-decoration: underline; color: red;
	}
a:active {
	text-decoration: none
	}

img{
	border:0;
	}

#topPanel {
	height:100px;
	font-weight: bold;
	background-color: #ffffff;
	font-size: 20px;
	text-align:center;
	color: #0000EE;
	border:medium double #000080; 
	margin: 10px 0 0 0;
	padding 7px 7px 7px 7px;
	}

#leftPanel {
	float:left;
	height:340px;
	width:250px;
	font-weight: bold;
	background-color: #FFFF7E;
	text-align:center;
	border:medium double #000080; 
	margin: 5px 5px 0 0;
	padding 7px 7px 7px 7px;
	}

#rightPanel {
	float:right;
	height:340px;
	width:250px;
	font-weight: bold;
	background-color: #FFFF7E;
	text-align:center;
	border:medium double #000080; 
	margin: 5px 0 0 0;
	padding 7px 7px 7px 7px;
	}

#centerPanel {
	float:left;
	height:340px;
	width:570px;
	background-color: #FFFF7E;
	font-weight:bold;
	text-align:center;
	border:medium double #000080; 
	margin: 5px 5px 0 5px;
	padding 7px 7px 7px 7px;
	}

#bottomPanel {
	clear:both;
	height:100px;
	font-weight: bold;
	background-color: #FFFF7E;
	font-size: 20px;
	text-align:center;
	color: #0000EE;
	margin: 10px 90px 0 90px;
	padding 7px 7px 7px 7px;
	}
</style> 
</head>
<body>

<div id="container">
	<div id="topPanel">
	</div>

	<div id="leftPanel">
		<b>The Partners</b>
		<br/><br/>
		<a href=""> Learning Service</a>
		<br/><br/>
		<a href=""> Colleges</a>
		<br/><br/>
		<a href=""> Coleg Glan Ddi</a>
		<br/><br/>
		<a href=""> WEAD</a>
		<br/><br/>
		<a href=""> Languages for Adults</a>
		<br/><br/>
		<a href=""> Voluntary Action</a>
		<br/><br/>
		<a href=""> YMCA</a>
	</div>

	<div id="rightPanel">
		<b>Forthcoming Events</b>
		<br/><br/>
		Mon 12th January<br/>
		<a href="">Learning Event - National Museum </a>
		<br/><br/>
    	Wed 15th February<br/>
		<a href="">Taster sessions - Central Library</a>
		<br/><br/>
		Fri 7th February<br/>
		<a href="">Network Meeting - Howardian</a>
		<br/>
	</div>

	<div id="centerPanel">
		<div id="topCenter">
			<br/><br/>
			<p>Centered Text</p>
		</div>

		<div id="bottomCenter">
		</div>

	</div>

	<div id="bottomPanel">
		<a href="">
			<img src="H:\CCLNFiles\image006.jpg" height="80"  width="120" alt="" /></a>
		<a href="">
			<img src="H:\CCLNfiles\image008.jpg" height="85"  width="160" alt="" /></a>
		<a href="">
			<img src="H:\CCLNfiles\image002.jpg" height="85"  width="160" alt="" /></a>
		<a href="">
			<img src="H:\CCLNfiles\image003.jpg" height="105" width="72"  alt="" /></a>
		<a href="">
			<img src="H:\CCLNfiles\image004.png" height="75"  width="70"  alt="" /></a>
	</div>

</div>

</body>
</html>
There are some issues with the layout, but I see images that I substituted for yours.
__________________
.
.
...and gladly would he learn and gladly teach

Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls
jerry62704 is offline   Reply With Quote
Old 10-31-2008, 11:32 AM   PM User | #7
gh05
Regular Coder

 
Join Date: Aug 2008
Posts: 133
Thanks: 14
Thanked 0 Times in 0 Posts
gh05 is an unknown quantity at this point
Thanks Jerry.


Regarding the layout i just realised that i have a problem when printing the page in IE (The panels move order and end up printing on three pages). Is this a common problem or again an error with the layout of my site? In Firefox the site prints perfectly on one page and to view on screen the site looks the same in both browsers.
gh05 is offline   Reply With Quote
Old 10-31-2008, 04:43 PM   PM User | #8
jerry62704
Senior Coder

 
jerry62704's Avatar
 
Join Date: Oct 2007
Location: Springfield, IL
Posts: 1,046
Thanks: 9
Thanked 81 Times in 81 Posts
jerry62704 is on a distinguished road
IE adds its own formatting, so you would have to explicitly put in print css which probably won't hurt the other browsers.
__________________
.
.
...and gladly would he learn and gladly teach

Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls
jerry62704 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 04:49 AM.
Advertisement
Log in to turn off these ads.