...

View Full Version : Image Links won't load in firefox.



gh05
10-30-2008, 03:47 PM
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.)





#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>

jerry62704
10-30-2008, 03:55 PM
Looks reasonable, but we need a link to the full page to see it in context.

gh05
10-30-2008, 04:10 PM
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:



<!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>

abduraooft
10-30-2008, 04:38 PM
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

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.

gh05
10-30-2008, 05:32 PM
Thanks abduraooft!

jerry62704
10-30-2008, 05:48 PM
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:

<!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.

gh05
10-31-2008, 12:32 PM
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.

jerry62704
10-31-2008, 05:43 PM
IE adds its own formatting, so you would have to explicitly put in print css which probably won't hurt the other browsers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum