not showing up in firefox on a MAC - or is it?

[bfsog]

Hello.

Following on from this thread I now have a new problem.

The client viewed the website (which is ongoing) in Firefox on a MAC (not sure what version of either, but should not matter?) and the <hr> did not display at all. They also viewed the website in Safari on a MAC and the <hr> displayed but the text below was overlapping a bit - but I am sure I can fix that.

I do not own a MAC but I got a friend to check it out who is on a MAC, and in Firefox the <hr> did display so I am a bit perplexed.

The website: http://www.andrewbuchan.co.uk/templatetest/demo and then click any of the links at the bottom.

I have attached what the client sees in FF/MAC and what I see in FF/XP.

Thanks for any advice.

[mlseim]

Andrew ...

I'll searched the HTML source ... I can't find any <hr> tags.

BTW ... is this one of Sarah's sites?
If so, glad she was able to connect with you.
Let me know how it's going (she is very good to work with).

[ravensjeff]

I'm not 100% sure but I would venture a guess that the problem is in relation to the combination of the <hr /> tag being positioned absolutely and having a z-index set to -1.

[bfsog]

@mlseim - look at http://www.andrewbuchan.co.uk/templa...mo/collection/ or http://www.andrewbuchan.co.uk/templatetest/demo/about the tag is a <hr /> in the source, see below snippet

<hr />
<img src="images/Collect1.jpg" width="362" height="513" id="collectionImage" />
<div id="collectionDescription">
	<h2>Take it to another level</h2>
</div>

It is one of Sarah sites, she is great to work with, so hopefully I will not let her down!

@ravensjeff - I use z-index so the image overlaps the <hr />, are you suggesting that relative will work?

[ravensjeff]

@ravensjeff - I use z-index so the image overlaps the <hr />, are you suggesting that relative will work?

Well my theory is this:

Absolute positioning takes the element out of the normal document flow. By setting the z-index to negative, it is possible that the mac/safari combo is placing it behind your background.

This is all purely a guess, and since I don't have a mac either, I can't test it.

But try changing your z-index to 0 for the hr element and the to a greater value for your picture so as to avoid using the negative value altogether.

[bfsog]

I tried that ravensjeff, after setting the hr to z-index: 1; and the hr's parent (a div) to z-index: 2 the hr appears over the image.

I cannot give the image a z-index because it is not positioned relative/absolute, well I can but there will be no effect.

Maybe I have to set the image to be positioned relative as well, something which I am not too keen on but will sacrifice if I have to.

[ravensjeff]

This is hard to troubleshoot without having a mac. Maybe someone with a mac will jump in to help. Every thing looks fine in Safari on my windows machine.

[bfsog]

Me too, it is a pain not having a <insert_missing_machine_name_here> because it hinders development.

However, I took your advice, my advice, threw them in a bowl together and out popped the image with a relative position (no top and left set though) and a z-index of 2 and the <hr /> has now got a z-index of 1.

All looks exactly the same on my Windows FF/IE/Safari so I will have to wait til I get hold of a MAC user.

Cheers

[mlseim]

How about not using an <hr> ...
Instead, make is a sliver of a .gif and repeat it across the <div>.
I would think that would be more browser compatible than <hr>.

[bfsog]

I could do that mlseim, I guess that would take away the browser issue.