×

Discussion Board

Results 1 to 7 of 7
  1. #1
    Registered User
    Join Date
    Feb 2010
    Posts
    6

    Unhappy CSS border width bug in S60 5th phones?

    Hi there,

    I have a widget with three tabs, each of which are simple links to three different sections/pages in my widget. They're not separate pages, but each link loads a different content dynamically into a container DIV. I'm having trouble trying to make the container DIV have a border width of 1px.

    Just a simple DIV with the following CSS either randomly displays 2px borders or a 2px top border while the other borders stay 1px thin. Also other block elements and table cells behave this way.

    There's absolutely no place in my code where I've used anything that's 2px thick.

    Code:
    div.testContainer {
    border: 1px solid #fff;
    }
    I've also tried 'thin solid #fff' and thought for a while that it worked, but when I click a button in my widget the border transforms to 2px wide.

    Also, when starting the widget in the emulator everything seems OK, but after visiting other tabs and then coming back some of the elements have inherited a 2px border from somewhere. If I do it again, they might suddenly be 1px thin again.

    Sometimes removing the border from an element that's inside another element makes the outer element's borders 1px thin - except sometimes the top border stays 2px thick.

    All this fails to work at all in the actual phone, where almost every 1px border has transformed to 2px thick.

    NOTES:
    A lot of heights and widths are given in percentages in my style.css.
    Font sizes are given in 'em'.


    Other than that, that's it. I'm really confused. It's like all other border widths greater than 1px work. And it's not like my code is terribly complicated or anything, and I have a quite solid experience in web developement.

    Any of you experienced anything like this? What am I missing?

  2. #2
    Super Contributor
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

    Re: CSS border width bug in S60 5th phones?

    Hello,

    I have not heard about this kind of issue before so could you please attach a simple test widget, which could be used to reproduce the problem?

    And another question is that what is the model and firmware version of the phone on which this occurs?
    Enter *#0000# into dialer to see it.

    Br,
    Ilkka

  3. #3
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,405

    Re: CSS border width bug in S60 5th phones?

    Hi kvirtanen,

    are you using repeated background images in the DIV elements that show that 2px wide border? I've experienced a similar issue in past, and it was someway related to the background itself.

    Also, have you tried if re-setting the border via JavaScript, once the widget has loaded, can be a workaround for this?

    Pit

  4. #4
    Registered User
    Join Date
    Feb 2010
    Posts
    6

    Re: CSS border width bug in S60 5th phones?

    Hi guys, sorry for the late reply (busybusybusy...)

    I do actually use repeated background images, 1px-wide JPGs (gradient slices) and I use them quite lot (for buttons, tabs, list elements, a particluar histogram). I haven't tried this javaScript trick though. I've initially overcome this problem just by toning down the contrast between the container and its borders. The borders still change their width but it's not that visually distracting anymore.

    I'll try e.g. renaming the graphics folder to prevent the widget from loading the images. Did this help in your case? Or is it related to having the background-repeat declaration in the CSS style sheet?

  5. #5
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,405

    Re: CSS border width bug in S60 5th phones?

    I didn't try renaming the graphics folder, so cannot say. In my case, the workaround was to remove a repeated background image. Let me know if this works in your case.

    Pit

  6. #6
    Registered User
    Join Date
    Feb 2010
    Posts
    6

    Cool Re: CSS border width bug in S60 5th phones?

    I seem to have found a solution, kind of.

    I used rounded corners (-webkit-border-radius) in my design and the rendition in the Nokia browser was really bad. I could see the small circles that the browser was using to overlay on top of the sharp corners to achieve the rounded borders. Also the background image was pushing through the corners, making them not rounded at all.

    I then started to look for other solutions and removed the rounded corners. Since then all the other elements are behaving nicely, displaying 1px borders as they're supposed to.
    Note that using rounded corners affected also other non-rounded elements.

    I haven't tested rounding the corners of elements that only have a background color instead of an image and see if that works, but I really wonder why it is even supported when the result looks that bad. Maybe rounded corners work without a background image?

  7. #7
    Super Contributor
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

    Re: CSS border width bug in S60 5th phones?

    Hello,

    The -webkit-border-radius is a experimental feature, hence the bugs. We have observed the same issue with background image not clipping correctly.
    The border rendering bug is a new one. Thank you very much for taking the time to trace it back to source and sharing the solution with the community.

    Unfortunately it is not likely that these problems would be fixed in the current browser release.

    Best regards,
    Ilkka - Forum Nokia

Similar Threads

  1. nokia s60 5th flash extension bug (nokia 5800)
    By shpe11 in forum [Archived] Flash Lite on Nokia Devices
    Replies: 8
    Last Post: 2009-06-09, 12:24
  2. S60 5th ed. emulator installation
    By afsheen in forum Mobile Java Tools & SDKs
    Replies: 9
    Last Post: 2009-04-18, 08:33
  3. Can I Use S60 5th SDK develope apps for S60 3rd 2FP devices
    By gouyang in forum Symbian Tools & SDKs
    Replies: 2
    Last Post: 2009-04-03, 03:59
  4. S60 phones with macro lens
    By heuven in forum Symbian
    Replies: 0
    Last Post: 2009-01-07, 10:36

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •