My issue arises when trying to implement this design in JQuery Mobile:
The problem I'm facing is that initially the page appears as desired, but then JQuery Mobile changes it all to gray.
I am wondering how I can make JQuery Mobile not affect certain parts of the page?
I have searched extensively on this topic and came across suggestions for using Themeroller, however, I cannot figure out how to apply those styles in this case.
I also attempted using data-role="none," but it seems to only work on form elements.
EDIT:
Below is the code snippet:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6..min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://www.rwe-uk.com/static/ichat_with_css3/style_5.css" />
</head>
<body>
<div data-role="page">
<div class="commentArea">
<div class="bubbledLeft">
Hi
</div>
<div class="bubbledRight">
Hi there yourself
</div>
</div>
</div>
</body>
</html>
Removing the jQuery Mobile script line allows the design to display correctly.