1. Computing

Discuss in my forum

Jennifer Kyrnin

CSS Problems? Here are Some Solutions

By February 15, 2013

Follow me on:

I've been building web pages for long enough that I remember how hard it was to design pages that looked similar using just CSS back in the early 2000s. But these days, the majority of browsers out there handle CSS really well, including many if not most of the features in CSS3. But if you're still struggling with CSS, this article covers some of the more common problems people have with it and how you can fix them.

If you have other problems with CSS and browser compatibility, please feel to post a comment. There may already be help out there for you, and if not, we can work on it together.

Read the article: Tips and Tricks Using CSS

More Help with CSS

Comments
February 18, 2013 at 5:20 pm
(1) Gordon Rankine says:

Hi there,

I was wondering if you have come across the following issue before with the Mobile Safari 4.0 browser (Dolphin HD Browser on Android Phone 4.0.4), it only seems to happen with this browser version.

I have the following code, this renders correctly on most browsers except this one (Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; GT-I9100 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30). On this browser, the text in div a’s width takes up about 1/3 of the 980px while the test in div b takes up the full 980px.

For example it should look like
div a xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

div b xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

but it renders like

div a xxxxxxxx
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx

div b xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

#a {
width:980px;
background:#000;
color:#fff;
}

#b {
background:#f00;
color:#000;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Cheers
Gordie

Leave a Comment

Line and paragraph breaks are automatic. Some HTML allowed: <a href="" title="">, <b>, <i>, <strike>

©2014 About.com. All rights reserved.