CSS - Css Link Problem Ff Vs Ie

the website http://www.mostardesigns.com/4five1/ the top menu links work ok in firefox but in IE they wont display, here is my css code for the links:
Code:

	a.a_bannerLink:link, a.a_bannerLink:visited, a.a_bannerLink:active	{
		color:#FFFFFF;
		text-decoration:none;
		font-size:12px;
		font-weight:bold;
		padding:6px 15px 6px 15px;
		display:block;
		}
	a.a_bannerLink:hover	{
		color:#FFFFFF;
		text-decoration:none;
		font-size:12px;
		padding:6px 15px 6px 15px;
		background-image:url(../images/link_bg.jpg);
		background-repeat:repeat-x;
		display:block;
		}

any help is appreciated, thanks in advance.

I've set up two divs side by side using "float:left;".

In each of the Divs I have placed links, in the right hand div I can click the links but in the left hand div I can not. If I remove the "float:left;" I can then click the links in the left hand div but the divs are no longer aligned.

The problem only happens in FF not in IE.

I have copied the relative code below that is causing the problem.

Code:

#left{float:left;position:relative;width:49%;}
#right{position:relative;}
<div id="left"><a href="hh">hh</a></div>
<div id="right"><a href="hh">hh</a></div>

I don't want to have to change the layout just for FF so I'm hoping there is a fix for this problem.

Thanks

I'm working on a project for school, I'm nearly done, but for some reason, in Firefox the first link in my navigation menu doesn't fit the formatting of the rest. The link is 'About Us'.

Please see he http://lovemeforme.org/testing/

any ideas? I'm stumped!

Hi guys,

I recently created a website for my Union, and am having some problems getting around a possible CSS error. Unfortunately the majority of our user base only has access to MS Internet Explorer 5, and it is within this browser that the CSS glitch is apparent:



The 'Join the union' image link tends to push right to the left margin, and I'm unsure how to correct this without adversely affecting either Firefox or more recent versions of IE/Opera/Safari.

Any help would be appreciated!

Edit: would be easier if I gave you the link! http://www.algus.org.uk/


Sajid

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;} 

I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set;

Code:

a {
color: #005D93;
text-decoration: none;
}

a:hover {
color: #990000;
text-decoration: underline;
}

#thumb {
position: relative;    
float: left;
padding-left: 21px;
padding-bottom: 10px;
}

#thumb img {
width: 96px;
height: 145px;
}

#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}

#thumb img a:hover {
border-color: #990000;
}

An example image tag is as follow;

Code:

<div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div>

With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated.

Regards,
JT

Hi All,

I built a website for a friend which is essentially working ok (thanks in large part to help I found on the net). She wanted to add a blog and I decided that this may be a good time to rework the site to a 960px width, partly to make it easier to make everything uniform. (A lot of blog templates are based on the 960)

I have been working on a new homepage based on the old homepage but with things moved around slightly due to the new size.

I also had a very long and convoluted CSS page before as it covered more than one page layout, so I decided to create a new simpler one just for this page.

Basically I took all the elements from the old CSS page that applied to the original homepage and put them in the new one, changing positioning coordinates where appropriate.

I've clearly done something wrong.

While the text links are in the correct places, they're not supposed to be visible (they should be hidden behind the various icons. Those icons should in turn have a rollover effect - If you check the original homepage you can see what I mean.)

The problem is something to do with the #nav1 and #nav2 attributes, but, because I'm a total newb, the original CSS was predominantly created by a couple of helpful souls I found online, but this means that I still don't really understand parts of it (though I am learning)

Please help.


This is my CSS:

Code:

* {
    padding:0;
    margin:0;
    list-style-type:none;
 }
.link1 a:link,.link1 a:visited,.link1 a:active { 
    color:#000000;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
 }
.link1 a:hover { 
    background-color:#000000;
    text-decoration:none;
 }
.link2 a:link,.link2 a:visited,.link2 a:active { 
    color:#00def5;
    font-family:arial,helvetica,sans-serif;
    font-size:100%;
    font-weight:bold;
 }
.link2 a:hover { 
    color:#fff;
    background-color:#286d8c;
    text-decoration: none;
 }
body {
    background-color:#000;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:100%;
    text-align: center;
 }
h1 {
    font:italic 16px tahoma,helvetica,arial,sans-serif;
    color:#fff;
    text-shadow: 0 1px 1px #000;
    text-align: center;
 }
#container1 {
    width:960px;
    height:1186px;
    margin:auto;
    background-image:url(../images/Homepage-Image960.jpg);
 }
#content1 {
    width:430px;
    height:50px;
    padding-top:460px;
    padding-bottom:20px;
    padding-right:5px;
    padding-left:5px;
    border:3px solid transparent;
    margin-top:0px;
    margin-bottom:155px;
    margin-right:0px;
    margin-left:66px;
    text-align:center;
    font-style:italic;
    overflow:auto;
 }
#nav1 {
    margin-bottom:25px;
    overflow:hidden;
 }
#nav1 li {
    margin-bottom:29px;
 }
#li1 {margin-left:697px;}
#li2 {margin-left:631px;}
#li3 {margin-left:565px;}
#li4 {margin-left:499px;}
#li5 {margin-left:433px;}
#li6 {margin-left:367px;}
#li7 {margin-left:36px;}
#li8 {margin-left:93px;}
#li9 {margin-left:93px;}
#li10 {margin-left:98px;}
#li11 {margin-left:320px;}
 }
#nav1 a,#nav2 a { 
    position:relative; 
    display:block;
    height:24px;  
    background-image:url(../images/Homepage-Image960-Invert.jpg);
 } 
#nav1 span,#nav2 span { 
    position:absolute;
    top:0;
    left:0;
    height:24px; 
    z-index:1;
    background-image:url(../images/Homepage-Image960-Invert.jpg);
    cursor:pointer;
 }
#about,#about span {
    width:239px;
    background-position:-697px -691px;
 }
#appts,#appts span {
    width:305px;
    background-position:-631px -740px;
 }
#fees,#fees span {
    width:371px;
    background-position:-565px -789px;
 }
#faq,#faq span {
    width:437px;
    background-position:-499px -838px;
 }
#links,#links span {
    width:513px;
    background-position:-433px -887px;
 }
#blog,#blog span {
    width:579px;
    background-position:-367px -936px;
 }
#about:hover span {
    width:239px;
    background-position:-697px -691px;
 }
#appts:hover span {
    width:305px;
    background-position:-631px -740px;
 }
#fees:hover span {
    width:371px;
    background-position:-565px -789px;
 }
#faq:hover span {
    width:437px;
    background-position:-499px -838px;
 }
#links:hover span {
    width:513px;
    background-position:-433px -887px;
 }
#blog:hover span {
    width:579px;
    background-position:-367px -936px;
 }
#nav2 li {
    float:left;
    display:inline;
 }
#nav2 a {
    height:96px;
 }
#nav2 span { 
    height:96px; 
 }
#bps,#bps span {
    width:131px;
    background-position:-26px -972px;
 }
#hps,#hps span {
    width:131px;
    background-position:-178px -972px;
 }
#scp,#scp span {
    width:131px;
    background-position:-330px -972px;
 }
#pay,#pay span {
    width:131px;
    background-position:-482px -972px;
 }
#email,#email span {
    width:131px;
    background-position:-851px -972px;
 }
#bps:hover span {
    width:131px;
    background-position:-26px -972px;
 }
#hps:hover span {
    width:131px;
    background-position:-178px -972px;
 }
#scp:hover span {
    width:131px;
    background-position:-330px -972px;
 }
#pay:hover span {
    width:131px;
    background-position:-482px -972px;
 }
#email:hover span {
    width:131px;
    background-position:-851px -972px;
 }

And this is the HTML it applies to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Helen Stow - Counselling Psychologist, Therapist, Life Coach.</title>
<meta name="google-site-verification" content="3hCMQLpWU3lVVahmEEWDtI_wRso4VELEwEnMbYvlTBk" >
<meta name="keywords" content="Lincoln, Psychologist, Counselling, Therapy, Therapist, Life Coach, Coaching, Paypal" >
<meta name="description" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." >
<meta name="abstract" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." >
<meta name="author" content="Helen Stow" >
<meta name="copyright" content="April 2011" >
<meta name="contact" content="helenstowcpsychol@btinternet.com" >
<meta name="googlebot" content="all, index, follow, none, noindex, nofollow, noarchive, nosnippet" >
<meta name="revisit" content="2 days" >
<meta name="subject" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." >
<meta name="title" content="<title>Homepage for Counselling Psychologist, Therapist and Life Coach Helen Stow</title>" >
<meta name="seoconsultantsdirectory" content="5" >

<link rel="stylesheet" type="text/css" href="style_homepage.css">

</head>
<body>

<div id="container1">
<div id="content1">
<p><h1>Helen Stow is a Lincoln
  based, Counselling Psychologist, Therapist and Life Coach.</h1></p>
</div>
<div class="link1">
<ul id="nav1">
 <li id="li1"><a id="about" href="http://helenstow-cpsychol.co.uk/about_helen.html" title="About">ABOUT<span></span></a></li>
 <li id="li2"><a id="appts" href="http://helenstow-cpsychol.co.uk/appts_fees.html" title="Appointments" >APPTS<span></span></a></li>
 <li id="li3"><a id="fees" href="http://helenstow-cpsychol.co.uk/fees.html" title="Fees">FEES<span></span></a></li>
 <li id="li4"><a id="faq" href="http://helenstow-cpsychol.co.uk/faqs.html" title="FAQs">FAQs<span></span></a></li>
 <li id="li5"><a id="links" href="http://helenstow-cpsychol.co.uk/links.html" title="Links">LINKS<span></span></a></li>
 <li id="li6"><a id="blog" href="http://helenstow-cpsychol.co.uk/blog/" title="Blog">BLOG<span></span></a></li>
</ul></div>

<div class="link1">
<ul id="nav2">
 <li id="li7"><a id="bps" href="http://www.bps.org.uk/" title="http://www.bps.org.uk/">BPS UK<span></span></a></li>
 <li id="li8"><a id="hps" href="http://www.hpc-uk.org/" title="http://www.hpc-uk.org/">HPC UK<span></span></a></li>
 <li id="li9"><a id="scp" href="http://www.societyforcoachingpsychology.net/" title="http://www.societyforcoachingpsychology.net/">SCP UK<span></span></a></li>
 <li id="li10"><a id="pay" href="http://helenstow-cpsychol.co.uk/paypal_payment.html" title="Paypal Payments">PAY<span></span></a></li>
 <li id="li11"><a id="email" href="mailto:helenstowcpsychol@btinternet.com" title="Email Me">EMAIL ME<span></span></a></li>
</ul></div>

</div><!-- end #container -->

</body>
</html>

I really would be incredibly grateful for all and any help.

My very best wishes,

Tom

ok, so after i click a link it goes to the css visited link.

.menu_1a a:link {color:#666666; text-decoration: none;}
.menu_1a a:hover {Background: #666666; color:white;}
.menu_1a a:visited {color:#666666; text-decoratoin: none;}

is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link

any ideas?
-kevin

redmeetsblue.com.au/forum-test/

I'm having a problem with our 3rd level sub-menu links in our top menu.

we need to specify a height:auto on the .moduletable_topmenu li a because I need each list item to have an easy changable name. this may mean it has 2 lines for 1 name such as the 3rd item under "Test".

Though when we have 2 or more 3rd level items the 2nd level moves with the 3rd level. Such as the 2nd item under "Test"

Can anyone think of a way to make this 2nd level list not move with the 3rd level items?

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;
}

Hi...
I have a slightly confusing problem. I have an external sheet which all works fine except the colour of links before they are visited, active, etc. (It worked fine but one day stopped without any intervention on my part that I know about!)

The active link, visited link and hover link colours work as required and as specified in the external sheet, but it is the original link that does not, defaulting to the, erm, default colour.

My external sheet is as follows:

body {background-image: url("images/logo.jpg")}

type="text/css";

a:link {color: #c0c0c0;}
a:visited {color: #FF80FF;}
a:hover {color: #FF00FF;}
a:active {color: #FF80C0;}

h1.c1
{
text-align: center;
font-size: 46pt;
color: #bb8ec8
}

h1.c2
{
margin-left:130px;
font-size: 26pt;
color: #bb8ec8
}

h4
{
text-align: center;
color: #b15fb8
}

Any idea why is isn't working?

Cheers

I have my "global" a:link color set to WHITE, but the WEATHER.COM module's background color that I want to use is also white, so the links are not visible.

How do I change the color of JUST the WEATHER.COM module, given the code that I'm using below?

Any help is HUGELY appreciated!



/*-- global settings --*/

a {
color: #FFFFFF;
text-decoration: none;}

a:hover {
text-decoration: none;
color: #FF5134;

/*-- module settings --*/

#ads {
float: right;
width: 160px;
padding: 0 0 0 20px;
.ads a {color: #1200FF;}
.ads a:hover {color: #1200FF;}
}

/*-- Weather --*/

#weather {
.weather a:link {color: #1200FF;}
.weather a:hover {color: #1200FF;}
}

this is what i got: a menuBox


Code:

<tr align="center" valign="top" height="120">
  <td height="120">
    <div class="menuBox">
      <div class="menuBoxHeader">Menu</div>
      <p><a href="blah-blah4">4.</a></p>
      <p><a href="blah-blah5">5.</a></p>
      <br>
      <p>some text>
    </div>
   </td>
</tr>

I use for the links

Code:

a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}

for the menuBox

Code:

.menuBox     { color: #c36;
 font-style: normal;
 font-weight: bold;
 font-size: 9px;
 line-height: 2px; font-family: Verdana;
 background-color: #fef;
 border: solid 1px #c36 }

and for the menuBoxHeader

Code:

.menuBoxHeader    {
	color: #efe;
	font-style: normal;
	font-weight: bold;
	font-size: 9px;
	line-height: 13px;
	font-family: Verdana, Arial, Helvetica;
	background: #c36 0px 0px;
	margin: 1px 0px 0px;
	position: relative;
	top: 0px;
	left: 0px;
	width: 130px;
	height: 16px }

So now my two questions.

1.
What do I have to do to let it look in all the browsers the same?
In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ).

2.
The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right?

I hope that someone can help me?