HTML - Firefox: Extra Border On Linked Images

I'm making an HTML design on notepad, and I got some images for links, but when I view it on a webpage, the images have a purple border. How to I remove this?

Hi,

I am getting a boder in firefox for a hyperlink image. this is the code

<a href="default.aspx"><img src="Images/Home.gif" width="100" height="20" alt="Home" border="0"></a>

It's working fine in IE6 but i am getting a blue border in firefox. Can someone tell me how to solve this problem?



Thanks

Raja

Hi, I'm having an issue with Firefox 3 that is stumping me.

My site has a SWF centered in the middle of my page which is embedded with swfobject v2.1. When the page loads my SWF overlaps the right-sided border of the div I've setup in Firefox, and from what I can tell, Firefox sets the border property on the inside of the div, whereas all the other browsers set the border property on the outside of the div.

I've read up on the box model problem, but seeing as how every other browser(IE, Opera, Safari, Chrome etc.) displays the page properly, I'm hitting the wall here. I don't know if swfojbect is causing the problem, or if it's something in my code, because up until I embedded the flash, I'm pretty sure everything was aligned. Anyways, any help would be greatly appreciated...

http://www.lakeviewchurch.com/new

Hi guys

Attached is an image of the problem I'm having where in Firefox my table borders are not displaying correctly. I've coded using standard html as follows:

Code:

<table width=100% cellspacing="0" cellpadding="5" bgcolor="ffffff" border="1px" bordercolor="C0CFE2">

Any Ideas? The one on the left is the Firefox version.

For some reason my site looks just fine in Internet Explorer, but in Firefox the border colors are off. Here is my site: www.allformommies.com

You can see the first table has the correct color border (light purple) but the others all appear in black. I know this is a goof on my part, but can't for the life of me figure it out. If anyone could help me figure out how to get all of the table borders light purple, I'd be very appreciative. Thanks!

Hi guys

Just joined and hoping someone can offer some advice on an issue.

I want a black border around images which show up jsut fine in IE but some reason the border does not appear in FF. The below is an example of what i am doing.

<IMG STYLE="position:absolute; TOP:110px; LEFT:610px; WIDTH:180px; HEIGHT:190px" src="Optimized-027edited.jpg" style="border-style: solid; border-color: black;"/>

Does anyone have any advice on where what I can do to make the border show up in both browsers?

Any help appreciated.

Cheers

I have had this problem on almost all the websites I've made and I'm too picky to let it go...

When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.)

For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page.

An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/

This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders?

Thanks,
Jase

hi guys. I am trying to get rounded edges to appear around my tables when displayed in Firefox. However, while it does display rounded edges, it also displays an angular border, which takes whatever colour the text has.

here is the code.

Quote:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#MainCell {
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
width: 800px;
background-color: #FFF;
height: 1000px;
}
.whitebackground {
}
#LogoCell {
background-color: #006;
height: 15px;
}
#LinksCell {
background-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
width: 77%;
}
#ContentCells {
text-align: center;
}
#BottomLinksCell {
}
table {
-moz-border-radius: 30px;
border: #cc2800;
}
body {
background-color: #006;
color: #0F0;
border: transparent;
}
.TableBackground {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="../ajxmenu.css" type="text/css" />
<script src="../ajxmenu.js" type="text/javascript"></script>
</head>

<body>
<table width="100%" border="1" align="center" id="MainCell">
<tr>
<th scope="row"><table width="100%" border="1" id="LogoCell">
<tr>
<th class="whitebackground" scope="row">LogoCell - I'll see if my guy will do something for you or if you can get a mate to, if not I'd go to a professional</th>

</tr>
</table>
<table width="78%" border="1" align="center" id="LinksCell">
<tr>
<th scope="row"><div class="AJXCSSMenueDFaTFD"><!-- AJXFILE:../ajxmenu.css -->
<div class="ajxmw1">
<div class="ajxmw2">
<ul>
<li><a href="#"><b>Home</b></a></li>
<li><a class="ajxsub" href="#"><b>Gallery</b></a>
<ul>
<li class="sfirst slast"><a href="#">Slideshow</a></li>
</ul>
</li>
<li><a class="ajxsub" href="#"><b>Corporate&nbsp;Work</b></a>
<ul>
<li class="sfirst slast"><a href="#">Testimonials</a></li>
</ul>
</li>
<li><a class="ajxsub" href="#"><b>About&nbsp;Us</b></a>
<ul>
<li class="sfirst"><a href="#">Qualifications</a></li>
<li class="slast"><a href="#">Business Associates</a></li>
</ul>
</li>
<li class="tlast"><a href="#"><b>Contact&nbsp;Us</b></a></li>
</ul>
</div>
</div>
<br />
</div>&nbsp;</th>
</tr>
</table>
<!-- TemplateBeginEditable name="ContentRegion" -->
<table width="68%" border="1" align="center" id="ContentCells">
<tr>
<th width="50%" height="113" scope="row"><p>&nbsp;</p></th>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<th height="135" scope="row">&nbsp;</th>
<td>&nbsp;</td>
</tr>
</table>
<!-- TemplateEndEditable --> <table width="100%" border="1" id="BottomLinksCell">
<tr>
<th scope="row">BottomLinksCell</th>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
Can anyone tell me how I can get rid of the angular border, and just be left with the rounded one? Thanks!

In a website i'm designing, there is a slideshow I created, and instead of using flash I used Windows Media Player. For some reason the html border attribute on both the <embed> and <object> tags, when viewed in Firefox, do not work.

Page with border problems

here is the code, if you want it:

Code:

<center>
<object id="MediaPlayer" 
             width="800" 
             height="650" 
             classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" 
             standby="Loading Windows Media Player components..." 
             type="application/x-oleobject" 
             codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"
             title="Pete's Mountain Road Slideshow"
             border="3"> 

<param name="filename" value="http://www.petesmountainroad.com/PetesMountain.wmv" />
<param name="Showcontrols" value="True" />
<param name="autoStart" value="False" />
<param name="wmode" value="transparent" />

<embed type="application/x-mplayer2" src=http://www.petesmountainroad.com/PetesMountain.wmv" 
              name="MediaPlayer" 
              autoStart="False" 
              wmode="transparent" 
              width="800" 
              height="650"
              title="Pete's Mountain Road Slideshow"  />
</object>
<br />
<p class="main">If you do not have Windows Media Player, you can view the video by following 
<a class="Link" href="http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx" target="_blank" title="Download Windows Media Player 11">this link</a> 
to download the program to your computer, then try to play it again.</p>
</center>
</body>
</html>

Using the following code column within my datagrid. It gives me different results within firefox and IE. It should show some text and then the image should appear after the text. Within IE 7 it works fine but within firefox 3.6.10 the image is directly over the text. I'm not using a CSS file. This is a page I inherited and I'm asked to fix this. Any help would be appreciated.

Code:

<asp:templatecolumn headertext="Name"  headerstyle-width="90px" sortexpression="varName">
    <itemtemplate>
    
        <asp:label width="10" id="lblName" runat="server">
             <%# DataBinder.Eval(Container.DataItem,"varName")%>
        </asp:label>
         
        <img src='/Images/Info16x16.gif' border=0   />
	
    </itemtemplate>
</asp:templatecolumn>

Hey,
Whever I try to view a page in firefox there are weird gaps in between images where as in IE 6+ it shows up perfectly.

I figured the problem lies in all the spacer images:
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>

if I get rid of it - the results are picture perfect in Firefox and Safari - however now IE6+ will give simiar problems


Is there way I can get it working in all the browsers???

Thanks,
Ali

Hi, Im a bit of an amateur and for some reason I cant get an image to display in firefox, but its fine in explorer....

Does anyone know why this might be?

Thanks


Aly_ve

I've just come to do my new site, but for some reason I can't get the site to display properly in Firefox 2.0.0.1. The images aren't working properly, the banner image I have put in place works fine in IE, displays in Opera (I'm still working on the layout), but won't display at all in Firefox. If I use the developer toolbar on my page, it reports as a broken image, but I click the link and the image displays. The alt text appears in my layout, which is more confusing.

But I can't find a solution for this. It's nothing to do with the markup, I've tried displaying the image in a completely blank page, still nothing.

I have a U3 drive, it has Firefox 1.5 loaded on it, the image displays fine in there.

Any ideas?

http://www.hypersonicscream.com - Can anyone let me know if it's a problem with my copy of Firefox?

Hi, I was wondering why I am getting a gap in firefox right below the flash header, along with by the "welcome to our company", "about our company", "company news", and "client login" images? This doesnt happen in IE, or other browsers.

My website is www.niveosoft.com