CSS - Page Sitting Differently In Ie And Firefox

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 {

}

I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently.

Sample Page: http://www.mybb-emods.com/new/index.htm
CSS File: http://www.mybb-emods.com/new/stylesheet.css

Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers.

Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly.

If anyone has any idea how to fix these problems then I would very much appreciate the advice.

Thanks.

Hi again,

i've built an image gallery using an unordered list and php to grab 'em from the database.

when you first go to the page (both in FF and IE) the footer bar sits in the middle of the page, until you refresh, then it's fine.

same thing happens when you click to enlarge it.

Here's the page

Here's the CSS;
Code:

/* SHOWCASE STYLE - firefox */

html>body ul.showcase {
  margin:5px 1px;
  margin:auto;
  list-style: none;
  width:760px;
  }
  
html>body li.showcase {
  margin-top:5px;
  margin-left:10px;
  float:left;
  width:180px;
  }
  
/* SHOWCASE STYLE - IE */

  * html ul.showcase {
  margin:5px 1px;
  margin:auto;
  list-style: none;
  width:750px;
  }
  
  * html li.showcase {
  margin-top:5px;
  margin-left:8px;
  float:left;
  width:179px;
}

img.showcase {
border:1px solid #CCCCCC;
}

i'm sure it's somethin' to do with clearing the floats, but i just don't get why it's cool after you refresh.

thanks!

Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it:
http://www.iqdrop.com/newiq/index.php
Then in IE

You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE.

I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help.

Hi, I'm having an interesting problem. I have a left floated containing div and then a right floated containing div to split multiple contents between the left and right side of a popup window. It works great in IE 7, Chrome, FF3, but for some reason not in FF2. In FF2, it forces the contents of the right floated containing div below the left floated div (instead of beside it) and makes it's width the entire width of the popup. Any idea why? (there is a reason I had to put all the css directly in the code - normally it's separated) Here's the code:

Code:

<div style='padding: 15px; text-align: left;'>
	<div style='float: left;'>
		<table style='margin-top:16px; font-size: 12px; font-family: Verdana,Arial,sans-serif;'>
			<tr>
				<td>Name:</td><td colspan='2'><input id='popupName' name='popupName' style='float:left' type='text'></td>
			</tr>
			<tr>
				<td style='padding:5px 0 17px 0;'>Type:</td><td style='padding:5px 0 17px 0;' colspan='2'><select id='popupType' name='popupType' style='float:left; width: 148px; height: 21px' ></select></td>
			</tr>
			<tr>
				<td style='padding-bottom: 14px;' colspan='3'><div style='width: 280px'>This is some text.</div></td>
			</tr>
			<tr>
				<td style='padding-bottom: 5px;'>Group Title:</td><td style='padding-bottom: 5px;'><input id='popupGroupTitle' name='popupGroupTitle' style='float:left' type='text'></td><td></td>
			</tr>
			<tr>
				<td>Titles:</td><td><input id='popupTitles' name='popupTitles' style='float:left' type='text'></td><td><input style='float:left; padding: 0;' type='button' value='Add >>' onclick=\"addToList()\"></td>
			</tr>
		</table>
	</div>
	<div style='float: right;'>
		<div style='margin-bottom:5px;'>Element Titles:</div>
			<select id='newOptionSelect' style='float:right; width: 247px;' size='12'></select>
			<input id='popupDeleteBtn' style=\"clear: right; background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='removeFromList(\"newOptionSelect\", newOptionArray)'/>
			<input id='popupMoveDownBtn' style=\"float:right; background: rgb(190,190,190) url('/url') no-repeat center center; margin: 5px 2px;\" type='button' onclick='moveDown(\"newOptionSelect\", newOptionArray)'/>
			<input id='popupMoveUpBtn' style=\"background: rgb(190,190,190) url('/url') no-repeat center center; float:right;	margin: 5px 2px;\" type='button' onclick='moveUp(\"newOptionSelect\", newOptionArray)'/>
		</div>
	</div>
</div>