CSS - Css Parse Error

Hello Fellas:

http://global.espritwebdesign.com/muros.html

This webpage will display correctly on IE, Chrome and Safari
But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues?

I'm getting an error on IE5 for Mac on one of my pages, and I've been unable to figure out how to fix it. Here's the page (the problem is in the MPI Status Bar area):

http://medieval.shadowedrealm.com/mpi/index.php

If you have Firefox or IE6 on your computer, I'm sure it works fine. The problem seems to only be on IE5 for mac, where the browser stretches each of the <li>s all the way across the page, making the page extremely wide.

Basically, I tried to set my CSS so that there are 6 rows of three columns each. I'm pretty sure that this has to do with the strictness of the IE5 mac browser, and I've read articles about trying to fix similar problems to this one on various sites, but I still can't figure out how to fix this specific problem.

Here's my CSS code for the status bar:
Code:

.statusbar {width: 532px;
margin-left: 10px;
opacity: .60;
filter: alpha(opacity=60);
-moz-opacity: .60;
display: block;
text-align: left;
background: #000000;
border: 4px ridge #2B5E17;
}

.titleback{height: 20px;
width: 528px;
background: #00032F;
border-top: 1px solid #16570B;
border-bottom: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
}

.titleback ul{padding: 0;
margin: 0;
list-style-type: none;
width: 526px;
}

.titleback li {width: 240px;
float: left;
margin-left: 2px;
margin-top: 2px;
text-align: center;
font-weight: bold;
font-size: 12px;
}

.title{color: #FF0000;
height: 20px;
width: 520px;
padding: 2px;
font-weight: bold;
margin-left: 2px;
text-align: left;
font-size: 13px;
}

.text{width: 520px;
height: 96px;
font-weight: bold;
font-size: 9px;
margin-left: 1px;
}

.text ul{padding: 0;
margin: 0;
list-style-type: none;
width: 520px;
margin-left: 2px;
}

.text li {width: 168px;
height: 16px;
display: inline-block;
float: left;
margin-left: 1px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}

.category {width: 168px;
margin-left: 2px;
margin-top: 1px;
}

.mostrecent{width: 528px;
height: 15px;
padding: 1px;
background: #1F1F1F;
border-top: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
text-align: center;
font-weight: bold;
font-size: 9px;
}

Here's the HTML for the status bar, minus the php code:
Code:

<div class="statusbar">
  <div class="titleback">
    <div class="title">
      MPI Status Bar
    </div>
  </div>
  <div class="text">
    <ul>
    <li>
       <div class="category">
         <a href="http://medieval.shadowedrealm.com/mpi/category.php?Category=Agriculture">
         Agriculture</a>
		 <?php
			//PHP code
		 ?>
	   </div>
    </li>

This code repeats for two more similar <li>s before I close off the <ul> tag, and then I repeat with similar <ul>s five more times before I close off the title <div>. Hopefully this makes sense.

Does anyone know how I can correct for this error within my CSS code?

hello..i have just started to learn css over the web..& was testing out my page in IE & FireFox..& came across same error , my styles are gone in Firefox..

how can i fix it? Site link is provided below. Thanks

-------- testing ------
http://midnite-pandaz.com/visionmag/

My pages work fine in most browsers, but the positioning of the menu bar is wrong in IE7 browsers. I only discovered by chance when someone told me.

The menu bar is offset too the right and upwards, part covering the logo.

http://www.firstpokertips.co.uk/

I have looked and looked but cant find why this would be.

In other browsers it is fine. Thanks for any advice.

I have been designing for a few years now, and never come across this error when I use w3c CSS validation, but when I attempted to validate my CSS for a wordpress theme I've created, I received the following error:
Quote:
Parse Error Lexical error at line 1, column 3. Encountered: "D" (68), after : "<!"

My CSS is valid, as I keep it really simple, but from a quick Google search, it would seem that w3c CSS validation is attempting to validate my XHTML before my CSS?
Does anyone have any suggestions (aside from pasting the CSS directly into the validation page)?
Here is my CSS:
Code:

body {
background : #003 url(images/bground.png) repeat-x;
color : #fff;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 11px;
margin : 0;
padding : 0;
text-align : center;
}
a {
color : #66f;
text-decoration : none;
}
p {
line-height : 14px;
margin : 0;
padding : 0 0 8px 0;
}
h1 {
background : url(images/h1-logo.png) no-repeat;
color : #300;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 48px;
height : 48px;
margin : 0;
padding : 0 0 0 56px;
}
#index-header {
height : 48px;
margin : 0;
padding : 24px;
text-align : left;
}
#index-header h1 a, #index-header a {
color : #300;
text-decoration : none;
}
.hdr1 {
float : left;
}
.hdr2 {
float : right;
}
.hdr2 ul {
font-size : 12px;
font-weight : bold;
list-style : none;
}
#navigation {
background : url(images/navbar.png) repeat-x;
height : 32px;
}
.nb {
float : left;
}
.nb2 {
float : right;
}
ul#navbar {
height : 16px;
margin : 0 12px;
padding : 0;
}
ul#navbar li {
float : left;
font-size : 13px;
font-weight : bold;
line-height : 16px;
list-style : none;
margin : 0;
padding : 8px;
}
ul#navbar li a {
color : #333;
text-decoration : none;
}
form#searchform {
float : right;
margin : 0;
padding : 6px;
}
form#searchform #s {
background : inherit;
border : 1px solid #333;
}
form#searchform #searchsubmit {
background : inherit;
border : 0;
color : #333;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 13px;
font-weight : bold;
}
#index-wrapper {
border : none;
margin : 0;
padding : 12px;
width : 100%;
vertical-align : top;
}
#slideshow {
background : url(images/Natural-Wonders.gif) no-repeat;
height : 300px;
width : 400px;
}
#recentposts {
padding : 0 0 0 12px;
text-align : justify;
width : auto;
vertical-align : top;
}
.index-post {
background : #306 url(images/post-h2.png) repeat-x;
margin : 0 0 12px 0;
padding : 6px;
}
.index-post h2, .index-post h2 a {
border-bottom : 1px solid #666;
color : #fff;
font-size : 16px;
font-weight : bold;
margin : 0 0 4px 0;
padding : 0;
text-decoration : none;
}
.postmetadata {
border-top : 1px solid #666;
color : #666;
font-size : 10px;
}
.tags {
margin : 0;
padding : 0;
vertical-align : top;
width : 400px;
}
#footer {
border-top : 1px solid #666;
margin : 12px 0;
padding : 12px 0 0 0;
}
#footer a {
color : #999;
text-decoration : none;
}

And just for good measure, here's the portion of the <head> tag that it is referring to:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

Use relative rather than absolute units in CSS property values. WCAG1 AA 3.4 ,
Absolute units are cm, mm, in, pt and pc, as well as absolute size keywords like x-small. Partially sighted users often use the "large fonts" mode of Windows, which makes each pixel larger than usual. This usually causes problems with pixel based layouts, which also perform badly on handheld and widescreen displays. Percentage values "stretch" according to screen size and work on a large range of display sizes.


hello again folks,

Man I am lost on this warning any help? Below is my print.css file

body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
width: auto;
background-position: center center;

}
a {
text-decoration : underline;
color : #0000ff;
}



Thanks once again for all your help!

whonoes

The site looks okay in ie6, but in ie8 it's off. Could someone take a look?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html xmlns=
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Northwest Open Access Network one of the largest in the region with Internet, Ethernet and TDM at service levels more advanced than in some metro areas." />
<meta name="keywords" content="ASP, ISP, ILEC, CLEC, IXC, RSP, DNS, DWDM, Northwest Open Access Network, Noanet" />
<title>Noanet Network Services</title>
<link href="dictionary.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding: 0px; margin: 0px; background-color: #0E0E0C">
<div style="width: 100%; height: 183px; background-color: #0E0E0C">
<div style="background-image: url(images/2-14.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 183px">
<div style="width: 140px; height: 183px;float:left;"></div>
<div style="width: 549px; height: 183px;">
<div style="height:15px;"></div>
<div style="margin-top:7px; margin-bottom:7px;"><a href="index.htm" class="menu">HOMEPAGE</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="overview.htm" class="menu">OVERVIEW</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="tech-support.htm" class="menu">TECH SUPPORT</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="Contact%20Options.htm" class="menu">CONTACT OPTIONS</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="Network-Services.htm" class="menu">NETWORK SERVICES</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="Infrastructure.htm" class="menu">INFRASTRUCTURE</a></div>
<div style="margin-top:6px; margin-bottom:0px;"><a href="Press-info.htm" class="menu">PRESS INFO</a></div>
</div>
</div>
</div>

<div>
<div style="background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 932px; background-image: url('images/nn_02-2-long.jpg'); background-repeat: no-repeat; background-attachment: scroll;">
<div style="margin-right: 150px; margin-left:290px;margin-top:60px; text-align:justify;">
<h1>Network Services</h1>
NoaNet delivers leading-edge technologies across an extensive
high-speed backbone transport network to wholesale providers
such as ILECs, CLECs, IXCs, RSPs, ISPs, ASPs and cable companies.<br />
&nbsp;<br />
NoaNet service offerings include: <br />
<br />
<span class="style6">IP services</span><br />
NoaNet Internet features path-protected, unaggregated transport
across the NoaNet backbone to the <a href="POP.htm" title="Point Of Presence. The IXC equivalent of a local phone company's central office. The POP is a long distance carrier's office in your local community (defined as your LATA). A POP is the true place your long distance carrier, called an IntereXchange Carrier (IXC), terminates your long distance lines just before those lines are connected to your local phone company's lines or to your own direct hookup. Each IXC can have multiple POP's within one LATA. All long distance phone connections go through the POPs.">PoP</a>
closest to the customer. <br />
<ul>
<li>At least four multi-homed upstream tier-one providers
in Seattle and Portland </li>
<li>Automatic fail-over within 50ms of interruption </li>
<li>IP Addressing, <a href="BGP.htm" title="Border Gateway Protocol is a Gateway Protocol which routers (other non-router devices also maybe involved as intermediaries) employ in order to exchange appropriate levels of routing information.">BGP</a>
routing and <a href="DNS.htm" title="Domain Name Server. Domain Name Servers, also known as resolvers, are a system of computers which convert domain names into IP addresses,which consist of a string of four numbers up to three digits each.">DNS</a>
</li>
<li>IPV6 Support </li>
</ul>
<p /> <span class="style6">TDM transport circuits</span><br />
NoaNet can design and deliver complex multi-point <a href="TDM.htm" title="Time Division Multiplexing. A technique for transmitting a number of separate data, voice and/or video signals simultaneously over one communications medium by interleaving a piece of each signal one after another.">TDM</a>
rings over SONET, as well as two-point circuits.
<ul>
<li>Equivalent to DS-3 (<a href="STS-1.htm" title="Synchronous Transport Signal level 1. An electrical signal that is converted to or from Sonet's optically based signal; equivalent to the OC-1 signal of 51.84 Mbps.">STS-1</a>
or 51.84 Mbps) and <a href="OC-3.htm" title="Optical Carrier Level 3. A SONET channel equal to three DS-3s, which is equal to 155.52 Mbps. ">OC-3</a>
through <a href="OC-192.htm" title="Optical Carrier-level 192. SONET channel of 9.953 thousand million bits per second (Gbps). How you calculate the capacity of an OC-192 is to multiply times 192 by 51.840 million bits per second and thus you get 9.953 thousand million bits per second--gigabits per second.
">OC-192</a> </li>
<li>Protected or Single-Thread configurations </li>
</ul>
<p /> <span class="style6">Ethernet services</span> <br />
NoaNet provides scalability, security and ease of configuration
over a resilient Gigabit Ethernet network.
<ul>
<li>Connect two or more sites that use Internet, data, video
and/or VOIP applications </li>
<li>Billed on an "pay as you grow" basis, with the ability
to <a href="burst.htm" title="A method of transmission that combines a very high data signaling rate with very short transmission times. ">burst</a>.
</li>
<li>Capacity is guaranteed and unaggregated </li>
<li>Ethernet WANs can be designed to handle 10Mb to <a href="10GigE.htm" title="10 Gigabit Ethernet. Positioned as a high-speed technology for MAN (Metropolitan Area Networks) applications, 10GbE is a developing IEEE 802.3ae standard that will enable networks to scale from the traditional 10 Mbps beyond the common 100 Mbps and increasingly common 1 Gbps, up to 10 Gbps.">10GigE</a>.
</li>
</ul>
<p /> For more information about our Network Operations Center,
please refer to the <a href="noc.htm">Technology Center overview</a>. Please review
the NoaNet Terms and Conditions in the <a href="documents/MSA_original_72903.pdf">Master
Services Agreement (MSA)</a> which is the basis for all services.
Contact NoaNet for additional information.
</div>
</div>
</div>

</body>
</html>

I'm new to the forums here and wondering if anyone can help me out with a little problem I'm getting.

http://brandonblume.commerceculture.co.uk/

What I want is for the top banner to be on top of everything and the left navigation menu to be at the left of everything and for the rest of the page to be in whatever's left of the browser space. I want the news text boxes to fit 100% into the extra space. Firefox does this fine but when you view it in Internet Explorer the news boxes take up 100% of the space plus some additional space of the exact same x dimensions as the navigation bar. So you have to scroll right to see the whole page. A workaround is to limit the size of the news boxes but I don't really want to do that. Also, the footer notes on my webpage are centered only according to the browser window, it seems, and not according to the blank space area.

Here's my current sheet. ul.banner is the top banner, ul.navbar is the left menu, and ul.body is the extra space.

Code:

  body {
    margin: 0;
    padding: 0;
    font: 10pt "Helvetica";
    color: #BCCACE;
    background: url(fade-to-black.gif) #161616;
    background-repeat: repeat-x;
    background-position: 0px 74px;
    scrollbar-face-color: #14192A;
    scrollbar-highlight-color: #303F56;
    scrollbar-shadow-color: #303F56;
    scrollbar-3dlight-color: #14192A;
    scrollbar-arrow-color: #9CA9AD;
    scrollbar-track-color:  #161616;
    scrollbar-darkshadow-color: #14192A; }
  a:link {
    text-decoration:none;
    color: #BCCACE }
  a:visited {
    text-decoration:none;
    color: #BCCACE }
  a:hover {
    text-decoration:none;
    color: #eeeeee; }
  body font.highlight {
    font-weight: bold;
    font-style: italic; }
  body font.small {
    font-size: 85% }
  body font.big {
    font-size: 120%;
    font-weight: bold }
  ul.banner {
    padding-left: 0;
    padding-top: 4px;
    margin-top: 0;
    margin-left: 0;
    top: 0;
    left: 0;
    background: url(new_title_bg.gif) black;
    background-repeat: repeat-x;
    width: 100%; }
  ul.navbar {
    position: absolute;
    margin-top: 75px;
    margin-left: 0px;
    padding-left: 0px;
    top: 0;
    left: 0;
    list-style-type: none;
    color: #BCCACE;
    width: 11.5em }
  ul.navbar li.heading {
    text-align: center;
    font-weight: bold;
    font-style: italic;
    height: 16px;
    background: url(new_title_bg2.gif) #17284F;
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0.18em;
    border-top: 1px solid #17284F;
    border-left: 1px solid #17284F;
    border-right: 1px solid #17284F;
    border-bottom: 1px solid #445372; }
  ul.navbar li {
    background: #151D36;
    margin: 0;
    padding: 0.18em;
    border-left: 1px solid #445372;
    border-right: 1px solid #445372 }
  ul.navbar li.sub {
    color: #445372;
    font-size: 80%;
    font-style: italic;
    background: #151D36;
    margin: 0;
    border-left: 1px solid #445372;
    border-right: 1px solid #445372 }
  ul.navbar li.worldworx {
    color: #BCCACE;
    text-align: center;
    font-size: 80%;
    background: #151D36;
    margin: 0;
    border-left: 1px solid #445372;
    border-right: 1px solid #445372;
    border-bottom: 1px solid #445372 }
  ul.navbar li.bottom {
    border-left: 1px solid #445372;
    border-right: 1px solid #445372;
    border-bottom: 1px solid #445372 }
  ul.body {
    float: right;
    position: absolute;
    top: 74px;
    left: 11.5em;
    right: 0;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    margin: 0; }
  ul.body table.news {
    border: 2px solid #172641;
    width: 100%;
    background: black; }
  ul.body td.head {
    background: url(head_bg.gif) #151D36;
    background-repeat: repeat-x;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0;
    border-top: 1px solid #303F56;
    border-left: 1px solid #303F56;
    border-right: 1px solid #303F56;
    height: 32px;
    margin: 0px;
    top: 0px;
    bottom: 0px;
    font-size: 13pt;
    font-weight: bold; }
  ul.body td.news {
    background: #14192A;
    border: 1px solid #303F56;
    margin: 1em;
    padding: 1em; }
  ul.links {
    position: absolute;
    padding-left: 2em; }
  ul.gamelinks {
    white-space: nowrap;
    padding-left: 30em; }

I keep getting an error but only when I run the site in IE8:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Timestamp: Fri, 13 Mar 2009 16:59:31 UTC

Message: Syntax error
Line: 1
Char: 25
Code: 0

It keeps pointing to this line of code at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But if I don't use that the Divs and some CSS seem to break.

With or without that code it works great in FireFox. I have no idea what's going on with this.

I'm working on a project right now using multiple panels on a site. The idea I am moving forward with has a panel of a solid color with a small 15x15 image in 3 of the corners.

I have the basic concept down of staticly moving an image to the three corners, but when I then assign a background color to the container it does not fill the space between the images, only the center. Any ideas/direction would be great!

Code:

<div id ="filterDIV" style = "background-color: #666666;">
	<div style="position:absolute; top:0;right:0; width:15px; height:15px; background-image:url(tr.gif);  float:left"></div>
	<div style="position:absolute; bottom:0;left:0; width:15px; height:15px; background-image:url(bl.gif);  float:left"></div>
	<div style="position:absolute; bottom:0;right:0; width:15px; height:15px; background-image:url(br.gif);  float:left"></div>
	test
</div>

Hi,

I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong.

This is my CSS:

PHP Code:
 body{
margin: 0 auto;
}

#wrapper{
width: 900px;
margin: 0 auto;
} 





Any ideas?

I've been fixing errors for all of today trying to get my website to work in FF and I.E. It was all working fine until I refreshed I.E after implementing a myspace embedded link.

If you're a I.E users you can see it by visiting (okay, I was going to post a link to my website so you could see, but It seems the forum rules prevents me from doing so )

Heres an image.
Code:

http://i4.photobucket.com/albums/y102/Macceth/error.jpg

EDIT: For some reason the image isn't showing up either... but I can see it when I click preview... is posting images going againsted the rules aswell for first time posters? :S

and here are the html code and styles.css code.

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">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="keywords" content="Metal, Heavy Metal, Rock, Southern Rock, Music, Songs, Band, Want, For, Destruction, Want For Destruction, Destruction, UK" />
      <title>Want For Destruction | The Official Want For Destruction Site</title>
      <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
      <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    
    <div id="container">
      
      <div id="header">
        <h1>Your Logo</h1>
        
      </div><!--ender header-->
      
     <div id="nav1"class="cms-editable">
<ul id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="band.htm">Band</a></li>
<li><a href="events.htm">Events</a></li>
<li><a href="music.htm">Music</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
    
      <div id="main">
        <div id="primary">
          <div id="header2" class="cms-editable">
<h2>EVENTS!</h2>
</div>
          
          <div id="content1" class="cms-editable">
<p><strong>Upcoming 2011 events!</strong></p>
<p>January 21st - The Flying Dutchman - Friday at 21:00<br />February 21st - Seabreeze - Saturday at 21:30</p>
</div>
          
        </div><!--end primary-->
      </div><!--end main-->
    </div><!--end container-->
    
  </body>
</html>

Code:

html {
background: #000000 url(images/BG.jpg) no-repeat center top;
}

body {
	text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}

a {
text-decoration: none;
*/ color: white */
}

a:hover {
text-decoration: underline;
}

a.selected {
font-weight: bold;
}

p {
color: #43433f;
line-height: 21px;
}

h2 {
color: #363era;
font-size: 31px;
}

li {
list-style: none;
}

img {
border: 0px;
}

#container {
position: relative;
margin: auto;
width: 971px;
text-align: left;
}

#header {
position: relative;
}

#header h1 {
text-indent: -9999px;
background: url(images/header.png) no-repeat center;
line-height: 251px;
}

#nav {
background: url(images/navBG.png) repeat-x;
overflow: hidden;
height: 40px
margin: 0 0 6px 0;
padding: 0 0 0 31px;
}

#nav li {
float: left;
line-height: 40px
}

#nav li a {
border-right: 1px dotted #959595;
padding: 0 1em;
color: white;
}

#nav li a.first {
padding-left: 0;
}

#main {
position: relative;
background: url(images/mainBG.png) repeat-y;
padding-bottom: 4em;
}

#primary h2 {
padding: 25px 0 15px 0;
margin-left: 38px;
margin-right: 38px;
border-bottom: 2px dotted #aab391;
color: white;
}

#primary p {
padding-left: 38px;
padding-right: 38px;
color: white;
font-size: 75%;
}

#content1 p {
border: 0px;
}

#padfix {
padding-left: 38px;
padding-right: 38px;
padding-top:0px;
padding-bottom:5em;
float:left;
} 

Sorry for being a nuisance I am kinda new to all of this stuff. Any help would be greatly appreciated!

Hi all, great forums! Yall have helped me so much, never registered though so thanks

Anyways I can't seem to find the cure for this problem.

So far it works perfectly in firefox, IE 6 not so great. Each box should be spaced equally from the edges and each other. In IE6 there is a large gap on the left side.

I've tried several combinations of margins, padding, and changing the size of the content box itself, nothing works, screws everything up in one or the other browsers.

Here is the code: ( for the content box, it was supposed to be 676px wide but I had to have 2 subtracted for the border. In the end it needs to be a total of 676px wide in order to fit with the header.)

CSS:

Code:

html, body {
    background: #131414 url(images/bgslice.jpg) repeat-x top center;
	font-family: arial,verdana,sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	color: #333333;
	text-align: center;
	}

#content {
	margin-left: auto;
	margin-right: auto;
	padding: 0;
    background: #EDEDED;
	height: 400px;
	width: 674px;
	max-width: 674px;
	border: 1px solid #2C383C;
	text-align: left;
}
.bluebox {
    border: 2px solid #2C383C;
    margin: 8px 0 0 8px ;
	padding: 0;
	float: left;
}

HTML:
Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"(URL address blocked: See forum rules)">

<html xmlns="(URL address blocked: See forum rules)">
<head>

	  <title>The Party Quest - Are you coming out tonight?</title>
	  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	  <style type="text/css" media="all">@import "css.css";</style>

</head>
<body>
  <div id="content">
     <div class="bluebox" style="width: 242px; height: 145px;">
       test
     </div>
     <div class="bluebox" style="width: 242px; height: 145px;">
       test
     </div>
     <div class="bluebox" style="width: 146px; height: 145px;">
       test
     </div>
  </div>
</body>
</html>

Thank you so much for any help you guys can supply!