Please HELP! Broke my site... (BLACKBERRY ONLY)

Mobile
1

Hi Everyone!

Firstly i would like to thank you for your reply (assuming anyone does).

I am having a problem when i view my website on my Blackberry.

To cut the long story short, I have been cleaning up my css and template design, along with adding a PHP polling system. During this process i have somehow caused the layout to display strangely when viewed on a blackberry. Here are some before and after screenshots from the Blackberry, of the testing page that i set up:

BEFORE:

AFTER:

As you can see, I did something that really sent things haywire. Now i am stuck with the problem of trying to figure out what that was exactly.

If anyone could help me with this, i would really appreaciate it because its been like 5 hours of head scratching and i have nothing.

Here is the link to my testing page:

MY TESTING PAGE

Here is my core CSS:

@charset "utf-8";

/* 		++LAYOUT++ 
---------------------------------------- */

body {
	font: 115%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: black url(/images/bg.jpg) repeat;
	margin: 0;
	padding: 0;
	color: #000;
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}

a:link {
	color: #414958;
	text-decoration: underline; 
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none; 
}

.container {
	width: 86%;
	max-width: 1260px;
	min-width: 780px;
	background: #F4F4F4;
	margin: 0 auto;
	text-align: center;
	border: 1px solid #666;
}


.header {
	background: #F4F4F4;
	border-bottom: 1px solid #666;
}

.sidebar1 {
	float: left;
	width: 20%;
	background: #F4F4F4;
	padding-bottom: 10px;
}

.content {
	background: #F4F4F4;
	padding: 0.3em 0.5em;
	width: 58.5%;
	float: left;
}

.sidebar2 {
	float: left;
	width: 19%;
	background: #F4F4F4;
	padding-bottom: 10px;
}
.content h1 {
	font-size: 125%;
	border-bottom: black ridge 2px;
	font-family: Calibri, "Arial Black", Arial, Gadget, sans-serif;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

.content li {
	list-style-type: none;
	padding-bottom: 15px;
}

.footer {
	padding: 10px 0;
	background: #999;
	position: relative;
	clear: both;
}


.fltrt {  
	float: right;
	margin-left: 8px;
}

.fltlft { 
	float: left;
	margin-right: 8px;
}

.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* 		++END LAYOUT++ ---------- */

/* 		++PAGES++
---------------------------------------- */

/* NAV MENU
------------------------------ */

.nav {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

ul.nav li {
	border-right: 1px solid #666;
}

.menu-sub {
	font-size: 75%;
}

ul.nav {
	list-style: none; 
	border-top: 1px solid #666;
	overflow: hidden;
}

ul.nav li {
	background-color: #666;
	border-bottom: 1px solid #666; 
}

ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 15px;
	display: block; 
	text-decoration: none;
	background: #999;
	color: #0066cc;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	position: relative;
	right: 10px;
	background: none repeat scroll 0 0 #666;
	color: #00cc00;
	text-shadow: 0 0 0.2em #0033ff,
				 0 0 0.2em #0033ff,
				 0 0 0.2em #0033ff;
}

/* END NAV MENU
------------------------------ */

/* ERROR PAGES
------------------------------ */

h1.ep {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

/* END ERROR PAGES
------------------------------ */

/* MAIN PAGE
------------------------------ */

.coming-soon {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 75%;
	list-style-type: circle;
	text-align: left;
	padding-left: 20px;
}

#cs-done li {
	text-decoration: line-through;
}

#news-feed {
	padding-left: 15px;
	padding-right: 15px;
}

/* END MAIN PAGE
------------------------------ */

/* LINK SECTION
------------------------------ */

ul.bymodel-dllinks {
	text-align: left;
	font: 90%/1.4 "Comic Sans MS", cursive, sans-serif;
}

ul.bymodel-dllinks li {
	list-style-type: disc;
}

.bymodel-nxtpg {
	text-align: right;
}

/* END LINK SECTION
------------------------------ */

/* HOW TO PAGES
------------------------------ */

.bb-sct img {
	margin: 0 7px;
	border: 1px solid #666;
	width: 265px;
	height: 199px;
}

.bb-sct li {
	padding-bottom: 10px;
}

.text-area-half {
	margin: 0 150px;
}

/* END HOW TO PAGES
------------------------------ */

/* TOP 5 PAGES
------------------------------ */

#top_  li {
	padding-bottom: 20px;
	text-align: left;
	list-style-type: disc;
}

#list-pg {
	list-style-type: none !important;
}

/* END TOP 5 PAGES
------------------------------ */

/* ABOUT ME 
------------------------------ */

.about-me {
	text-align: center;
	font: Arial, Helvetica, sans-serif;
	color: #4895E1;
}

.about-me-photo {
	padding-bottom: 10px;
}

.about-me-photo img {
	border: #4895E1 solid 15px;
}

/* END ABOUT ME 
------------------------------ */

/* FOOTER 
------------------------------ */

.footer {
	border-top: 1px solid #666;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

ul.foota {
	list-style: none; 
}

ul.foota li {
	display: inline-block;
}

ul.foota a, ul.foota a:visited {
	padding: 5px 5px 5px 15px;
	text-decoration: none;
	background: #999;
	color: #0066cc;
}

ul.foota a:hover, ul.foota a:active, ul.foota a:focus {
	position: relative;
	color: #00cc00;
	padding: 10px;
	text-shadow: 0 0 0.2em #0033ff,
				 0 0 0.2em #0033ff,
				 0 0 0.2em #0033ff;
}

li.foota-1 a:hover, li.foota-1 a:active, li.foota-1 a:focus {
	right: 3px;
	top: 3px;
}

li.foota-2 a:hover, li.foota-2 a:active, li.foota-2 a:focus {
	top: 3px;
}

li.foota-3 a:hover, li.foota-3 a:active, li.foota-3 a:focus {
	left: 3px;
	top: 3px;
}

/* END FOOTER
------------------------------ */

/* 		++END PAGES++ ---------- */

/* 		++ADDONS++
---------------------------------------- */

/* FB LIKE BUTTON
------------------------------ */

.fb-like {
	padding: 5px;
	float: left;
}

/* END FB LIKE BUTTON
------------------------------ */

/* GOOGLE ADS
------------------------------ */

.ads-right-wrapper {
	padding-top: 27%;
	float: right;
	width: 160px;
	height: 600px;
}

.ads-top-links {
	padding-bottom: 10px;
}

/* END GOOGLE ADS
------------------------------ */

/* GOOGLE SEARCH BAR
------------------------------ */

.search-branding {
	float: right;
	padding-right: 5px;
}

.search-form {
	float: right;
	padding-right: 5px;
}

/* END GOOGLE SEARCH BAR
------------------------------ */

/* 		++END ADDONS++ ---------- */

/* 		++OTHER LINK STYLES++ 
---------------------------------------- */

a {
    font-weight: bold;
    text-decoration: underline;
	outline: 0;
}


.sitenav-linkstyles a {
	font-weight: bold;
    text-decoration: none;
}

.sitenav-linkstyles a:link {
	color: #0066cc;
}

.sitenav-linkstyles a:visited {
	color: #0066cc;
}

.sitenav-linkstyles a:hover, .sitenav-linkstyles a:focus {
	color: #00cc00;
	text-shadow: 0 0 0.2em #0033ff,
				 0 0 0.2em #0033ff,
				 0 0 0.2em #0033ff;
}

.sitenav-linkstyles a:active {
	color: #cc0000;
}

.bc-linkstyles a {
	text-decoration: none;
	background: none;
}

.bc-linkstyles a:link {
	color: #6699cc;
}


.bc-linkstyles a:visited {
	color: #9966cc;
}

.bc-linkstyles a:hover, .bc-linkstyles a:focus {
	color: #66cc66;
	text-shadow: 0 0 0.2em #3333ff,
				 0 0 0.2em #3333ff,
				 0 0 0.2em #3333ff;
}

.bc-linkstyles a:active {
	color: #cc6666;
}

.bymodel-dllinks a {
	text-decoration: none;
	background: none;
}

.bymodel-dllinks a:link {
	color: #03F;
}


.bymodel-dllinks a:visited {
	color: #93C;
}

.bymodel-dllinks a:hover, .bc-linkstyles a:focus {
	color: #62C860;
	text-shadow: 0 0 0.2em #03F,
				 0 0 0.2em #03F,
				 0 0 0.2em #03F;
}

.bymodel-dllinks a:active {
	color:  #0F0;
}

/* 		++END LINK STYLES++ ---------- */

Here is the CSS for the mobile tweaks:

@charset "utf-8";

/* 		++MOBILE TWEAKS++ 
---------------------------------------- */

.content {
	width: 58% !important;
}

.bb-sct img {
	width: 200px;
	height: 150px;
}

/* 		++END MOBILE TWEAKS++ ---------- */

Here is the html of my testing page (with the leading section removed), It may be better viewed by looking at the page source as i have used a quite a few includes:


<style type="text/css">
@import url("http://www.free4blackberry.com/styles/style_maintest.css") screen;
@import url("http://www.free4blackberry.com/styles/style_handheldtest.css") handheld, only screen and (max-device-width: 480px);
</style>
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="http://www.free4blackberry.com/styles/style_maintest.css" /><![endif]-->
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } 
ul.nav a { zoom: 1; }  
</style>
<![endif]-->
<link rel="shortcut icon" href="http://www.free4blackberry.com/images/sc-logo.ico">
</head>

<body>

<div class="container">
 <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
  <div class="sidebar1">
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/menu.php'); ?>
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/poll/index.php'); ?>
	<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/leftads.php'); ?>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Free BlackBerry Smartphone Downloads</h1>
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/topads.php'); ?>
     <br>
    <p> TEST CONTENT </p>
     <br>
    <!-- end .content --></div>
  <div class="sidebar2">
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/rightcolumn.php'); ?>
	<!-- end .sidebar2 --></div>
     <div class="footer">
	  <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
     <!-- end .footer --></div>
    <!-- end .container --></div>
</body>
</html>

Like i said, if anyone could help with this, I would REALLY appreciate it!!

As a note:

The page displays perfectly fine when viewed in firefox and IE on multiple resolutions. Its only on my Blackberry that it comes out like that.

2

Hm, a lot of PHP errors showing at the moment, so it’s hard to gauge the page properly.

One thing I notice is that you have sections with % widths, which is fine; but you also have em-based padding on them, which will smash the design apart. Avoid padding on main containers (unless you use %). Instead, put padding on inner containers that don’t have width specified.

3

Hi Ralph,

Thanks for your input. I have changed the padding in the content div over to percentages as you suggested. This doesnt seem to have any effect though.

I am also confused when you say that there are PHP errors showing? When i load the page with my cache emptied, it loads perfectly on firefox, ie and chrome. Not an error in sight. Its just on my blackberry that the layout is still going crazy.

Can anyone bring some light to this?

4

The first time I checked your site, there was a long list of PHP errors down the left side, but it’s fine now.

5

So i eventually found the offending peice of code, after much trial and error it turned out to be this bit in the css:

.fb-like {
	padding: 5px;
	float: left;
}

It appears that the blackberry browser in os 5 does not support the adding of classes to an element like the button i used from facebook. This was shown by the <INVALID> and </INVALID> tags when viewing the page source from my blackberry.

Now, seeing as BOLT browser displays the page perfectly fine, like button, google ads and all. Im assuming that this is just an issue with the version of the blackberry browser i am using on my phone.

Does anyone know how i can position elements like this? I’ve tried before with the google plus one button but it seems like you need to know some kind of chinese to get it to where you want it to be.

Ideally i am aiming for a tool bar in my header that displays just one line that contains the facebook button, a twitter button and googles plus one button. These would be aligned to the left, while the google custom search bar would be aligned to the right.

If anyone has any ideas on how to set this up i would be extremely grateful!

Thanks!!