HTML - Rollover Not Working After Added Border=0 (to Delete Purple Border Around Link Img)

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

Hello everyone, I've been racing to learn html/css in the past couple weeks to throw up a website, and so far so good.
But: I've searched the internet and I cannot find an answer to my questions.

The page in question is:
http://www.andrew.cmu.edu/user/jonmille/projects.html
style sheet (relevant section is in the "Programming: List Settings" section)
http://www.andrew.cmu.edu/user/jonmille/style.css

You can see that the gray borders under the text/images have a small break in them. I assume it has something to do with the fact that I'm using two columns. How do I fix this and make a solid border (in a non hackish way)?
Note: if you say "use css/divs," I wrestled with those for about two hours before I gave up and made a table.

Secondly, in IE7, all the images/text are completely flushed left, ignoring the table padding. How can I fix this?
Note, I've never checked this site in IE6 or below, and never will, so if it looks wrong in IE6, then the user doesn't deserve to see my site anyway.

Thanks for your time!
Jon

how do I make it so that a regular html image link (<a href="bla.html"><img src="bla.png"></a>) does have the blue frame around when it hasn't been clicked and the purple when it has? Thanks

Where in my CSS would I add a border and border color?


html,body {
height:100%;
margin:0;
}
body {
background-color:#000;
background-image:url(../images/background.jpg);
background-attachment:fixed;
background-size:100% 100%;
}
#container {
width:700px;
padding:40px;
border-right:1px solid #003;
border-left:1px solid #003;
margin:auto;
background-color:rgba(0,0,0,0.5);
color:#ccf;
box-shadow:#000 0 0 10px;
}

Hi, is there a way to put a border around only some parts of a table?

I've tried using css, but it didn't work:

<p style="border-bottom: 1px; border-left: 1px; border-right: 1px; border-top: 1px">

can anyone help?

thanks

Hey Guys

I have a 1px X 5px image and I am trying to wrap a border around it. It looks fine in FF but in internet explorer there is a small gap. See images below:

FireFox:


IE6:


Here is the coding:

CSS:
HTML Code:

#tabUnderline {
	border : solid 1px #aaa9a9;
	background-image : url(images/buttons/tab_underline.gif);
	background-repeat : repeat-x;
	height : 3px;
}

HTML:
HTML Code:

<div id="tb"><div id="tabUnderline"></div></div>

can anyone tell me how this is done? the border can be seen on the football manager site hattrick. thx

Buddy...

I looking for the solution about this border. which is always around the swf in IE.
Any solution to remove this.

I keep in waiting...

Thanx...

We use a Joomla platform for our website, and in the CSS code, it automatically adds a border around tables, images etc. I'm trying to go around that with html by specifying table parameters.
There is a border in the middle of the table now, and I'm trying to remove the border completely. However, keep in mind I do not want to modify the CSS for all the pages. Thank you, help will be GREATLY appreciated.

http://augustinenursery.com/index.ph...&id=6&Itemid=7
Quote:
<div class="topPanel">
<div class="pageName">Promotions</div>
<div class="pageName" style="text-align: justify;"><span style="color: #000080;"><span style="font-size: 18pt;"><span style="color: #000000;"><a target="_blank" href="images/stories/augustine/aug_mthrsday_dlyfreemn_050311_lowres.jpg">Mother's Day Special, click here!</a></span></span></span></div>
<div class="topContent">
<table bordercolor="#ffffff" border="1" cellpadding="0">
<tbody>
<tr>
<td>Current Spring Specials:</td>
<td><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" />&nbsp;Arborvitae Emerald Green 6-7' / $69.95<br /><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" />&nbsp;Japanese Maples 5 gal. / $99.95<br /><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" />&nbsp;Rhododendron PJM 2 gal. / $9.95<br /><img height="7" width="9" src="images/stories/augustine/bullet_sw.gif" style="border-style: none;" />&nbsp;White Pine 5-6' / $99.95</td>
</tr>
</tbody>
</table>
</div>
</div>

okey so i have this image that i would like to make but i cant figure out how to make it so i would like to hear some respond from u guys thanks and sry if its the wrong place to post i dont realy know what i need to use for it...

Hi

I have built a page with a table and the thickness of the border around the entire table is different in Firefox vs IE, which impacts the way the words fit in the space.

The page is http://www.totallyrichmond.co.uk/advertise2.html
and the box concerned is the green one on the right hand side of the page

Would value any advice.

The code is:

<table width="100%" id="table8" cellpadding="10" cellspacing="0" bordercolor="#000000" border-collapse="collapse" class="style2" BORDER=1px RULES=none FRAME=box>
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding-right: 10px" height="30" width="354">
<p align="right"><b>The Restaurant in Richmond</b></td>
</tr>
<tr>
<td bgcolor="#95A24B" class="style3">
<a href="advertise.html">
<img src="images/chez-gerard-steak.gif" alt="Great Sunday Lunch in Richmond" align="left" style="border: 1px solid #808080;" class="style6"></a><font color="#FFFFFF"><img alt="richmond" height="90" src="images/5-wide.gif" style="float: left" width="5">Bring your friends and family to our wonderful riverside restaurant and treat them to our acclaimed Sunday lunch. We offer a la carte, set lunch and kids menus. Children's play area. </font></td>
</tr>
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding-right: 10px" height="30">
<p align="right"><b>&nbsp;</b>0208 199 9999 |

email | website</td>
</tr>
</table>

Hi all,
I'm trying to achieve a border around columns, like on this website:
http://www.birchandbird.com

I like the blue textured border around the columns but I'm completely stuck on how I achieve that. Can anyone please help me?
Thank you so much in advance!

I'm looking for a way to create a diagonal border, could be a div, table or frame.
The image shown underneath here is the left part of a website, top is the menu,
bottom part is a picture that should change when another page is shown. So
what the result should be is that the picture should change when a button is
clicked, but the menu itself shouldn't reload (because otherwise with about 10
different pictures you would need 10 menu's too, and would be a pain to
change the menu then)

how do i change the border colour in a style sheet? i added it to the body parts but it didn't change =/ .. this is my style sheet (the border colour part isn't there now i'm hoping someone can add it in the right place)

Quote:
/* CSS Document */

body{
scrollbar-arrow-color: #AD33FF;
scrollbar-3dlight-color: #EFEFEF;
scrollbar-highlight-color: #EFEFEF;
scrollbar-face-color: #EFEFEF;
scrollbar-shadow-color: #EFEFEF;
scrollbar-darkshadow-color: #EFEFEF;
scrollbar-track-color: #EFEFEF;

}
a:visited {
color: #AD33FF;
text-decoration: none;
}
a:active {
color: #AD33FF;
text-decoration: none;
}
body {
background-color: #494949;
}
body,td,th {
color: #9D9D9D;
font-family: Tahoma;
font-size: 10px;
}
a:link {
color: #AD33FF;
text-decoration: none;
}
a:hover {
color: #cccccc;
text-decoration: none;
}

how to make a border with shadow?