Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts

    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>

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    Last edited by abduraooft; 10-31-2008 at 11:49 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks abduraooft!

  • #6
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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

  • #7
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •