CSS related bug

Hi,
I am currently coding my employers website and I’ve came across a problem with the top links at http://tmlc.co.uk/dev/portfolio.html.

For some reason in Firefox but not Chrome, the ‘accessibility etc.’ menu at the top is going down instead of across like in http://tmlc.co.uk/dev/about.html and the problem is stressing me out.

I know it’s a CSS related problem and I’ve picked and picked at for so long now.

Any ideas?

Ps: Regarding the Home > portfolio text before the banner below it, for some reason because the ‘Home’ is a link it’s starting a new line when it’s not supposed to. (In Firefox)

Thank you for your help.

This website wasn’t made by me, I’m just updating it with things the designer wants me to put into the pages :slight_smile:

Hey guys, sorry to bug you again, pardon the pun, but I am trying to make the text in portfolio.html header ‘Think, design, build’ and the text underneath to only go with the one image and when the 2,3,4,5 buttons on the right are clicked, it will them move to a new image background and the text mentioned above has changed to a different text. It’s difficult to do this from my end with this fading script.

Any helpers on this one please?

In Firefox and Google Chrome…
http://www.freeimagehosting.net/uploads/78d696c817.png

There’s nothing I can do for the moment, my web developing assistant will write the JS needed for this to work, thank you.

Heh, this is a fun one.

Go ahead and click on one of your links (in the top nav) on that portfolio page.

Problem solved? (stop reading right here and go click that link!)

It’s because of a common error:


#filter1 li a, [b]a:link[/b]{
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight:bold;
	color: #FFF;
	display:block;
}

a:link means ALL unvisited links throughout the whole site (well, for all pages calling portfolio.css anyway).

The common mistake is that you (or whoever) meant to do this:
#filter1 li a, #filter1 li a:link{

However, after declaring for “a”, there’s zero point to stating a:link afterwards anyway. So I’d remove it entirely.

BTW, why do you have a p holding a list of links?

<ul id=“top-nav”>
<li><a href=“SOMETHING”>Accessibility</a> |</li>
<li><a href=“SOMETHING”>Privacy policy</a> |</li>
<li><a href=“SOMETHING”>Site map</a> |</li>
<li><a href=“SOMETHING”>Help</a> |</li>
<li><a href=“SOMETHING”>Contact us</a></li>
</ul>

re the title attributes:
Nobody wants to listen through that list in their screen reader and hear
“link AccessibilityAccessiblity”
“link Privacy policyPrivacy policy”
“link Site mapSite map”
“link HelpHelp”
“link Contact usContact us”

…and, the tooltips that appear in the graphical browsers w/mice get in the way, without adding any benefit to any users. Your anchor text is good, and doesn’t need any “assistance” : )

http://stommepoes.nl/tml2.jpg ??

Still, there are a few ways you could have the “headers” change: separate pages would be the most accessible.

Otherwise, it could be done with HTML/CSS where all the different “headers” are on the page, and each button goes to a different url fragment (portfolio.html#design2 where the div holding the second image is id=“design2”).

Or it could be done with Javascript, which I won’t encourage further because I’m a scriptless surfer.

The ones marked 1 to 5 in the top right hand corner of the banner. Refresh the page first because the CSS and page have been updated since you last visited it.

#top_nav > a {
&
#top_nav > a:hover {

what is with the “>”?

Personally as opposed to setting p id i would have put them in a list then used display block.

What buttons?
http://stommepoes.nl/tml.jpg

Lawlz, in IE you hadn’t clicked on the links, meaning IE still saw those as 'unvisited links" (a:link)

Thanks! It only worked on both Firefox and chrome but not IE, thanks for the tip!

That’s what I was thinking when I wrote this:

The common mistake is that you (or whoever) meant to do this:

I get +1 for my butt-saving! : )

Glad it helped (it did, right? You deleted that and everything’s cool now?)

I just need a solution for the portfolio page, it’s something to do with portfolio.css because I’ve tried all the other pages and the top links work fine.

Hm, still looks bad on my side.

Remember once you’ve clicked on a link, it’s no longer a:link (now it’s a:visited) so once I cleared my browser cache I took a look and it’s back to stacking vertically.

Lemme look again.

*edit I’m still seeing that link code.


#filter1 li.active a span,#filter1 li a:hover span{
	background:#FFF;
}
#filter2{
	background:url(../images/filterbg2.png) no-repeat;
	width: 230px;
	height: 190px;
	padding: 20px;
}
#filter2 li {
	list-style: none;
	margin: 5px;
	line-height: 17px;
}
#filter2 li a, [b]a:link[/b]{
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	font-weight:bold;
	color: #FFF;
	display:block;
}
#filter2 li a span{
	float: left;
	margin-right: 10px;
	display: block;
	width: 10px;
	height: 10px;
	background: #333;

}
#filter2 li.active a span,#filter2 li a:hover span{
	background:#FFF;
}

Do a ctrl+f for “a:link”

I have done a hard refresh in IE8 and it is still showing downwards as opposed to across like you wanted.

Yes it works fine, thanks: portfolio.html