Learn VBA & Macros in 1 Week!

CSS - Problem (?) With Img Border Inside A:link In Firefox

Full Excel VBA Course - Beginner to Expert

Problem (?) With Img Border Inside A:link In Firefox	View Content

Can any of you tell me why with the a:link/visited set with border:none
(as in the example at the bottom of the e-mail), I get a box around an
image inside a link:

<a href="communication.php"><img src="resources/president.jpg"></a>

Working on a MAC, I noticed that the border only appears in
Firefox but not in Safari, Opera and OmniWeb. Can anyone
tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet?

STYLESHEET:

a {text-decoration: none;}
a:link { color: #000000; border: none;}
a:visited { color: #000000; border: none;}
a:hover { color: #bbbb00; border: none;}
a:active { color: #000000; border: none;}

.image{border-width:0px; border: none;}

Full Excel VBA Course - Beginner to Expert

Urk... Have Problem With Border-collapse And Bottom Cell Border In Firefox.. Help?

Similar Tutorials

View Content

Hi.

Have created some simple tabs using table cells.

Active tab should have bottom-border color equal to page background-color.
Non-active tabs should have bottom-border=black.

Works fine in IE, but does not work very well in Firefox.

If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell.

So is there a way to make this work in both IE and Firefox...
and hopefully most other browsers...

See code below:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
	a.menu_top:link {color: #000000; text-decoration: none;}
	a.menu_top:visited {color: #000000; text-decoration: none;}
	a.menu_top:hover {color: #000000; text-decoration: none;}
	a.menu_top:active {color: #000000; text-decoration: none;}
	
	td.menu_top_passive { 
		background-color: #777;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #000000 solid;
		
		text-align: center;
		
		cursor:pointer;
		font-weight: bold;
		
		padding: 5px 20px 5px 20px; 
		 
		margin: 0;
		 
	}
		
	td.menu_top_active { 
		
		background-color: #bbb;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #bbb solid;
		
		text-align: center;
	
		cursor:pointer;
		font-weight: bold;
		padding: 5px 20px 5px 20px;
		
		margin: 0;
		
	}
	

</style>

<script language="JavaScript">


function change(id, url) {
	for (i=1; i<6; i++){
		eval("document.getElementById("+i+").className='menu_top_passive'");
	}	
	eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>

</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?

</center>
<br><br><br>
	<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
		<tr>
			<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a  href="javascript:;" class="menu_top">Item 1</a></td>
			<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>	 
			<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a  href="javascript:;" class="menu_top">Item 3</a></td>				
			<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a  href="javascript:;" class="menu_top">Item 4</a></td>
			<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a  href="javascript:;" class="menu_top">Item 5</a></td>

		</tr>
	</table>
</body>
</html>

Firefox Border Problem

Similar Tutorials

View Content

I've got a layer on my page that I'm showing and hiding through javascript. The layer is positioned absolutely and given a position of right: 0 and bottom: 10px in the CSS file.

Now in one case I actually went into the page and did an inline style to change the position. So that one is given a different position, top: -5px and left: 10px.

In IE it works fine. In Firefox the border sometimes won't expand to enclose the box.

Here's what I've found:

-Take out the position from the CSS file and position with inline style -- works.

-Leave the position in the CSS file and don't position with inline style -- works.

-Leave position in CSS file and change right to left and change to any value -- works.

-Leave position in CSS file and change bottom to top and change to any value -- doesn't work.

So the big culprit here seems to be defining a position with bottom and then switching to top causes Firefox 1.5 or 2 to fail. The same thing seems to happen in Opera 9. This seems like a bug, but why in multiple browsers?

I've tried floating things within the box, setting the overflow to auto, nothing seems to make the border expand around the box. Any thoughts?

Css Border Problem In Firefox ..

Similar Tutorials

View Content

It looks fine in IE. But went wrong in Firefox.
Also there seems to be a space to the right of each img button. :cry:

IE
http ://imgboost.com/uploads/894333_screenshot2.jpg

FF
http ://imgboost.com/uploads/113426_screenshot1.jpg

My Css
Quote:
* {
margin: 0;
padding: 0;
}

html{
height: 100%;
margin: 0;
padding: 0;
}

body {
height: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0;
padding: 0;
}

* html #container {
height: 100%;
}

#container {
position: relative;
min-height: 100%;
}

#buttons {
padding-right: 0em;
padding-left: 0em;
}

#topLinks
{
list-style: none;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0.9em;
padding-right: 0;
background-image: url(../images/footer_bg.gif);
background-repeat: no-repeat;
}

#topLinks li
{
display: inline;
border-left: 1px solid #FFFFFF;
padding-right: 0em;
padding-left: 0em;
}

#topLinks li.topLinks_first
{
border-left: 1px solid #FFFFFF;
}

#topLinks li.topLinks_last
{
border-right: 1px solid #FFFFFF;
}

#topLinks a
{
color: #FFFFFF;
}

#header {
padding-top: 5px;
padding-left: 5px;
margin: 5px;
}

#footer {
width: 100%;
text-align:center;
position: absolute;
bottom: 0;
margin:0;
padding:0;
}

#footer_pink {
background: url('../images/footer_pink.gif') repeat-x;
height: 35px;
}

#bottomLinks
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
list-style: none;
margin-top: 0;
margin-left: 0;
padding-top: 0.9em;
background-image: url(../images/footer_bg.gif);
background-repeat: no-repeat;
}

#bottomLinks li
{
display: inline;
border-left: 1px solid #FFFFFF;
padding-right: 1em;
padding-left: 1em;
}

#bottomLinks li.first
{
border-left: 0 none transparent;
}

#bottomLinks a
{
color: #FFFFFF;
}

#footer_yellow {
background: url('../images/footer_yellow.gif') repeat-x;
height: 55px;
}

.footer_yellow {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#333333;
}

#footer_content {
padding-top:1.0em;
}

#footer_yellow img {
border: none;
}

#menu {
background: url('../images/pink_menu.gif') repeat-x;
height: 37px;
text-align:center;
}

#menu a img {
border: none;
}

#menu ul {
padding:0px;
margin:0px auto;
}

#menu ul li{
display:inline;
list-style-type:none;
}

Css Problem: How To Remove Border Around My Image Link??

Similar Tutorials

View Content

I just don't know how to get rid of the border around my image links... When you go to the site, everything looks okay, but when you press the link ("blog"), a border appears around it. And if you click it and then return back, the border is there all the time. Why? I have written "border: none;" pretty much everywhere in my css I can think of!
I'm running out of ideas... This is probably something really simple so please help me out, I'm not much of a programmer as you can see..
The same border-problem repeats also on that blog-page which is a wordpress layout and should have nothing to do with my css!?

The site is he
http://prettydisturbed.com/

And my css around the problem looks like this:

Code:

#blog {
  	display: block;
	float: left;
  	width: 96px;
  	height: 62px;
  	background: url('../img/blog_mo.jpg') no-repeat 0 0;
	border: none;
}

a #blog img {
	border: none;
	text-decoration: none;
}


#blog:hover
{ 
	background-position: 0 -62px;
	border: none;
}

#blog:visited
{ 
	border: none;

}

#blog span
{
	display: none;
	border: none;
}

p {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0;
	padding: 0;
	border: none;
	text-decoration: none;
}

a:link {
	text-decoration: none;
	color: #ffffff;
	font-size: 13px;
	border: none;
}

a:visited {
	text-decoration: none;
	color: #ffffff;
	font-size: 13px;
	border: none;
}


a:hover {
	text-decoration: none;
	color: #ff39da;
	font-size: 13px;
	border: none;
}
a:active {
	text-decoration: none;
	border: none;
}

Link Problem In Firefox?

Similar Tutorials

View Content

Hi!

Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work!

Its a little strange! Output at www.generating-sets.com

Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly).

CSS below:

PHP Code:
html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif;
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%;
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044;
color: #ffffff;
margin-bottom: 0px;
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}
div.displaybox {
color: #000000;
padding: 2%;
margin: 1%;
border: #000044 solid 1px;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;
font-size: 1.1em;
}
div#userbar {padding: 0%;
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044;
color: #ffffff;
margin-bottom: 0px;
border-bottom: solid #000000 1px}

div#topleveladminbar {
padding: 0%;
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044;
color: #ffffff;
margin-bottom: 0px;
border-bottom: solid #000000 1px
}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width: 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff;
margin:0; padding:0;
height:100px;
}

#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff;
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid;
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:160px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff;
text-align:center;
}
div#newsbar {padding: 0%;
text-align: left;
height:150px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044;
color: #ffffff;
margin-left: +150px;
margin-right: +10px;
margin-top: -180px;
border: 2px #000000 solid;
width: auto;}

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h2 {font-size: 1.3em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h3 {font-size: 1.2em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h4 {font-size: 1.1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h5 {font-size: 1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

a:link {color: #ffffff;
text-decoration: underline;}

a:visited {
    color: #ffffff;
    text-decoration: underline;}

a:hover {color: #ffffff;
background-color: #0000FF;
text-decoration: underline;}

.displaybox a:link {color: #0000FF;
text-decoration: underline;}

.displaybox a:visited {
    color: #0000FF;
    text-decoration: underline;}

.displaybox a:hover {color: #000044;
background-color: #EEEEEE;
text-decoration: underline;}

Td Inside Border

Similar Tutorials

View Content

Hi All,

How can I enable the inside bordder of a TD in html.

Thans in advance

Want Border On Link Text, Not Link Image

Similar Tutorials

View Content

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Border Inside Bg Colour

Similar Tutorials

View Content

Is it possible to include (in this instance) a white border, INSIDE an orange background colour on a h1. The background colour of the page is white and the background colour of the h1 is orange, so I need the border inside rather than around the h1 bg colour for it to work otherwise you wouldn't see it for the white page background.

Can this be done?

If so can anyone help..

Thanks.

Placing Text Inside A Graphical Border/frame Using Divs

Similar Tutorials

View Content

I have a blog and I want to put my text inside a border/wrapper.

So I've made the border and sliced it up into 3 parts: top middle and bottom.

I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it.

So I did this but dont know what Im doing wrong:

Code:


<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}

</style>


<div class="top" id="top"></div>

<div class="mid" id="mid">

 <div class="content" id="content">Content Goes Here</div>
  
</div>

<div class="bottom" id="bottom"></div>

Any help is appreciated.

JH

Weird, No Border-top Makes Inside Parent Div Lose Margin ?

Similar Tutorials

View Content

title doesnt really explain it, but i cant really explain it well in 1 line.

code I use is at bottom of the post

but using the below code. If I take out the border-top declaration in #bodycontainer, it seems to lose the margin-top that is declared in the flashcontainer. when i say lose, the background-color of the bodycontainer no longer exists above the flashcontainer. it seems as the flashcontainer overlays the parent and moves up or whatever, if that makes any sense.

this is in Firefox 3.0.3

code validates as transitional (and even strict if i change the doctype)

i cannot figure out why either. i've used firebug to see if any CSS was overriding, but it doesnt seem to be any

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" xml:lang="en" lang="en">
<head>
<title>Test</title>

<style type="text/css">
<!--

body {
	margin: 0;
	padding: 0;
}

#bodycontainer {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	background-color: #000;
	border-top: 1px solid yellow;  /*  remove this line   */
}

.flashcontainer {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	border-top: 1px solid red;
}

-->
</style>
</head>
<body>

<div id="bodycontainer">
	<div class="flashcontainer">
	<img src="images/home_flash_area.jpg" width="950" height="240" alt="flash container" title="flash container" />
	</div>
	<h2>Some Title</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doamet, consectetur adipisicing elit, sed do.</p>
</div>

</body>
</html>

Slight Content Shift On Link Click In Firefox 2 Only -- Link Provided

Similar Tutorials

View Content

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

Link Border

Similar Tutorials

View Content

Hi,

Im having problems with a link.

when I click on the link a grey dotted border appears around the element, and remains there until i click somewhere else on the page (the link is actually a JS onclick event)

Any ideas?

Xaphan

edit:
tried the :active and :focus pseudo-classes, but to no avail.

Border On A Link In A List

Similar Tutorials

View Content

I can't set the border around my links in a drop down list, not the top level or 2nd level.

I do it on #nav (id for whole 2 level lists group) on all these to make sure but no black border.

#nav a {..}
#nav ul {...}

#nav ul li { ...}

#nav li { /* all list items */
float: left;
background: lightblue;
width: 100px; /* width needed or else Opera goes nuts */
border-width=1 1 thin thin;
border-color=black;

Odd Border Around Link After Clicking

Similar Tutorials

View Content

I've got this odd border appearing around my link when I click on it and after it's been clicked on until I click elsewhere on the page (or if I click on it again to fold accordion). I'm not sure whether this falls under CSS or JavaScript as it's an accordion list through jQuery.

I've tried adding border: none; and that did nothing. Any help greatly appreciated!

Firefox Css Border-top Issues

Similar Tutorials

View Content

Why do the margin-top values on these layers DO NOTHING in firefox, but act as expected in IE? Which way is actually correct?
Also, if I add a float:left to the blue layer, firefox adds a margin-top to the blue and green layers only?
This seems very wrong.. How can I get the expected margin-top on each layer?

Code:

<BODY style="background-color:yellow;">
<div id='blue' style="width:250px; height:250px; display:block; margin-left:1px; margin-top:10px; background-color:blue; position:relative;">
	<div id='green' style='width:220px; height:200px; margin-top:10px; background-color:green; display:block; position:relative;'>
		<!--- prod selector box --->
		<div id='gray' style='width:200px; height:150px; overflow:auto; margin-top:10px; margin-left:4px; display:block; background-color:gray; position:relative;'>
			asdf
		</div>
	</div>
</div>
</BODY>

Firefox Loses Some Of The 1px Border

Similar Tutorials

View Content

I just can't seem to see why Firefox only shows part of the border on the < ul> element. IE 6 seems OK.

Here's the link: imagesandwords.org.uk/andrewjamesrp/index.php

Here's the HTML:

< div id="navcontainer">
< ul id="navlist">
< li>< a href="#1" title="Examples of the Work">Images< /a>< /li>
< li>< a href="pages/about.php" title="About the artist">Andrew< /font>< /a>< /li>

i etc for the other links
< /ul>
< /div>
Here's the CSS:

#navcontainer {
color: #8d1016;
font-weight: bold;
width: 205px;
padding: 20px 0 0 115px;
}
#navcontainer ul{
list-style: none;
width: 90px;
padding: 0;
color: inherit;
border: 1px black solid;
}
#navlist li
{
width: 90px;
}
#navlist li a
{
display: block;
width: 100%;
padding: 2px 14px;
background-color: #E8E8E8;
border: 2px solid #E8E8E8;
background-image:url(siteimages/nav_arrow.gif);
background-position:left center;
background-repeat:no-repeat;
text-decoration: none;
}

#navlist li a:hover{
color: black;
background-color: #C0C0C0;
border-style: outset;
padding: 2px 14px;
background-image:url(siteimages/nav_arrow02.gif);
background-position:left center;
background-repeat:no-repeat;
}

html>body #navlist li a:active
{
border-style: inset;
}

Firefox Border Property

Similar Tutorials

View Content

Trying to use css to make a border around an element, and am using:

.navbar { border: 1px solid red; }

In IE, it puts a border around the navigational bar, but in FF, it only puts 1 line above it. Even if I try independently adding:
border-left
border-right
border-bottom

etc, it only shows above for border-top and border-bottom and nothing for left and right.

I can place the code if needed, but I really just have a few words typed to try and get this to work. It's of strict doctype if that matters.

Does FF have something special I need to add to get border to work?

Thanks.

Border-right: Issue On Firefox

Similar Tutorials

View Content

Hey all,

I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down.

Here's the site:
FizzPow.com/newsite

I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help!

Trying To Eliminate Image Link Border

Similar Tutorials

View Content

I have a test page for an image and it does not display a border. It only changes the cursor to a hand on hoover. Once clicked and subsequently returned to the page, the image does not have the dotted outline of its' border either. This is as it should be. Here is the code:

Code:

<html>
<head>
<style>		
img, fieldset	{
	border: 0;
}
</style>
		<a href="http://validator.w3.org/check?uri=referer" border="0"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</head>
</body>

Next, I have my development pages where I have multiple link styles on each page defined by an external style sheet, prime.css. here is the relavant portion of the code:

Code:

a:link	{
    color: #2F4F4F;
    text-decoration: underline;
}
a:visited	{
    color: #778899;
    text-decoration: underline;
}
a:active	{
    text-decoration: underline
}
a:hover	{
    text-decoration: underline;
	background-color: #2F4F4F; 
    color: #FFFFFF;
}
.intraLink:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.intraLink:visited	{
    color: #778899;
    text-decoration: none;
}

.intraLink:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}

.intraLink:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#D2691E;
}
.back:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.back:visited	{
    color: #778899;
    text-decoration: none;
}
.back:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.back:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#2E8B57;
}
.image:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.image:visited	{
    color: #778899;
    text-decoration: none;
}
.image:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.image:hover	{
    text-decoration: none;
	background-color: #FFFFFF; 
	color: none;
}
.pageStyle {
	background-color: none;
	font-family: "Helvetica Neue", Arial, helvetica, sans-serif;
	width: 800px;
	font-size: 62.5%;
	margin: 0 auto;
	padding-top: 50px;
	margin-bottom: 25px;
	line-height: 1.5;
}
#main {
	float: left;
	width: 590px;
	padding-bottom: 25px;
}

Explanation for the multiple styles: the default link style is to change the 'default' hyperlinks to match my color scheme. The .intraLink is for links within the current page. The .back style is for calling the previous page and finally the .image style is for all images with href references.

Even though this scheme works there is a slight problem. Once an image that is used as a link is clicked and user returns to the page then the image has a dotted line as a border! I'd like it to not have that border, i.e., I'd like it to work just as the test page works, nice and clean.

Also, I'm not sure about my linking styles. I'm new with CSS and it just seems like I've done more than I really need too; like it seems like it's a lot to do to simply not have the border appear when the test page is so lean! Is there a better way? Here's the offending page code and thanks for taking the time to read this, I know it's a trivial point but I'd like to understand why:

Code:

<html>
    <head>
		<title>index.html :: home page
		</title>
		<link rel="stylesheet" type="text/css" href="prime.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body class="pageStyle">
	    <b>:: Index.html ::</b><hr>
		<div id="main">
			<ul>
				<li>
				<a href="rs_cv.html">My CV</a>
				</li>
			</ul>
		</div>
		<a href="http://validator.w3.org/check?uri=referer" border="0" class="image"><img
		src="http://www.w3.org/Icons/valid-html401"
		alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
    </body>
</html>

Firefox Is One Pixel Off -- More Inside...

Similar Tutorials

View Content

I searched the forum before posting but didn't find anything. This is a fairly straight-forward problem, but it's one that I can't find a solution to.

The site I'm working on is centered in the window. The body has a 3600x1 pixel background image repeating vertically that is also centered in the window. The layout of the site depends on this background being in the right place.

In every browser I've tested so far, the site layout lines up perfectly with the background image, and all is good. But in Firefox 1.5 and Firefox 2.0 (both on Mac), the centered container div sits one pixel to the right of where it should be. Is this a known bug with Firefox?

I'm including the code for the body tag and the container div, even though a quick glance will show that it's pretty standard stuff:

Code:

body {
font: 12px/1.5 "Lucida Grande", Helvetica, Arial, sans-serif;
color: #363636;
background: url(body_bg.gif) top center repeat-y white;
text-align: center;
}

#container {
margin: 0 auto;
width: 720px;
text-align: left;
}

Any help at all would be terrific. Thanks.

Note: I changed the title of this post in the hopes someone will help me.