Solved

CSS browser problem

Posted on 2004-10-26
217 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
Question by:ikeir
    8 Comments
     
    LVL 10

    Expert Comment

    by:dij8
    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
    With float:left; removed, there is still no difference in Opera.
    0
     
    LVL 10

    Expert Comment

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

    Author Comment

    by:ikeir
    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:
    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
    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
    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
    Thanks again very much for your help.

    Keir
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    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 will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    934 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now