CSS - Page Messing Up In Firefox

I started using custom borders after seeing ALA's article on custom borders, but I'm running into a problem. If the overall width of the article isn't over 300px, then it doesn't bridge all the way, but I'm not wanting 300px width. Is there any way to eleminate the gap at the bottom. BTW, it's not just an IE thing, it's doing that in FF, and Opera too.

Here's my code:
Code:

div.Article {
  background: 
	url(images/menu/topleft.jpg) 
  top left no-repeat;
  }
div.Article h2 {
  background: 
	url(images/menu/topright.jpg) 
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  color: #000;
  }
div.ArticleBody {
  background: 
	url(images/menu/right.jpg) 
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  }
div.ArticleFooter {
  background: 
	url(images/menu/bottomleft.jpg) 
  bottom left no-repeat;
  }
div.ArticleFooter p {
  background: 
	url(images/menu/bottomright.jpg) 
  bottom right no-repeat;
  display:block;
  padding:15px;
  margin:-2em 0 0 0;
  }

HTML too:
Code:

<div class="Article" style="width: 210;">
  <h2><b>Menu</b></h2>
<div align="center">
  <div class="ArticleBody">
    <p>Text</p>
</div>
<div class="ArticleFooter">
  	<p style="color: #000;">
    A paragraph containing author information
    </p> 

    </div>
    </div>
	</div>

Thanks,
Marty J.

Hello.

I have a site that I've done completely using dhtml and css.

Everything is perfect in IE 6.0. However, Netscape 7.1 does weird things with the borders I've specified.

I've tried to tweak and mess with it, but nothing has produced a result that looks the same in both IE and Netscape. Does anyone have any ideas as to why it's looking the way it is in Netscape and what I can do to fix it?

The page is at: http://www.americansforthearts.org/sarah/test/

thanks.

Hey guys, I know there are some little things that throw off a browser but I can't nail them down on this one. Its pretty early on in the development stage but I want to get things straight before I move forward. Its not letting me put two div's right next to one another Currently the CSS is in the same file as the HTML but I broke it up for easier reading on here. Thanks for any help.

EDIT: Updated code further down

I'm having a problem getting a background image to show properly in Internet explorer.. It's hard to explain, but if you go to my page... http://www.55yardline.com you'll see what I'm talking about.

Works find in every browser I tested with except Internet Explorer. If you look at the background image of the player, and than scroll up and down a bit, the image gets all messed up.

Is there any way to fix it?

Hi,

I'm using a not-yet-fully-supported piece of code to get rounded corner elements on my site. To ensure the most universal support, I am actually using three properties; one for Mozilla browsers, one for Webkit Browsers and the non-specified property for the final CSS3 spec. So:

Code:

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

I've also had to install a JavaScript library (CurvyCorners) that adds this functionality to IE, which seems to work fine.

On two of my divs have vertical scrolling, as well. So I've used the following:

Code:

 overflow-y: auto;
overflow-x: hidden;

This works just fine in Firefox, Safari, Chrome, and Opera (though the rounded corners do not show in Opera) -- But in IE8, for some reason, the scroll bar will scroll the entire div (including the background, which is usually fixed) rather than just the content. I have figured out a fix for this, which is to remove the webkit border radius property... which removes my rounded corners from not only IE, but obviously Chrome and Safari as well.

My question is: is there any way to make these two features reconcile their differences and work together?

The site is at www.FinchHouseRecords.com
and the style sheet can be found at www.finchhouserecords.com/style.css

Thanks for your help!

-Shawn

PS - I ran the validation tools... passed the XHTML, and the only issues on the CSS are related to the rounded-corner properties not being recognized as CSS2.1, but they still all work in the other browsers.

I have a form that looks similar to this:

Code:

<div id="form">
     <div class="title">Fill out this form:</div>
     <div class="main">
          <div class="item bg1">
               Enter your name:
               <div class="field">
                    <input type="text" />
               </div>
          </div>
          <div class="item bg2">
               Enter your email address:
               <div class="field">
                    <input type="text" />
               </div>
          </div>
     </div>
</div>

now, when i insert an image in the item div, there is an overflow problem which i fix with overflow: auto in the item class. now, when a user is tabbing through the form, it will select the div with the overflow: auto in it.

any suggestions?

Hello all,

I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

Here is my css code for before I add the image:
PHP Code:
#navbar {
    height:37px; 
    line-height:33px;
    padding: 2px 0 0 10px;
    vertical-align:top;
    background: url(images/linkbarbg1.png) repeat-x;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFFFFF;

}

#navbar ul {
    vertical-align:top;
    margin:0;
    padding:0;
    border: 0px solid #000000;
}

#navbar ul li {
    display: inline;

}

#navbar ul li a {
    display: inline;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
} 





And HTML:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





And here is what it looks like:


My CSS Code is the same for after, here is my HTML code for after:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><img src="images/linkbarseperator1.png" /></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





and here is what is looks like:


Is there a way to fix this?

UPDATE
I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

I am using dreamweaver cs5 and when I test my page in firefox, it is the color that I chose ( a pink color), but when i test it in internet explorer, it is black (this is the background color). Does anyone know why this is happening and how to correct it?

Also, I made my page with tables and centered the table with no margins. well the page has a huge margin gap at the bottom in google browser, but it is fine in IE and firefox. any suggestions? Thanks.

I have been trying to create a page from my layout that uses an imaga gallery with on CSS using Ref Web page .


When I try to use it on my page IE 6 works but Firefox doesn't. (The text below the image div doesn't stay in the conntent div.

My Web Page

Also, with the image gallery how do I keep Image text information (ie description/title of photo with the current one. It only displays when I use the mouse over, but I want both if possible (one hides when hovering)

Any help would be great.

Thanks

Matt

i have a two div tags but the upermost tag sits outside the boundary of the one below

and the page seems to be over stretched in IE7

the page address is www.ftpimage.com

does anyone have any suggestions my css is as follows

Code:

body {
	margin: 0px;
	background: url(../img/top_bg.gif);
	background-repeat: repeat-x;
	font-family: Verdana, Arial, sans-serif;
    font-size: "15";
}

p {
	line-height: 50px;
	margin: 11px 0 10px 0;
	padding: 0px;
}

h2 {
	color: #9f9f9f;
	margin:0px;
	padding:0px;
	font-size: 15px;
}

ul {
	font-size: 10px;
	margin:0;
	padding:0;
	list-style-image: url(../img/bullet.gif);
}

a {
	color: #93B300;
}

a:hover {
	text-decoration: none;
}

blockquote{
	background: #F7FDE3;
	color: #606060;
	padding: 0px;
}


/**** Main Container ***/


#wrap {
       margin-left: 10px;
       margin-right: auto;
       width: 640px;
}


/**** Top ***/


#top {
	width: 155%;
	height:85px;
	color: #fff;
	background: #000 url(../img/top_bg.gif);
	overflow:hidden;
}

#top h2
{
    color: #87CEFA;
    letter-spacing: 3px;
    font-size: 2.4em;
    font-weight: normal;
    position: relative;
    margin: 0px;
    top: 33px;
    display: block;
    float: left;
    background: url(../img/bg_t.gif) no-repeat;
    padding-left: 8px;
}

#top h2 a {
	color: white;
	text-decoration: none;
}

#top h2 a:hover {
        color: #93B300;
}

#page
{
    margin-right: 20px;
    max-width: 10px
    
    
   
   
}


/**** Main Menu ***/


#menu {
	display: block;
	float:right;
}

#menu ul {
	margin: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	white-space: nowrap;
}

#menu li a {
	display: block;
	padding: 20px 10px 12px 20px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

* html #menu a {width:1%;}

#menu li a:hover {
	background: url(../img/bg_menu.gif);
}

#menu li a.current {
	letter-spacing: 1px;
	color: gray;
	background: url(../img/bg_menu.gif);
}

#menu li a.current:hover {
	color: #fff;
}


/**** Content Container ***/


#content {
	width: 65%;
	margin-top:30px; 
	border: solid 2px black;
	 
	
}

#content h2 {
	margin: 0;
	padding: 10px 0 10px 0;
}


/**** Content ***/


#left ul {
	padding: 15px 0 15px 35px;
	margin:0;
}

#left li {
	margin-bottom:5px;
}

#left .box {
	width: 390px;
	float:left;
	display: block;
       margin-left: 20px;
	display: inline;
}


/**** Sidebar ***/


#right {
	width: 315px; 
	float: right;
	display:block;
	margin-top: 10px;
}

#right .box {
	width: 20em;/*280px*/
	background: #87CEFA;
	border: 1px solid #E1E1E1;
	padding:10px 10px 55px 10px; 
	float: right;
	
}

#right .box h2 {
	font-size: 3.1em;
	margin: 0px 0 0px 0;
	padding:0px 0 5px 0;
}

#right .box a {
	margin: 10px 0 10px 0;
	color: #93B300;
	font-size: 20px;
}

#right .box p {
	margin: 5px 0 10px 0;
	line-height: 15px;
}

#right .box ul {
	padding: 0 0 0px 20px;
	margin:10px 0 10px 0;
}

#right .box li {
	margin-top:5px;
}

html>body .box
{
width: auto;
min-width: 20em;
}

#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
	display: block;
	height: 2.0em;
	padding: 0.3em 0.3em 0.3em 0.8em;
	border:solid;
	border-width:medium;
	border-bottom: 2px; /*solid #1a1a1a*/
	border-top: 2px; /*solid #1a1a1a*/
	border-color:Black; 
	color: black;
	background-color: #87CEFA;
	font-weight: bold;
	text-decoration: none;
	font-size:medium 

	}

#nav a:hover{
	color: #1a1a1a;
	background: url(../img/bg_t.gif) no-repeat;
	background-color: #fff;
	font-weight: bold;
	}	

/**** Clear Div ***/


#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}


/**** Footer ***/


#footer {
        margin: 40px auto 0 auto;
	text-align: center;
	border-top: dotted 1px gray;
	padding: 20px 0 20px 0;
	width: 70%;
}

#footer p {
	margin: 0px;
	padding: 0;
 

Hello everyone

I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6

Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE.

The style sheet is no from me.

I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input

Eva

Here it is:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png);
background-repeat: no-repeat;
background-position: left top;
font: 13px Verdana, Arial, Helvetica, sans-serif;
/* size: 100%; */
color: #333333;
line-height: 1.3;
margin: 0px;
padding: 0px;
}


img{
border: 0;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
font-weight: bold;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: black;
margin: 0px;
padding: 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

table{
padding: 5 px;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masterhead{
padding: 30px 0px 0px 0px;
/* border-bottom: 1px solid #cccccc; */
width: 950px;
}

#navBar{
float: left;
width: 195px;
margin: 0px;
/* 19.08.2008 padding-top: -5px;*/
padding-top: -5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
/* background-color: #e4f2f9; */
/* 19.08.2008 border-right: 1px solid #cccccc; */
}

#headlines{
position: absolute;
left: 690px;
top: 135px;
font-size: 85%!important;
/* font-size: 90%; */
/* float:right; */
width: 230px;
margin-top: -30px;
/* border-left: 1px solid #cccccc; */
/* border-bottom: 1px solid #cccccc;*/
/* padding-right: 10px; */
}

#headlines h3{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 900;
}

#content{
float: left;
padding-left: 24px;
width: 460px;
font-size: 107%;
line-height: 1.4;
/* position: absolute;
top: 184px;
left: 210px; */
}

#content h1,h2 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 130%;
font-color: black;
}

#content h3 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 120%;
font-height: 90%;
font-weight: 900;
}


/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 200px;
/* font-size: x-large; */
color: #FF9900;
}


/************* #globalNav styles **************/

#globalNav{
/* border-bottom: 1px solid #CCC; */
color: #006699;
text-align: center;
/* font-weight: bold; */
margin-top: 40px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 10px;
/* 19.08.2008 border-top: 1px solid #cccccc; */
}

#globalNav img{
display: block;
}

#globalNav a {
/* font-size: 120%; */
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

/*
#pageName{
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
*/

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 2px 2px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
color: #006699;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
font-size: 80%;
padding-top: -40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
text-align: right;
border-top: 0px none #cccccc;
/* border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc; */

}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
/* border-bottom: 1px solid #006699; */
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
/* border-top: 1px solid #006699; */
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
/* background-color: #dddddd;*/
}


.navigate {
overflow: hidden;
width: 204px;
padding-bottom: 1px;
}

/**Navigation Menu **/
.navigate ul, .navigate li {
list-style: none;
margin: 0px 0px!important;
padding: 0px 0px!important;
line-height: 1.5em;
}


/**erste Navigationseben**/
.navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
display: block;
border: 0;
border-bottom: 1px solid #86c2e3;
border-top: 1px solid #fff;
border-right: 1px solid #86c2e3;
width: 100%;
text-decoration: none;
margin: 0;
padding: 5px 5px 5px 15px;
font-size: 1.0em;
font-weight: bold;
}

.navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active {
width: auto;
}

.navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px;
padding: 5px 5px 5px 15px;
color: #000;
font-weight: bold;
}

.navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px;
}

.navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

.navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/**Footer**/
#footer {
clear: both;
position: relative;
border-top: 4px solid #CCECF4;
font-size: 11px;
padding: 4px 4px 8px 10px;
margin-top: 4px;
bottom:0;
zoom: 1;
}

#footer .left {
float: left;
width: 700px;
bottom:0;
}

#footer .right {
float: right;
width: 150px;
text-align: right;
margin-top: -2.3em;
zoom: 1;
position: relative;
z-index: 0;
bottom:0;
}

#footer p {
color: #000 !important;
padding: 0;
margin: 0;
bottom:0;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active {
color: #306479;
text-decoration: none;
font-weight: bold;
}

#footer a:hover, #footer a:focus {
text-decoration: underline;
}


#navispalte {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 202px;
float: left;
}

I'm currently creating a simple website using css and its looks fine in IE however the nav bar is not aligned with everything else in Firefox. Sorry i'm new at CSS, thanks for the help in advance.

Here is the site: insightchirocare.ca

Here is the css code:
Code:

/* CSS Document */

*{
	padding:0;
	margin:0;
	width: auto;
}   
  
body {   
font-family:Verdana, Arial, Helvetica, sans-serif;    
background-repeat:repeat-x;   
background-color:#ffffff;   
padding:0;   
margin:0;   
} 

#container {
	width:800px;
	margin:auto;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}   

/* HEADER IMAGE */  
#header{   
background-repeat:no-repeat;   
background-image: url(images/header.gif);   
height: 150px;   
width: 800px;   
float:left;   
margin:300 px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;   
}   
/* HEADER BACKGROUND IMAGE END */ 

  
/* NAVIGATION */  
#nav{   
width:800px;   
float:right;   
height:30px;   
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 40px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;      
}   
  
.menu ul{   
padding:0;   
margin:0;   
list-style-type:none;   
list-style:none;   
display:inline;   
}   
  
.menu li{   
padding-right:0px;   
margin:0 0px 0 0;   
height:30px;   
list-style-type:none;   
list-style:none;   
display:inline;   
float:left;   
}   
  
span{   
display:none;   
}   
  
#home a{   
background:url(images/nav_bar/home.gif);   
width:74px;   
height:30px;   
display:block;   
} 
#home a:hover { 
background:url(images/nav_bar/home_gr.gif);   
width:74px;   
height:30px;   
display:block;  
}
#home a:active { 
background:url(images/nav_bar/home_gr.gif);   
width:74px;   
height:30px;   
display:block;  
}   
  
#about_us a{   
background:url(images/nav_bar/about_us.gif);   
width:82px;   
height:30px;   
display:block;   
}   
#about_us a:hover{   
background:url(images/nav_bar/about_us_gr.gif);   
width:82px;   
height:30px;   
display:block;   
}
#about_us a:active{   
background:url(images/nav_bar/about_us_gr.gif);   
width:82px;   
height:30px;   
display:block;   
} 
  
#first_visit a{   
background:url(images/nav_bar/first_visit.gif);   
width:81px;   
height:30px;   
display:block;   
}
#first_visit a:hover{   
background:url(images/nav_bar/first_visit_gr.gif);   
width:81px;   
height:30px;   
display:block;   
}
#first_visit a:active{   
background:url(images/nav_bar/first_visit_gr.gif);   
width:81px;   
height:30px;   
display:block;   
}   
  
#gonstead_chiro a{   
background:url(images/nav_bar/gonstead_chiro.gif);   
width:162px;   
height:30px;   
display:block;   
}
#gonstead_chiro a:hover{   
background:url(images/nav_bar/gonstead_chiro_gr.gif);   
width:162px;   
height:30px;   
display:block;   
} 
#gonstead_chiro a:active{   
background:url(images/nav_bar/gonstead_chiro_gr.gif);   
width:162px;   
height:30px;   
display:block;   
}  

#faq a{   
background:url(images/nav_bar/faq.gif);   
width:71px;   
height:30px;   
display:block;   
}
#faq a:hover{   
background:url(images/nav_bar/faq_gr.gif);   
width:71px;   
height:30px;   
display:block;   
} 
#faq a:active{   
background:url(images/nav_bar/faq_gr.gif);   
width:71px;   
height:30px;   
display:block;   
}  

#kid_chiro a{   
background:url(images/nav_bar/kids_chiro.gif);   
width:124px;   
height:30px;   
display:block;   
}
#kid_chiro a:hover{   
background:url(images/nav_bar/kids_chiro_gr.gif);   
width:124px;   
height:30px;   
display:block;   
} 
#kid_chiro a:active{   
background:url(images/nav_bar/kids_chiro_gr.gif);   
width:124px;   
height:30px;   
display:block;   
}  

#testimonials a{   
background:url(images/nav_bar/testimonials.gif);   
width:105px;   
height:30px;   
display:block;   
}
#testimonials a:hover{   
background:url(images/nav_bar/testimonials_gr.gif);   
width:105px;   
height:30px;   
display:block;   
} 
#testimonials a:active{   
background:url(images/nav_bar/testimonials_gr.gif);   
width:105px;   
height:30px;   
display:block;   
}  

#contact_us a{   
background:url(images/nav_bar/contact_us.gif);   
width:101px;   
height:30px;   
display:block;   
} 
#contact_us a:hover{   
background:url(images/nav_bar/contact_us_gr.gif);   
width:101px;   
height:30px;   
display:block;   
}
#contact_us a:active{   
background:url(images/nav_bar/contact_us_gr.gif);   
width:101px;   
height:30px;   
display:block;   
} 
/* NAVIGATION END*/ 

/* LEFT_CONTENT*/   
#left_content {
	height: 450px;
	width: 500px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #757171;
	margin-top: 0px;
	margin-left: 0px;
	float: left;
	margin-right: 5px;
	background-color:ffffff;
}   
/* LEFT_CONTENT END*/  

/* REG_CONTENT*/  
#reg_content {   
height: auto;   
width: 800px;   
font-family: Verdana, Arial, Helvetica, sans-serif;   
font-size: 12px;   
color: #757171;   
margin-top: 0px;   
margin-left: 0px; 
background-color:#ffffff; 
}   
/* REG_CONTENT END*/ 

/* RIGHT_CONTNET*/  
#right_content{
	height: 450px;
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #757171;
	padding: 0;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	background-color:#e3e3e3;
}   
/* RIGHT_CONTENT END*/ 
  
h1 {   
padding:0;   
margin:0;   
font-size:16px;   
color:#008bcf;   
font-family: Verdana;   
font-weight: normal;   
}   

h2 {   
padding:0;   
margin:0;   
font-size:12px;   
color:#008bcf;   
font-family: Verdana;   
font-weight: normal;   
}  
  
p {
	padding:0;
	margin:0;
	font-size:12px;
	color:#757171;
	font-family: Verdana;
}   


/* FOOTER*/  
#footer {
	padding : 0;
	width: 800px;
	height: 40px;
	background: url(images/footer.gif);
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}   
/* FOOTER END*/ 

.clearfloats {clear:both;}

A:link {
text-decoration: underline; color: #008BCF;
}
A:visited {
text-decoration: underline; color: #008BCF;
}
A:active {
text-decoration: underline; color: #18fa07;
}
A:hover {
text-decoration: underline; color: #18fa07;
}

I'm having a problem with this page: http://graffetto.com/news/

Works fine in Firefox, however in IE the browser won't scroll to reveal the rest of the page.

code is he

Code:

#companyNewsButton
{
position: relative;
top: 35px;
left: 5px;
font-weight: bold;
color: #082750;
}

#newsContent
{
position: relative;
background-image: url(http://graffetto.com/images/newsHeader.gif); 
background-repeat: no-repeat;
width: 573px;
top: 50px;
left: 10px;
margin: 0px;
padding: 0px;
}

#newsArticleList
{
position: relative;
margin: 0px;
padding: 5px;
top: 65px;
left: 0px;
background-color: #C8D0D8;
border: 1px dashed;
border-color: #4B617F;
}

#regularCopyrightContainer
{
position: relative;
top: 100px;
margin: 0px;
padding: 0px;
text-align: center;
width: 592px;
color: #4B617F;
}

anyone have any idea why this is?

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.