CSS browser problem

Opera is rendering my page incorrectly - http://physicaljerks.co.uk/test/crew.php

The links are meant to sit side by side using the following code:

Style:

div.navbar {float: left;}
span.link {float: left;}

Html:

<div class="navbar">
<span class="link"><img ...></span>
<span class="link"><img ...></span>
<span class="link"><img ...></span>
<span class="link"><img ...></span>
<span class="link"><img ...></span>
</div>

This works fine in IE, Mozilla, Firefox, Netscape...but in Opera it stacks them up on top of each other and you cannot click on any of the links.

Correct render Screenshot in IE: http://www.keirmoffatt.com/ie.jpg
Incorrect render Screenshot in Opera: http://www.keirmoffatt.com/opera.jpg

Could anyone advise?

Keir
ikeirAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dij8Commented:
If you are just lining the links up one next to the other, why do you need the float left on the link spans?  Because they are inline elements they will do that automatically anyway.
0
ikeirAuthor Commented:
With float:left; removed, there is still no difference in Opera.
0
dij8Commented:
Do you have any other CSS in your link class?

It may also be that you are naming the class link this is a reserved word in styles.  Trying using a different name.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

ikeirAuthor Commented:
Ah ha, changed the classname to 'linky' and already looking better in Opera:
http://physicaljerks.co.uk/test/crew.php

But the final link does not fit on the end, and so leaps down to the next line. I thought this would be a padding/margin problem but after setting all to zero, still no luck. Any more ideas?
0
dij8Commented:
Try losing the line breaks in your code.
<div class="navbar"><span class="link"><img ...></span><span class="link"><img ...></span><span class="link"><img ...></span><span class="link"><img ...></span><span class="link"><img ...></span></div>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ikeirAuthor Commented:
Thank you, that has fixed the problem...but I think that's utterly stupid - now to administrate the page I have to look at one huge line of code instead of well-layed out nested code - why is Opera doing this? Thank you for helping me fix it, but I am aggrevated by the solution I have had to use.
0
dij8Commented:
The reason for it is because the line break in your code is considered a space of text.  If you look closely you will see a gap between each image when you do it the previous way.

I agree it is painful.  One would hope a line break could be considered no spacing as long as there isn't a space in the actual text itself but sadly this is not the case.  I thought the white-space setting in styles might help but looking at http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm seems to suggest it wouldn't, you will still get that one space.
0
ikeirAuthor Commented:
Thanks again very much for your help.

Keir
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.