Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS browser problem

Posted on 2004-10-26
8
Medium Priority
?
218 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:ikeir
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 10

Expert Comment

by:dij8
ID: 12410558
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
 

Author Comment

by:ikeir
ID: 12410640
With float:left; removed, there is still no difference in Opera.
0
 
LVL 10

Expert Comment

by:dij8
ID: 12410676
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:ikeir
ID: 12410721
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
 
LVL 10

Accepted Solution

by:
dij8 earned 500 total points
ID: 12410807
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
 

Author Comment

by:ikeir
ID: 12410912
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
 
LVL 10

Expert Comment

by:dij8
ID: 12411015
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
 

Author Comment

by:ikeir
ID: 12411039
Thanks again very much for your help.

Keir
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to count occurrences of each item in an array.

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question