CSS - What Is Diff B/n #'s And .s In Css

Is there a cleaner way to achieve what I'm doing below? I read a bit about pseudo-selectors, not sure if they can be applied to this.

Code:

<style>
.class1 {float:left;width:100px;background:first_tab.jpg }
.class2 {float:left;width:100px;background:tab.jpg }
.class3 {float:left;width:100px;background:last_tab.jpg }
</style>

<div class="clearfix">
  <div class="class1">
    Home
  </div>
  <div class="class2">
    About Us
  </div>
  <div class="class3">
    Privacy
  </div>
</div>

Hi,

As you no doubt can tell from the title of this thread I'm a newb. I'm familiar with html but moving into learning css. Self taught, I no doubt have a lot to learn but I'm attempting to alter a template and would really appreciate some assistance.

The site is www . inspirationz . info.

I look at the site on my main monitor which is a large one and all looks fine. The two boxes in the main content area sit side by side, however when I look at it on my laptop or on a smaller monitor the navigation box on the right appears to sit still to the right, but beneath the box on the left.

It didn't appear this way in firefox browser at first on my laptop, only Internet Explorer, but it appears that way on my other pc monitor in firefox so I assume it's likely to be a coding error. I have included some of the stylesheet coding below.

Is anyone able to help me work out what's causing this?
Thank you in advance.

/*================================================================
Typography and links
==================================================================*/

a:link, a:visited {
color: #999999;
text-decoration: none;
}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, .sidebar_nav a {
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1em;
font-weight: bold;
letter-spacing: .16em;
}

.featured h2 {
font-size: 1.8em;
font-weight: normal;
text-transform: uppercase;
}

.post_header h2 {font-size: 1.2em; font-weight: normal; margin-top: 10px;}

.post_header_page h1, .post_header_single h1 {
font-size: 2em;
font-weight: normal;
text-transform: uppercase;
}

#footer h3 {margin-bottom: 25px; border-bottom: 1px dotted gray; padding: 5px;}

.featured p {
font-size: .8em;
font-style: italic;
}

p {
margin: 15px 0px;
}

.post_body_page p, .post_body_single p {margin: 0; padding: 15px 0px;}

small {
font-size: 0.8em;
font-style: italic;
}

strong {font-weight: bold;}

.post_body p {
font-size: 1em;
margin: 10px 0px;
}

.more {
margin-top: 10px;
margin-right: -10px;
float: right;
}

.more_big {
margin-top: -20px;
margin-right: 20px;
float: right;
width: 139px;
height: 73px;
}

.footer_comments {
float: left;
margin-left: 20px;
margin-top: 20px;
}

.comment_count {
font-weight: bold;
font-size: 1.8em;
}

.featured_datetime {margin: 6px 0px}

.featured_more {
float: right;
font-weight: bold;
margin-right: 20px;
text-decoration: underline;
}

.post_body_page ol, .post_body_single ol {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ol li, .post_body_single ol li {
list-style-type: upper-roman;
margin-left: 60px;
}

.post_body_page ul, .post_body_single ul {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ul li, .post_body_single ul li {
list-style-type: disc;
margin-left: 60px;
}

blockquote {
margin: 0px 30px;
padding: 20px;
border: 1px dotted gray;
font-style: italic;
}


/*================================================================
Site Structure
==================================================================*/

body {
font-size:100%;
line-height:1.125em;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #f0f0f0;
background-image: url(images/index/body.jpg);
background-repeat: repeat-x;
color: #7C7C7C;
}

#page_wrapper {
width: 976px;
margin: 0px auto;
position: relative;
}

#featured {
height: 230px;
margin-right: 3px;
margin-bottom: 30px;
border: 0px solid red;
padding: 15px;
background-image: url(images/index/featured.jpg);
background-repeat: no-repeat;
}

#header {
width: 667px;
margin: auto;
height: 109px;
background-image: url(images/index/header.jpg);
}

#container {
width: 990px;
margin: 140px auto;
font-size:0.875em;
}

#main_content_left_index {
width: 600px;
float: left;
}

#main_content_left {
width: 600px;
float: left;
}

#main_content_right {
width: 343px;
float: right;
}



#footer {
height: 250px;
padding: 130px 130px 50px 130px;
margin: auto;
clear: both;
background-color: #eeefef;
background-image: url(images/index/footer.jpg);
background-repeat: repeat-x;
background-position: top;
}

#footer_contents {width: 990px; margin: auto;}

#footer_left {width: 460px; margin: auto; float: left;}

#footer_right {width: 460px; margin: auto; float: right;}

/*================================================================
The columns
==================================================================*/

#first_column {
float: left;
width: 280px;
}

#second_column {
float: right;
width: 280px;
}

/*================================================================
The posts
==================================================================*/

.posts {
background-image: url(images/index/posts.jpg);
height: 333px;
width: 275px;
margin-bottom: 60px;
}

.post_header {
height: 38px;
width: 255px;
padding: 10px;
border: 0px solid red;
}

.post_body {
width: 255px;
height: 180px;
padding: 10px;
overflow: hidden;
font-size: .9em;
}


.post_footer {
height: 58px;
width: 275px;
margin-top: 15px;
}

.post_header_page, .post_header_single {
background-image: url(images/index/PostHeaderPage.jpg);
height: 38px;
width: 547px;
padding: 25px;
text-align: center;
}

.post_body_page, .post_body_single {
background-image: url(images/index/PostBodyPage.jpg);
background-repeat: repeat-y;
width: 547px;
padding: 0px 25px;
}

.post_footer_page, .post_footer_single{
clear: both;
background-image: url(images/index/PostFooterPage.jpg);
height: 90px;
width: 477px;
margin-bottom: 20px;
padding: 0px 60px;
font-style: italic;
}


.next_prev {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_posts.jpg);
width: 577px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}

.next_prev_comments {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_comments.jpg);
width: 535px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}



/*================================================================
The sidebars
==================================================================*/

.sidebar_header {
background-image: url(images/index/sidebar_header.jpg);
height: 91px;
width: 340px;
}

.sidebar_body {
display: block;
float: left;
margin:0 0 0px 0;
width: 290px;
padding: 25px;
background: url(images/index/sidebar_body.jpg) repeat-y;
}

.sidebar_bottom {
background-image: url(images/index/sidebar_footer.jpg);
height: 56px;
width: 340px;
clear: both;
margin-bottom: 40px;
}



/*================================================================
Sidebar Navigation
==================================================================*/

.sidebar_nav ul {}
.sidebar_nav li {}

.sidebar_nav ul li {
display: block;
padding: 4px;
border-bottom: 1px dotted #515151;
font-size: .8em;
}

.sidebar_nav ul ul li {margin-left: 10px; border-bottom: none; font-size: 1em;}
.sidebar_nav ul ul ul li {margin-left: 10px;}

.sidebar_nav {
margin-bottom: 20px;
}

.sidebar_nav ul {

}

.sidebar_nav a {display: block;
padding: 4px;
}

.sidebar_nav a:link, #navlist a:visited {
color: #666666;
text-decoration: none;
}

.sidebar_nav a:hover {
background: #d8d8d8
}


/*================================================================
Top navigation
==================================================================*/

#top_nav_menu {
position: absolute;
top: 132px;
left: 0;
width: 950px;
}

/***** drop menu *****/

#dropmenu, #dropmenu ul {
list-style-positionutside;
position:relative;
line-height:1.5em;
z-index:300;
width:100%;
font-weight: normal;
letter-spacing: .18em;
margin: 0px 0px 0px 0px;
}

#dropmenu a {
display:block;
padding: 5px 15px;
text-decoration:none;
color: #666666;
font-size: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: .18em;
}

#dropmenu a:hover {
color:#000;
text-decoration: underline;
}

#dropmenu li {
float:left;
position:relative;

}

#dropmenu ul {
position: absolute;
display: none;
width: 18em;
top: 1.9em;
left: 0px;
}

#dropmenu ul a {
background: url(images/index/dropmenu_bg.png)
}

#dropmenu ul a:hover {

}

#dropmenu li ul {
width:14.1em;
margin-top: 4px;
}

#dropmenu li ul a {
width: 250px;
height: auto;
float: left;
}


#dropmenu ul ul {
top:auto;
}

#dropmenu li ul ul {
left: 265px;
margin:0px 0 0 10px;
}

#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display:none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display:block;
}


/*================================================================
Categories Navigation
==================================================================*/

#main_categories {
margin: auto;
height: 20px;
width: 976px;
margin-bottom: 30px;
}

/* Horizontal Category List (frontpage) */

ul.horizontal_categories {
clear: both;
}

.horizontal_categories li {
display: inline;
background: url(images/index/cat_bullet.png) no-repeat right center;
font-size: 1.2em;
font-weight: bold;
letter-spacing: .08em;
}

.horizontal_categories a {
padding: 0px 25px;
}

.horizontal_categories a:link, .horizontal_categories a:visited {

}

.horizontal_categories a:hover {

}

Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE.

Here is the stylesheet:

PHP Code:
 body {
    background-color: #DECFEF;
}

.example
{
    background-image: url("images/example.gif"); 
    border-width: thin;
    border-color: white;
    border-style: solid;
    padding: 35px 35px 35px 35px;
} 





And here is the HTML file:

PHP Code:
<html>
<head>
<title>Chatterbox</title>
<link rel="stylesheet" type="text/css" href="/teststyle.css">
</head>
<body>
<table class='example'><tr><td>
  hello
</td></tr></table>
</body>
</html> 





All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet.

You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html


Any help is greatly appreciated

~j.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div style="background-color: red;"><input type="radio" id="radio"></div>
</body>
</html>

Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides.

Are there any tricks to getting consistency?

i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this?

this is what my code looks like:

Code:

a:hover#index {
	background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
    background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
    background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
    background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
    background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
    background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
    background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
    background: url("./images/search-red.png") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search   {
	width: 86px;
	height: 27px;
	float: left;
	margin-top:6px;
	position:relative;
	left: 115px;

}

a#index {
	background: url("./images/home-grey.png");
}
a#design {
	background: url("./images/dande-grey.png");
}
a#howto {
	background: url("./images/howtobuild-grey.png");
}
a#installation {
    background: url("./images/installation-grey.png");
}
a#dean {
    background: url("./images/deansblog-grey.png");
}
a#forum {
    background: url("./images/userforum-grey.png");
}
a#plan {
    background: url("./images/planbike-grey.png");
}
a#search {
    background: url("./images/search-grey.png");
}