[daver]

hi

i would like to display a picture and once clicked i would like it to open in a new window. This works fine for IE, however firefox seems to jiggle the code around. i say this as when i look at it with firebug it moves the target="" to before my href="". il show the sample code below:

<li>
<a href="http://www.sforsugar.com" target="_blank">
<img src="images/sforsugarthumb.jpg" alt="SforSugar.com" />
</a>

firefox displays as:

<a target="_blank" href="http://www.sforsugar.com"><img alt="SforSugar.com" src="images/sforsugarthumb.jpg"></a>

is this a known behavioural difference for firefox and would i have to enter another line of code specifically for firefox, or am i doing it incorrectly and cannot see it?

many thanks

dave

This post has been edited by Renaissance-Design: 08 February 2012 - 01:15 PM
Reason for edit: Please use the code button or tags to format your code.

[MikeChipshop]

Not seen this myself but it really shouldn't make any difference to the actual page.

[notbanksy]

I think you'll find this is firebug's work, not firefox. If you view source in firefox you should find it's exactly as written in your html file. I've noticed firebug occasionally re-orders elements. It's just firebug trying to be helpful, and it definitely makes no difference to the way your page works.

[daver]

ok thanks. il look into it more why firefox wont accept it then

[notbanksy]

Can you explain your problem in more detail? What do you mean firefox won't accept it?

[daver]

ie works properly. when u hover over the image you can click and the link will open in the new window as planned.

in firefox when i hover over the image nothing happens.

[notbanksy]

Can you post a link to your page, or the whole html document? Sounds like you may have an unclosed tag or something. Running your page through the W3C validator would show this up.

[daver]

yeah sure. ive had a look in notepad++ and maybe ive been looking too long cos i cant see it.

page is: http://www.swaleitse...o.uk/index.html
thanks

[notbanksy]

The reason it's not working is because the <img> is floated inside the <a> causing it to collapse. Just add overflow:auto to the <a> in your stylesheet and it should fix this.

[daver]

ok ive added this to my style sheet as you advised:

a { color:#cc7108; outline:none; overflow:auto;}
a:hover{text-decoration:none; }

still no luck....

This post has been edited by Renaissance-Design: 08 February 2012 - 01:15 PM
Reason for edit: Please use the code button or tags to format your code.

[notbanksy]

Ahhh, you're right. Wasn't expecting that, but having looked more closely I now see what's the problem (even if I can't figure out how it occurred. Here's how to fix it: float the <h4> and <p> in your <li> like so

.list1 li p, .list1 li h4 {
float:left;
width:165px;
}

Without being floated, they're sitting in front of the <a> tag. I suppose you might be able to fix this using zindex, but to my mind, this way is better.

[daver]

fantastic thanks alot.

so it was the relative positioning that was throwing everything out ?

its strange that it would do that for one browser and not another though isnt it ?

thanks again

dave