A little CSS help / explanation please

AARRRGH

Hello

I hope someone can explain this one to me...

On this page - http://www.jobseeker.ie/jobs.php?all=taxi&exact=&some=&none=&title=&location= - there should be a link "Advanced Search" under the Search button.

It's only sometimes there...

When you move the mouse over the link, the links background should turn green.

It only sometimes turns green...

The HTML and CSS are fairly straight forward -

[PHP]
<td class="green">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="label lt">Search for</td>
<td class="field"><input maxlength="512" size="30" name="k"></td>
<td class="label">in</td>
<td class="field"><input maxlength="64" size="30" name="l"></td>
<td><button class="search grey" type="submit" tabindex="3">Search</button></td>
<td> </td>
</tr>
<tr>
<td class="lb"></td>
<td class="eg">Skills, job details, or company name</td>
<td></td>
<td class="eg">City, town or business park</td>
<td class="eg2"><a href="http://www.jobseeker.ie/advanced.php">Advanced Search</a></td>
<td class="rb"></td>
</tr>
</table>
</td>
[/PHP]

And the CSS -

[PHP]
td.green {
color: #fff;
background: #1fbe2a url("green.gif") repeat-x 50% top;
width: auto;
height: 60px;
vertical-align: top
}

td.green td.eg2 {
font-size: 10px;
vertical-align: top;
font-family:verdana, tahoma, arial;
color: #ffffff;
padding: 3px 0 8px 2px;
}

td.green td.eg2 a {
color: #ffffff;
text-decoration: none;
}

td.green td.eg2 a:hover {
color: #ffffff;
background:#99CC33;
text-decoration: none;
}
[/PHP]

Any ideas?

Thank you

Goodshape

It works fine for me. FF2/WinXP.

When is it not there?

AARRRGH

Yeah it seems to be OK in Firefox! Damnit. So it's IE specific.

Thanks for checking.

Malice

I had a quick look as well and it's displaying the same across 3 browsers for me. I'm not sure what it is that you're not seeing. For the record, I tested Opera 9.21, IE 6.0 and Firefox 2.0.0.6. This was on Win XP SP2.

Sorry I couldn't be of more help. One small tip I would offer though is to define a consistent folder structure for the website. Instead of plonking everything in one folder, create one for HTML/scripts, one for style sheets and one for images. It will keep things from getting cluttered!

Gordon

I have IE 6.0 XP SP2 and it has this problem. The exact problem is that when you rollover - the text color seems to change but not the background. And then the text color doesn't change back on unrollover.

The exact snippet that you posted (when inserted into a blank page) does not give the same problem. It creates a link that changes BG-color on rollover and the text color stays the same white colour. Therefore, there is some style info clashing with this on the rest of your page/stylesheets.

I've whittled down the code to the offending css and it seems to be (I think) this bit of code that arses it up:

form,
form dl,
fieldset {
width:100%;
}

As I have trimmed the css to a minimum of this below and it gives the same error:

td.green td.eg2 a {
        color: #ffffff;
        text-decoration: none;
}

td.green td.eg2 a:hover {
        color: #ffffff;
        background:#99CC33;
        text-decoration: none;
}


form,
form dl,
fieldset {
width:100%;
}


/*-------------------------------------------------
Search Box
-------------------------------------------------*/
td.green    {
color: #fff;
background: #1fbe2a url("green.gif") repeat-x 50% top;
width: auto;
height: 60px;
vertical-align: top
}

Only these 4 bits of code actually control the error - probably just three as one part controls the background colour which is similar to the text colour.

matt-dublin

i would suggest completly re-doing your css,

it doesn't render at all in IE 7

also use this tool to ensure your css is valid.
http://jigsaw.w3.org/css-validator/

you also shouldn't be using tables, its not tabular data and tables don't always render CSS... you need to use divs here

Malice

Where Gordon posted

[PHP]td.green td.eg2 a {
color: #ffffff;
text-decoration: none;
}[/PHP]
I would add a:visited like so:
[PHP]td.green td.eg2 a, a:visited{
color: #ffffff;
text-decoration: none;
}[/PHP]
as if you don't specify what colour visited links should have, you might get an unexpected colour clash. Plus it's a style thing that I prefer to have links the same colour regardless of whether I have clicked the link before
I would also echo matt-dublin's comment about throwing out the tables.

matt-dublin

malice_ wrote:

I would also echo matt-dublin's comment about throwing out the tables.

DIVs RULE!!!!!! :D

AARRRGH

Thanks everyone for the replies. I will look into this tomorrow.

matt-dublin: it works fine for me (as in, it renders fine) in IE7. Very weird.

Gordon

dublindude wrote:

Thanks everyone for the replies. I will look into this tomorrow.

matt-dublin: it works fine for me (as in, it renders fine) in IE7. Very weird.

I did a bit more checking and it's definitely the

form,
form dl,
fieldset {
width:100%;
}

that is the problem.

If you remove the "form" element and leave the "form dl" and "fieldset" it's fine. It seems to be with the width (in percent and pixels) and height that cause this, not background colours or anything else.

AARRRGH

Thanks everyone. I think I've fixed it now.

Just one more question then I'll leave you alone!

On this page -

http://www.jobseeker.ie/advanced.php

- the table (with the form) is not being aligned correctly under the text and logo higher up on the page.

Any ideas??

I can't figure this one out at all...

Thanks again

Gordon

Looks fine to me.

AARRRGH

Hmmmm OK. I'm using a mac here and it looks wrong in both Firefox and Safari.

Are you using IE?

Gordon

Aye, the same IE as I mentioned earlier.

AARRRGH

OK, cool.

Any Firefox users have any ideas?

Thanks

duffman85

Firefox doesn't seem to support "expression(...)" in your CSS. I looked at the Error Console in Firefox and it jumped to the line in bold below saying it couldn't parse it.

.branding  {
	width: 95%;
	[B]width: expression(document.body.clientWidth < 912 ? "765px" : "95%" );[/B]
	max-width: 1000px;
	min-width: 765px;
	margin: 0 auto;
	}		

You could try setting the the width of the <div> tag using javascript.

This seems to say that document.body.clientWidth is an IE only feature.

Try using JavaScript to detect the browser the page is being viewed with and set the width using the method for Firefox mentioned in the link above.

I find these are useful references:

HTML Document Object Model Reference
CSS Reference
Javascript Reference

BTW it looks ok in IE7 but the jobseeker image is aligned to the left with the text/table below it and not centred on the page.Viewed it at a resolution of 1280x960.

Hope this helps