Publishing System Settings Logout Login Register
Common CSS and XHTML problems and how to solve them
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on December 12th, 2005
9807 views
CSS Stylesheets
Common CSS problems and questions and how to solve them

Q: My text is right next to the borders on my webpage how do i fix?
A: Using padding you can fix this. The most common way:
padding-left: 3px;


Q: How can i center my webpage using CSS?
A: Using margins that have a value of auto!
margin-left: auto; margin-right: auto;
Put that in the container css code.

Q: What are floats and what do they do?
A: Well floats are a much better way to position your content boxes where you want them. There are 2 values for them:
float: left; float: right;
!
Are these better than using position: absolute and stuff? By far, sometimes there are times when you do need position: absolute though.

Q: My webpage looks fine in firefox but horrible in internet explorer! help!
A: Well in my css expirence ive encountered this so many times. Most of the time it was because of the
position: absolute
code or something along those lines. I easily fixed it using floats. Also ive encountered some problems with the codes
top: 19px; left: 19px;
. Remember those numbers are just a example.

Q: Whats the best way to position things on a website in CSS?
A: First if you want something on the left or right, use
float: left; float: right;
. Now if you want to push stuff down, up, left, right use these:
margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px;
. Ive never encountered problems with these. Now if you want to push text down, left, right, top you would use:
padding: 5px;


Q: How do i make a banner go across the whole screen on multiple resolutions?
A: By using the css code:
width: 100%;
. The best way to use this is to have a gradient for the background image thats 1 px wide and say 100px high.

Q: How can i position a background image?
A: Using
background-image: url('yourbg.gif'); background-position: 25%;
change those values to whatever you want.

Q: How do i repeat a background horizontally?
A: By using:
background-repeat: repeat-x;


Q: Well now how can i repeat a background vertically?
A: Use
background-repeat: repeat-y;


Q: How do i make the first letter in a sentence special?
A: By using a div code like:
<div class=\"whatever\">Hello world! The H is special!</div>
Then use a CSS code of:
.whatever:first-letter { color: #ff0000; font-size: xx-large; }




Q: How come the padding makes my site funny in Internet explorer?
A: Use div's inside divs, and the inner one padding.

Q: My site shifts slightly to the left when my content does not fill the page, how do i fix?
A: By using this code:
html {
min-height: 100%;
margin-bottom: 1px;
}


Q: How do I get rid of bullets on my lists?
A: By using a very simple CSS code:
list-style-type: none;


Q: How do i get a image for my lists?
A: By using
list-style-image: url('imagehere.gif');

Q: My floats mess up! How can i fix it?
A: Well the way i fix most of mine are making a new div called [CODE]<div id=\"clear\"> </div>
somewhere after the content but still in the container. Then using the CSS code:
clear { clear: both; }


Q: Borders, can they have multiple colors?
A: Yes they can, you can even form cool things with borders and multiple colors on them just use a css code like:
border-color: #ffffff #000000;
Note: You can only have up to 4 colors.

Q: How can i have a image for a border?
A: Sadly you cannot do this yet, maybe sometime in the near future!

Q: Can inputs and textareas have styles?
A: They sure can! Add a class or something to it named input and use the css code:
input { css: stuff-here; }
Of course change the code in the middle :).

Q: What is the xhtml valid way to use inputs and textareas?
A: Writing out this code:
<input type=\"text\" name=\"test\" value=\"test\" /> or for text areas: <textarea name=\"test\" /> </textarea>
Those are the ways I do it.

Q: What is the correct way to use br's and paragraphs in xhtml?
A: By using
<br /> and <p> </p>
You might be thinking the paragraph tag is the same! Yes but you MUST have the closing tag with the paragraphs.



Q: What are the correct xhtml ways and all the ways to link to external stylesheets?
A: There are quite a few i know of! Here they are:

<link rel=\"stylesheet\" href=\"style.css\" media=\"screen\" />
<style type=\"text/css\" media=\"screen\" />@import url(\"style.css\");</style>
<link rel=\"stylesheet\" href=\"style.css\" media=\"print\" />


Q: Can you use Opacity with CSS?
A: Yes it is a CSS 2 function. Sadly it is only a Safari, Firefox and Internet Explorer only function. Here is the code:

.testing {
background-color: #CE6BBD;
width: 100%;
}

.opaque {
opacity: .5;
filter: alpha(opacity=50);
}


Then the code:
<div class=\"testing\"> Content Man! Red Hot Chilli Peppers Rock!</div>


Q: What is XHTML?
A: Well my friend ill tell you! It is a stricter cleaner version of html! XHTML Stands for EXtensible HyperText Markup Language.
It is aimed to replace html! XHTML is a combination of HTML and XML.

Q: Im stumped... I can't think up a good design!
A: Well my way is this, Go find some images you like, try out different things! Silhouette's on them, Adding Filters. Use that for your logo. Then think of a nice colour scheme thats easy on the eyes. Then just go wild and build something!

Q: What are the XHTML Sytax Rules?
A: There are quite a few, Attribute names must be in lower case, Attribute values must be quoted, Attribute minimization is forbidden, The id attribute replaces the name attribute, and the XHTML DTD defines mandatory elements.

Well thats all my friends! I hope you enjoy this!

If you want PM with any questions on the pixel2life forums, My username is d7x.

Stay classy Planet Earth
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
d7x

My name is Chris Fogarty, Im 14 years old! I love to design and code in CSS! I play hacky sack in spare time, hang
out with friends and just mess around!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top