CSS - Firefox/ie Conflict

I have a header where I have two different div's that need to sit opposite each other on the same line (one aligned right and the other left). I used a float since it was the simplest way to get the job done. But in the div floating right I have three hyperlinks that have borders. When I float the div the border on the top and bottom dissappear when I remove the float the border on the top and bototm re-appear. any ideas?

Here's the CSS... It's raw as I'm still developing these sections.

Code:

#headerRight
{
float: right;
}
#headerLeft
{
float: left;
}
#header a:link
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:active
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:hover
{
border: #000 solid 1px;
text-decoration: none;
background-color: #333;
color: #ffffff;
}
#header a:visited
{
border: #000 solid 1px;
text-decoration: none;
}

Hi,

I'm trying to get top both corners of my table header row to have a rounded corner each, but only one is appearing.

The HTML is:
Code:

<tr>
	<td width="12%" class="tbl-col cnr-tl">Col 1</td>
	<td width="20%" class="tbl-col">Col 2</td>
	<td width="20%" class="tbl-col">Col 3</td>
	<td width="30%" class="tbl-col">Col 4</td>
	<td width="12%" class="tbl-col cnr-tr">Col 5</td>
</tr>

and the css is:
Code:

.tbl-col {
	background-color			: #FFDA99;
	color						: #C00000;
	font-size					: 15px;
	font-style					: italic;
	font-weight					: bold;
	height						: 25px;
	text-align					: center;
}
.cnr-tl {
	border-top-left-radius				: 10px;
	-moz-border-radius-topleft			: 10px;
	-webkit-border-top-left-radius		: 10px;
}
.cnr-tr {
	border-top-right-radius				: 10px;
	-moz-border-radius-topright			: 10px;
	-webkit-border-top-right-radius		: 10px;
}

When the styles are in this order, the right hand column has a rounded corner, but if you swap the order of .cnr-tl and .cnr-tr, the left hand column has a rounded corner, but I can't get both end columns to have rounded corners at the same time.

Putting both corner styles on one column does work, though, but I'd like to have both end columns to have rounded corners and the middle columns to have straight corners.

Does anyone know how to do this?

Debbie

Hi, my CMS is bridged with a forum and the body background color from the CMS is overriding the forum css. I have similar issues with the p and td tags and perhaps more small stuff. How can I resolve the conflicts so I can set the forum styles independent of my Mambo template? Here is an example (body color issue)

CMS code:

Code:

body {
	margin: 10px 0px 10px 0px;
	padding: 0;
	font: 101.5%/1.4em "Trebuchet MS", Tahoma, Verdana, Helvetica;
	letter-spacing: normal;
	background: #232323 url(../images/body_bg.png) repeat-x center top;
	color: #999;}

Forum code:

Code:

body {
	font: 90%/85% Verdana, Helvetica, sans-serif;
	background: #666666;
	margin: 0;
	padding: 12px 0 4px 0;
}

Hello everyone,

I'm working on a word press design for my site and I'm having some problems with absolute positioning. The positioning is fine in and of itself but I've found that if the absolute positioned element is underneath a link, it voids out the link. The text for the link is there, just no link. I've tested this by removing the absolute positioned element and the links work fine after I do that. Any idea what's going on with this?

This occurs in both Firefox and IE. I've validated the CSS as CSS 2.1.

You can see what I'm talking about at my site randomdamage dot org (the forum wouldn't let me post the link) If you scroll to the bottom of the page you can see two links which are being affected, the comments link for the last post and the next page link. The absolute element is the red splatter graphic.

Here's the relevant css:

/*footer styles*/
#footer blockquote { background-image: url(images/splash.png); width: 850px; height: 100px; position: absolute; left: 5px; background-repeat: no-repeat; bottom: 63px; text-indent: -9999px; z-index:9;}
#footer { clear:both; font-family: Georgia, "Times New Roman", Times, serif; padding-right: 20px; padding-left: 20px; padding-top: 20px; }
#footer p { text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 10px; padding-bottom: 40px; }


Any help would be greatly appreciated.

Hey All,
I am modifying a wordpress template and have increased the size of the right side bar. All seemed fine in firefox but when I hit the site in IE, the column dropped to the bottom of the page.

I can't seem to isolate the buggy code. Here's a snippit:
Code:

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
	}

strong, em, b, i {
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	}

.comments input[type=text], .comments textarea, code {
	font-family: Monaco, "Courier New", Courier, monospace;
	}


/*- Page Structure */

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	color: #444;
	background: #eee;
	text-align: center;
	}

body.lang-ar,
body.lang-fa,
body.lang-he,
body.lang-hi,
body.lang-km,
body.lang-ko,
body.lang-ja,
body.lang-th,
body.lang-zh {
	font-size: 75%; /* Resets 1em to 12px */
	}

#page {
	background: white;
	text-align: left;
	margin: 0 auto;
	padding-top: 20px;
	position: relative;
	border: 1px solid #ddd;
	border-top: none;
	clear: both;
	}

.columns-one #page {
	width: 560px;
	}

.columns-two #page {
	width: 900px;
	}

.columns-three #page {
	width: 950px;
	}

#header {
	position: relative;
	height: 200px;
	background: #3371A3;
	background-position: top right;
	}

.content {
	padding: 0 20px 10px;
	}

body.columns-two #primary-wrapper {
	float: left;
	margin-right: 0px;
	width: 0%;
	}

body.columns-two #primary {
	margin-right: 220px;
	}

body.columns-two .secondary {
	float: right;
	}

#primary {
	position: relative;
	float: left;
	width: 500px;
	padding: 10px;
	}

* html #primary {
	display: inline;
	}

.columns-one .secondary {
	width: 240px;
	border-top: 1px solid #eee;
	}

.columns-three .secondary {
	width: 175px;
	}

.secondary {
	width: 260px;
	float: left;
	font-size: 1em;
	line-height: 1.5em;
	color: #666;
	position: relative;
	padding: 0 10px;
	overflow: hidden;
	}

#sidebar-2 {
	clear: right;
	}

.comments {
	text-align: left;
	margin: 30px 0 0;
	position: relative;
	}

/*- Main Menu in Header */

ul.menu {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
	left: 20px;
	width: 90%;
	}

ul.menu li {
	display: inline;
	margin: 0;
	}

ul.menu,
ul.menu li a {
	padding: 5px 15px 6px;
	}

ul.menu li a {
	font-size: 1em;
	color: white;
	margin: 0;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	}

ul.menu li a:hover {
	background: #333;
	color: #eee;
	text-decoration: none;
	}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_ancestor a,
ul.menu li.current_page_ancestor a:hover {
	color: #333;
	background: white;
	text-decoration: none;
	}

/*- Sidebar Subpages Menu */

.sb-pagemenu ul {
	margin-left: 10px;
	}

.sb-pagemenu ul ul {
	margin-top: 2px;
	}

.sb-pagemenu ul ul .page_item {
	margin-left: 10px;
	padding: 0;
	}

.sb-pagemenu .current_page_item {
	}

Is there something obvious here that causes the issue?

Many Thanks
dale
littleredplanet

Am hoping someone knows the deal here...

I'm setting up a site where html skins feed into PHP to generate the final pages. It's very simple; just header, footer and main.html's for the index page.

The problem:
A DIV to the left of the main body holds a no-repeat background [to place an image in that area]. I want a slight overlap with the main body div; alas the second div contains links, and with even the slightest overlap of these 2 divs, the links go funky ~ you can't select them. I tried z-indexing it to no avail

Does anyone know if there's a route around this conflict?

The page: (URL address blocked: See forum rules)

[koff. am just kicking it of layout wise, so do excuse the lack of actual content!]

thanks for any help [hopey hopey]

my pages have the following structure, which you can see in action at http://www.auroratheatre.org:

Code:

<body>
<div id="wrapper">

   <div id="header">
    header
   </div>

   <div id="content">
       <div id="col"> left nav </div>
       <div id="main"> main center column </div>
       <div id="photocol"> right column </div>
   </div>

   <div id="footer">
      footer
   </div>
</div>
</body>

and the following CSS:
Code:

html, body, #wrapper {
	min-height: 100%;
	width: 100%;
	height: 100%;
	
}

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 80%;
	color:#000;
	background-color:#F8ED97;
	margin: 0 auto;
}
#wrapper {
	padding: 0px;
	background-image:url(../images/back.gif);
	background-position:center;
	background-repeat:repeat-y;
	position: absolute;
}

html>body, html>body #wrapper {
	height: auto;
}

#header {
	text-align: center;
	background-color: #000;
	height: 90px;
	width: 100%;
}

#content {
	width: 775px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 30px;
}

#col {
	width: 130px;
	background-color: #900;
	float: left;
}
#main {
	width: 404px;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	text-align: left;
}
#photocol {
	width: 220px;
	float: left;
}
#footer {
	clear: both;
	background-color:#000;
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: -1px;
}

This works well for compliant browsers, centering the content on the screen and putting the footer at the bottom of the viewport even if the content isn't long. This is what I want.

The trouble is, in IE 5.0 it doesn't center the content, just the background, and everything is thrown to hell. A little scratching around revealed that if you want to center a div in IE 5.0, you need to use text-align: center. OK, but if I DO that, and add a text-align: center to the #wrapper div, then everything is OK in IE 5.0 and Mozilla, but NOT IE 6.0 - modern IE browsers do a weird thing of putting the footer to right of all the content, making the page scroll horizontally, which is ugly as hell. If I remove the position: absolute from the #footer div than that problem goes away, but the footer sits at the bottom of the content, not the viewport, and pages with short content look bad.

Anyone know of a way to have it all ways? Centered content and absolute footer and happy IE 5.0?

Thanks,
-D

Hi im trying to detect ie or mozilla but i cant get it to work.. could
somebody please tell me what is wrong with my code.. thanx in advance !!!

Code:

Code:

<head>  <script language="javascript">
<!-- Begin
browser_version = parseInt(Navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<link REL='stylesheet' HREF="style.css" TYPE='text/css'>") ;
}

else if (browser_type == "Netscape" && (browser_verson >= 4)) {
document.write("<link REL='stylesheet' HREF="stylemozilla.css" Type='text/css'>") ;
}
// --></script>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>---</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<style type="text/css">
<!--
.Style9 {
	font-size: 26px;
	color: #85AC1E;
}
.Style13 {color: #85AC1E}
.Style15 {font-size: 19px}
.Style16 {font-size: 22px}
-->
</style>

</head>

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Hey there, I'm having a bit of a problem and I was wondering if any of the wizards here can help me.

I'm trying to use TinySlideshow (leigeber.com/2008/12/javascript-slideshow/)

I've downloaded TinySlideshow and I've done a little bit of editing to spacing/colouring, and swapped in my own images. I had this as a basic working "demo" page on my own pc, and it worked completely fine in all the popular browsers.

The problem is that I've built the frontpage of my new website, and I want to have a slideshow running to display a preview of the newest articles on my website;

paulietheboss.com

(Please note, none of the links etc work, this is just a dummy page for the time being)

If you view that in Firefox or Chrome you'll see that the Slideshow works just perfectly. There is an issue with Opera but I'll get to that at the end.

However, in Internet Explorer the large images just don't display at all. I've had a couple of coder friends try and troubleshoot it by introducing javascript alerts in order to check variables are being populated properly etc, but they can't find the problem. It doesn't make sense anyway since it works in other browsers.

Thing is, when I have the slideshow on a page by itself it works just fine, even in IE, but when I put it anywhere on this page (even outside of the main page content) it does not display the large image in Internet Explorer.

This leads me to believe that my css is possibly causing a conflict somewhere.. I can't think of anything else it can be.

Has anyone got any ideas I can try to get this working properly in IE? We must have been trying different things for 8-10 hours now and it's driving me insane, especially since it looks just perfect in Firefox!

Sidenote: in Opera on loading, only the first two thumbnails appear, but if you refresh the page it's all fine, any ideas on this one? Not as important, but still...

It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar.

So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks...

Code:

 
 div.divBox1
 {
   width: 286px;
   height: 359px;
   float: left;
 }
 div.divClearFloat
 {
   clear: both;
   height: 0px;  /* For IE Stupidity (it added some spaces after clearing the float) */
   font-size: 1pt;  /* For IE Stupidity (minimum height only work with current font-size somewhere) */
 }
 div.divDottedLineAdvertisementSeperator1
 {
   width: 575px;
   height: 3px;
   background-color: #ff0000;
   font-size: 1pt;  /* For IE Stupidity (minimum height only work with current font-size somewhere) */
 }

Code:

<div class="divBox1">
 <div style="margin-bottom:-360px;">
  <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;">
  <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;">
 </div>
</div>

<div class="divClearFloat"></div>

<div class="divDottedLineAdvertisementSeperator1"></div>

I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this?

Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf

PC Firefox Screenshot:


Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text)

Any help is greatly appreciated

Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another.

Hi, I'm having an issue with Firefox displaying my home page correctly. It previews smaller than other pages in my site even though they all share the same style sheet.

In IE 7 my site previews fine, the issue is with Firefox for some reason the wrapper seems to shrink on the home page and any help or tips to steer me the right way would be greatly appreciated, thanks.

Code:

<---Style sheet---->
body {
	margin: 0;
	padding: 0;
	background-image: url(assests/wrapperimage.jpg);
	background-attachment: fixed;
	
	}


p {
	color: #FFFFFF;
	font-family: "Courier New", Courier, monospace;
	line-height: 20px;
	letter-spacing: 2px;
	font-size: 12px;
	margin-top: 0;
	margin-bottom: 0px;
	
		}
	
h1	{
	font-size: 2.4em;
	color: #00FF00;
	border-bottom-width: thin;
	border-bottom-color: #00FF00;
	border-bottom-style: dashed;
	margin-top: 40px;
	text-align: center;
			}
h2	{
	font-size: 20px;
	color: #CCFF66;
	text-align: center;
		}


#wrapper {
	width: 800px;
	height: 1150px;
	border-right: 2px solid #00FF00;
	border-left: 2px solid #00FF00;
	border-bottom: #000000 10px;
	margin-right: auto;
	margin-left: auto;
	background: #000000;
				}


		
#banner {
	
	height: 250px;
	width: 800px;
				}
#sidebar  {
	float: left;
	width: 190px;
	height: 500px;
	margin-top: 60px;
	margin-left: 10px;
	margin-bottom: 60px;
	padding-left: 10px;
	color: #FFFFFF;
	text-align: center;
	border-color: #999999;
	border-style: thin;
			}
#sidebar li	{
	list-style: none;
	background-image: url(assests/images/images/images/check.jpg);
	background-repeat: no-repeat;
	padding-left: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 6px;
	text-align: left;
	}

#main  {
	float:right;
	width: 500px;
	padding: 5px;
	
					}

ul.nav 	{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 50px;
	padding-left: 0px;
	list-style: none;
	float: left;
	width: 750px;
	letter-spacing: 3px;
	}

ul.nav li	{
	float: left;
	padding-left: 10px;
	margin-left: 15px;
	margin-right: 10px;
				}
ul.nav a	{
	display: block;
	padding-left: 15px;
	padding-right: 5px;
	margin-left: 10px;
	margin-right: 5px;
	background-color: #000000;
	text-decoration: none;
	color: #00FF00;
	text-align: center;
		}
ul.nav a:hover	{
	background-image: url(assests/images/images/images/check.jpg);
	background-position: left;
	background-repeat: no-repeat;
	padding-right: 10px;
	color: #FFFFFF;	
	}

</style>

<----Home page HTML---->
<link href="main.css" rel="stylesheet" type="text/css" />


</head>


<body>
<div id="wrapper">
  
  <div id="banner">
   	  <img src="assests/images/starbanner.jpg" />
       	  
		
		  <ul class="nav">
       	  <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About us?</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contactus.html">Contact Us</a></li>            
    </ul>
       
	</div>	


<div id="sidebar">

<h2>Why have a website?</h2>

<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation. 
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.

Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
<p>	
  
		
</p>
</div>






<div id="main">
<h1>Web Design Studio</h1>
<p>star media is a web design studio located in Troy, Michigan. Our specialty is providing afforadable and customized web design services as well as graphic design and print services. With our competitve pricing and custom tailored marketing programs we will drive customers to your website and through your business doors. Our competitive pricing and quick turn around time in developing websites ensures you have your website up and running as quickly as possible without breaking the bank.

From basic and simple websites to high caliber e-commerce database driven websites Gstar media does it all.  
<h2>Why have a website?</h2>

<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation. 
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.

Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
</div>

</div>
</body>

</body>
</html>

<-------About US HTML------>
<link href="main.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper">
  
  <div id="banner">
   	  <img src="assests/images/starbanner.jpg" />
       	  
		
		  <ul class="nav">
       	  <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About us</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contactus.html">Contact Us</a></li>            
    </ul>
       
	</div>	


<div id="sidebar">
<h2>We offer:</h2>

	
  <ul>
		<li>web design</li>
		<li>web hosting</li>
		<li>e-commerce</li>
		<li>logo design</li>
		<li>business card design</li>
		<li>flyer design</li>
		<li>customized marketing campaigns</li>
		<li>Search engine optimization</li>
		<li>web maintence</li>
		<li>illustration</li>
	</ul>
</p>
</div>






<div id="main">
<h1>Our Promise.</h1>
<p>star media is created with the goal of providing affordable web design service to small business owners and professionals. I graduated from Sheridan college with a degree in business and later went on to get a degree in graphic design. With a strong background in business I understand how to market your business and message effectively to prospective customers that will help spread the awarness of your products and services in order to increase your revenues. I have a strong understanding of graphic design principles with a working knowledge of CSS/XHTML, Photoshop CS3, and Illustrator CS3.
</p>
</div>

</div>
</body>
</html>

Have a page at

www.maxxedmotors.com/damo

There is a div called "container" which is supposed to surround all of the content with a border.

This works fine in IE 6/5.x, but in firefox the border only surrounds the div called "header".

Can anyone tell me where i'm being dumb

Any help greatfully appreciated.

I have a site using CSS for layout

It has one main div called main-column that sits in the middle of the page
and has a background image. Within this there are 3 columns columns.

the trouble is the background of the main column does not show up behind
these three. If you right click it says there is a background image there but nothing is showing.

my css is:

Code:

#main-column
{
width:750px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-image:url(/site_images/bodyback.jpg);
}

#left-column
{
width:150px;
float:left;
}

#contents-column
{
width:450px;
float:left;
}

#right-column
{
width:150px;
float:right;
}

and html is:

Code:

<!-- Start of main column -->
<div id="main-column">

<!-- Start of Left Column Div -->
<div id="left-column">
<? include("../includes/leftnav.php"); ?>
<!-- End of Left Column Div -->
</div>

<!-- Start of contents Column Div -->
<div id="contents-column">
<? include("../includes/main.php"); ?>
</div>

<!-- Start of right Column Div -->
<div id="right-column">
<? include("../includes/rightnav.php"); ?>
<!-- End of right Column Div -->
</div>

<!-- End of Main Column Div -->
</div>

Any idea how I can correct this?