Blackberry doesn't display website correctly...
I developed a website for my own usage and finally got most of the design and content finished. From my laptop (a Macintosh), it looks fine in Firefox and Safari.
However, if I use my Blackberry, and this is true for all three browsers it can encode in (Blackberry, Firefox, Internet Explorer) (you select one of these three from the Options on the Blackberry)... there is a particular web page element unacceptably out of place.
The out of place issue applies to pages where I've intentionally added a "margin-left="some value"" so the page element becomes more center (but not centered as would be the result of <center>.
These pages are the resume page and contact, which have their own CSS pages (resumecss.css and formcss.css)
I manipulated this through the page's CSS (two, one used for each page) as the website is written in XHTML and uses CSS for design properties.
Otherwise, without the margin-left property being defined, the text for the form and the resume would go completely to the left side which looks weird below the centered headings. This occurs only for the form and resume pages as these are the only pages with margin-left defined in a unique but necessary way.
However, I do not want the text to be centered for the form or for the resume, but I do not want it to be too far off to the left either. Hence, the reason I used "margin-left" to deal with this.
The result is text that still is aligned to the left but isn't placed too far to the left of the page which is what I want.
However, as above noted, the Blackberry has issues. What happens is that the left-margin seems to push the elements too far to the right of the page (for the resume and form/contact pages). This is probably due to the fact that a Blackberry screen is smaller in size and has a different resolution than a regular computer screen, so no matter what browser option is used, the margin-left "px"'s appear pushed too much on smaller devices.
Should I go the route of having an alternate page show up for smartphones (mobile pages) and have another CSS page for those smartphones that perhaps doesn't have a margin-left value at all?
I don't know how that would work. If I did go that route, I would assume I would either need separate pages (eg. formblackberry.css and resumeblackberry.css) or define something on the current formcss.css and resumecss.css pages to make changes for smartphones (eg. (and this is obviously made up coding!): IF SMARTPHONE DETECTED, IGNORE MARGIN-LEFT PROPERTY)
Thanks for any advice!