Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Member
Posts: 1
Registered: ‎05-06-2011
My Device: Curve 8520
My Carrier: Orange

Curve 8520 CSS issue

Hi,

 

We're developing  some mobile pages and I'm seeing a problem with our CSS which only seems to appear on Blackberry. the page has a footer section which has the following sort of structure:

 

 

<div id="box">
    <div id="lefty">some content</div>
    <div id="righty">some content</div>
    <div id="lower">some content</div>
</div>

 

 

 

This has the following styling:

 

 

 

div#box{
    width:100%
}

div#lefty{
    float:left;
    width:50%;
}

div#righty{
    float:left;
    width:50%;
}

div#lower{
    width:100%
}

 

 

What is meant to happen is that the two divs lefty and righty appear side by side each taking half the width of the page. The div lower beneath these takes 100% of the width. 

 

This works fine on everything except this Blackberry. What the Blackberry does instead is puts righty below lefty both on the left hand side.

 

If I lower the width if these divs to 49% then the problem does not occur, but this isn't an option. 

 

 

The model we have for testing (Curve 8520) was specifically bought because it's the model from before the Webkit browser. 

 

Can anyone point me in the right direction please?

 

Thanks,

 

Chris

Developer
Posts: 47
Registered: ‎04-26-2011
My Device: Curve 2 8530 and PlayBook (soon)
My Carrier: Verizon

Re: Curve 8520 CSS issue

@Chris:  Try something like the example below and see if that works for you.

 

Styles:

 

div#box{text-align:left} 
div#box{width:99.5%;margin:0 auto} 
div#righty{float:right;width:50%} 
div#lefty{float:left;width:50%} 
div#lower{clear:both;width:100%}


 

 

Markup:

 

<div id="box">
    <div id="wrapper">
        <div id="lefty">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nul</div>
    </div>
    <div id="righty">Sed sollicitudin convallis viverra. Morbi eget eros nulla, sit </div>
    <div id="lower">Vestibulum interdum ligula id velit aliquet vitae eleifend est auctor. </div>
</div>

 



My Blog: DevGuy.org
My Apps: Dive Planner
1. Please give Kudos by clicking the Kudos star kudos star below the post that helped you..
2. Please resolve your thread by marking the post "Solution?" that solved your issue.