CSS - How Can I Make My Pages Look Good On All Monitors?

Hi, today a friend of mine introduced me to browsershots.org. When I saw what my contact forms looked like in different browsers I couldn't believe it.

To make forms look nice I usually create a div and assign it a background image using the background-image css property. I give the div the same height and width as the background image, and then I position the input fields using the margin-top and margin-left properties.

In Safari the text fields are way too long and get out of the image. In IE the vertical separation is too little and everything is screwed up. In Opera the text fields are too tall and screws up the form as well.

Many people recommended to me not to use divs with a background for forms. My question then is: how should I do it? Can I use a table with a background image? I don't want to have a normal (ugly) contact form. Is there any way of making a form work across the browsers without giving up the nice design?

Ok, I have basic CSS knowledge but need some help. Here's what I'd like to do:

I take trips and post pictures on my site. I use lighthouse to display the images, so each image has a separate filename and caption, and each group of images has a separate group name. Under "Ski Trip", for instance, I'll have Img 1, "Skiing"; Img 2, "More skiing"; etc.

It's relatively tedious to create page after page that uses the same format. I use CSS for style, the menu, and Lighthouse, but is there way that I could create a new page entitled "New ski trip.html" and in that file just have a list of the image filenames, captions, etc., that end up all using the same html format to display the images?

I don't think I'm being terribly clear (sorry) ... big kudos to anyone who can help.

When I switch between pages with images on them, everything is fine.
When I switch between pages without images on them, everything is fine.
But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit.

Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this.

I'm using a centered fixed width css style so I have no idea how this could be happening.

I'll just add the css if needed:

(Any random advice or advice on how to make buttons without photoshop would be awesome too!)

Code:

body {
	background: #FFFF96;
	font-family: Verdana;
	font-size: 14px;
}

td {
	background: #FFFF96;
	font-family: Verdana;
	font-size: 14px;
}

a {
	text-decoration: underline;
	font-family: Verdana;
	font-size: 14px;
}

a:link {
	color:#2828FF;
}

a:visited {
	color:#2828FF;
}

a:hover {
	color:#AFAFFF;
}

a:active {
	color:#AFAFFF;
}

img {
	border: none;
}

#wrapper {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
} 

#title {
	width: 100%;
	font-size: 27px;
	font-style: italic;
	background-image: url("images/bgwinterowl.gif")
}

#links {
	width: 100%;
	padding: 15px;
}

#body1 {
  border: 4 double;
	border-color: red;
	background: #FFFFF0;
	width: 100%;
	text-align: left;
	padding: 15px;
}

#body2 {
	background: #FFFFF0;
	text-align: left;
	padding: 15px 15px 15px 100px;
	width: 500px;
}

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 {

}

Does anyone have any idea what could be happening to my main menu - it dissappears in Safari!

Hobo