Link to home
Start Free TrialLog in
Avatar of ikeir
ikeir

asked on

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
Avatar of dij8
dij8
Flag of New Zealand image

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.
Avatar of ikeir
ikeir

ASKER

With float:left; removed, there is still no difference in Opera.
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.
Avatar of ikeir

ASKER

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?
ASKER CERTIFIED SOLUTION
Avatar of dij8
dij8
Flag of New Zealand image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ikeir

ASKER

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.
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.
Avatar of ikeir

ASKER

Thanks again very much for your help.

Keir