CSS - Netscape Displaying Page Wrong First Time, But Perfect After Reloading

Can anyone tell me why my popup menus are displaying with a 40 or 50 px wide gap between them and the top level menu on this page?

The link

Hover over "For Professionals" in the left hand navigation to see the problem.

I am new to javascript. This is a menu created by DMAPI menu builder. I am not new to CSS. I suspect that this is a CSS problem. In Firebug I can see padding and margins but cannot find where they are being defined. I have tried to add margin: 0; and padding: 0; but they are getting overridden.

Any help would be appreciated.

I am developing a prototype site and have hand coded it using HTML 4.x as a base and CSS for styling

However allthough the site runs fine on IE7, it does not load well on FF and Chrome. I know the browsers handle css differently but have no idea what code to change

http://rich-carey.com/aufdw/


Any Ideas or pointers?

Edit: Problem solved

This topic can be locked or deleted. I tried everything and figured out the problem

I was screwing around doing some brain storming on an idea for one of my web pages when I accidently hit save. It wouldn't be an issue except it saved the changes I made to my style.css as well! I've been working on the site for a while finishing the last page and now this happens. All my text is the wrong size and is drifting in some spots. I have the an older style.css file I saved like a month ago, however I've made too many changes since then to implement it. I was looking for a way to take the current style.css file I have now and the old style.css and see all the entries that have changed, like debug them. There's so many lines I'd hate to go line by line, I'm using Dreamweaver CS4, however if there is another bit of software that can help me compare the two files and see the differences between the two that would be awesome! Any ideas?

Hello,

I have a page with a large table. The problem is that when you print the page, the browser will add a page break in the middle of a row. I would like to force no-page-breaks for each row, so when you print, it will never print half a row on one page and the other half on the next page. I am assuming css can do this, but I have no idea where to start. I can look up the specifics, can someone just point me in the right direction?

It is possible (although support seems sketchy) to prevent tables from breaking:
Quote:
table {page-break-inside: avoid;}



BUT... the css definitions don't seem to apply to non-block-elements (such as tr and th). Although the CSS validator does not seem to complain, most browsers don't seem to support it. This feature seems to important to have been neglected by WC3, so what am I missing?

My final option (and I shutter to think about it) is to place a non-breaking table inside each row. That seems (to me) very silly, but perhaps it is a way around the problem. It has an additional problem that the td breaks won't line up. The table won't lok much like a table anymore. I am looking for a much happier solution.

Thanks

I'm having a bit of trouble trying to figure out the problem he

http://www.lovemeforme.org/alecia

as you can see, in IE the main content is over about 3px, but in firefox it's perfect.. i'm a perfectionist and it's really bothering me.

Thanks in advance!

Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE

http://drowninginmytears.org/store/blah.html

thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how..

this is my css:
Code:

body
    {
	margin: 0px auto;	
    background-color: #BFD1E1;
    text-align: center;
    padding: 0px;
	background-position: top;
    }

#wrap
    {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 679px;
    }
	
#hearts
	{
	background-image: url(hearts.jpg);
	height: 44px;
	width: 43px;
	position: absolute;
	margin-left: 490px;
	}
	
#girl
	{
	background-image: url(girl.jpg);
	margin-top: 190px;
	height: 358px;
	width: 142px;
	margin-left: 10px;
	}
	
h4 {
	font-family: Arial, verdana, tahoma;
	text-transform: uppercase;
	font-size: 1.0em;
	text-align: right;
	font-weight: bold;
	color: #5886B2;
	letter-spacing: 0px;
	padding: 10px 20px 0px 0px;
	margin: 0;
}

h5 {
	font-family: verdana, Arial, tahoma;
	text-transform: uppercase;
	font-size: 0.7em;
	text-align: right;
	line-height: 5px;
	font-weight: bold;
	color: #C3D4E3;
	letter-spacing: 3px;
	padding-right: 17px;
	margin: 0;
}

#navigation
	{
	font-family: verdana, Arial, tahoma;
	text-transform: uppercase;
	font-size: 0.54em;
	text-align: left;
	font-weight: bold;
	color: #769DBF;
	letter-spacing: 1px;
	margin-top: 25px;
	margin-left: 20px;
	position: absolute;
}
	
#toptitle
	{
	background-position:top;
	height: auto;
	width: 768px;
	background-image: url(bg.jpg);
    padding: 0px;
	margin: 0px;	
	}
	
#blueline
	{
	height: 6px;
	width: 752px;
    background-color: #D8E8F8;
    margin-top: 8px;
	margin-left: 8px;
	margin-right: 0px;
	position: absolute;
	}
	
#headerimage
	{
	height: 173px;
	width: 752px;
	background-image: url(main.jpg);
    margin-top: 15px;
	margin-left: 8px;
	position: absolute;
	}

#main {
	margin-top: 100px;
	width: 768px;
	margin: 20px 0;
	margin-left:40px;
	display: inline;
}

#header
    {
	background-image: url(top.jpg);
	vertical-align: bottom;
    height: 10px;
    width: 768px;
	margin-top: 20px;
    padding: 0px;
    }
	
#bottom
    {
	background-image: url(bottom.jpg);
	vertical-align: bottom;
    height: 17px;
    width: 768px;
	margin-top: 0px;
    padding: 0px;
    }
	
p
    {
	text-align: justify;
    color: #555;
    margin-top: 0px;
    margin-bottom: 9px;
    }

.caps
    {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    }

ol
    {
    margin: 0;
    padding: 0;
    }
    
ul, li
    {
    color: #666;
    list-style-type: none;
    border: 0;
    margin: 0;
    padding: 0;
    }

a:link, a:visited
    {
    color: #FA65CD;
    text-decoration: none;
    }

a:hover
    {
    color: #FD92E0;
    }

a:active
    {
    color: #FB7FD7;
    }
	
#container
    {
    position: relative;
    margin: 0 auto;
    text-align: left;
    background: url(bgfront.gif) repeat-y;
    width: 679px;
    }

#content
    {
    padding: 28px 20px 0 20px;
    min-height: 200px;
    }

can anyone help? thanks!

I think all I need is a new set of eyes. I have an
XHTML-Strict-All-Div-Perfect
layout for a new site I am working on.

I have all of the heights and widths and alignments perfect. Everything was supurb until I added content that extends greater than 100% of the viewport. Typical story, I know.

The thing is, I have made hundreds of web sites and came across and fixed that problem. I've used min-height, I've made sure to include all containers like html and body.. I am pretty sure I've done it all.

So what's up? Please take a look at the site and tell me what you think.

Realms Of Role Playing

The middle content column on our page, (code shown below) is not displaying in IE5 and IE6. Any ideas as to why?

see page at federalacqusitionservice
Code:

start code

-->
</style>
</head>
<body>
<!-- Generated at () -->
<div id="container" >
<div id="banner" >
<div align="left"><img src="(URL address blocked: See forum rules)" width="400" height="63" /><img src="(URL address blocked: See forum rules)" width="60" height="63" />
<script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 468x60, created 7/17/08 */
google_ad_slot = "7082054352";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="()">

</script></div>
<h1><a href="()">Home</a> | advertise | about us | Contact US</h1>

</div>
<div id="outer" >
<div id="inner">
<div id="left" >
<h2><img src="()" />&nbsp;</h2>


<div align="left">
<script type="text/javascript"
src="()"></script>
<br />
<table width="195" border="0">
<tr>
<td><div align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 120x90, created 7/17/08 */
google_ad_slot = "9592010100";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="(URL address blocked: See forum rules)">
</script>
</div></td>
</tr>
</table>

<br />
<img src="()" alt="Featured Links" width="200" height="34" /><br />
<br />
<table width="195" border="0">
<tr>
<td> <div align="center">
<img src="()" width="185" height="45" /><br />
<br />
<img src="()" width="185" height="45" /><br />
<br />
<img src="()" width="185" height="45" /><br />
<br />

<script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 120x240, created 7/14/08 */
google_ad_slot = "0661630514";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="()">
</script>
</div></td>
</tr>
</table>
<br />
<br />
<br />
</p>
</div>
</div>

<div id="right" >
<h2><img src="()" /></h2>
<pre class="style1"><h2><a href="()">(URL address blocked: See forum rules)</a><br />Printing, Promo Items, WebSites
<a href="http)">()</a><br />Import to the US with confidence
<a href="httprules)">linkstodc.com</a><br />Washington, DC business <br />and living directory.<br /><a href="(URL address blocked: See forum rules)">stickerrocket.com</a>
custom sticker, stock labels
<a href="(rules)">hostingone.ca</a><br />Affordable web hosting
<br />
Become a sponsor to
federalacqusitionservice.com
click here</h2>
<br />
<br /><script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 120x90, created 7/14/08 */
google_ad_slot = "4200878981";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="(URL address blocked: See forum rules)">
</script>
<br /><br />
<br />
<br />

</div>

<div id="content">
<h2><img src="(rules)" width="546" height="34" /><br />
</h2>
<table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)">
<tr>
<td width="268" height="127" valign="top"><table width="234" height="42" border="0" align="center">
<tr>
<td width="228" height="38" valign="top"> FederalAcquisitionService.com is the link directory for Federal, State, Local and non-profit contracting sources. </td>
</tr>
</table>
<table width="234" border="0" align="center">
<tr>
<td width="134" valign="top">Check back regularly to see an even greater number of Federal acquisition links.</td>
<td width="90"><img src="(URL address blocked: See forum rules)" alt="US Link Directory" width="90" height="60" /></td>
</tr>
</table> </td>
<td width="267" valign="top"><table width="234" height="42" border="0" align="center">
<tr>
<td valign="top">Reach your clients through sponsored <a href="httpURL address blocked: See forum rules)">text links</a> and <a href="httprules)">featured links</a> on FederalAcquisitionService.com. <br /></td>
</tr>
</table>
<table width="234" border="0" align="center">
<tr>
<td width="134" valign="top">Text links start at only $9.95 per month, featured image links start at $99 per year.</td>
<td width="90"><img src="(forum rules)" alt="Premium Links" width="90" height="60" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="14" colspan="2" valign="top"><div align="center"><script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 468x60, created 7/17/08 */
google_ad_slot = "6799108791";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="(URL address blocked: See forum rules)">

</script
>
<br />
</div></td>
</tr>
</table>
<img src="(rules)" width="546" height="34" />
<table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)">
<tr>
<td valign="top"><div align="right"><a href="!!tophits!!"><img src="(rules)" width="82" height="35" border="0" /></a><a href="!!whatsnew!!"><img src="(URL rules)" width="50" height="35" border="0" /></a><a href="!!rgs_login!!"><img src="(rules)" width="57" height="35" border="0" /></a><a href="!!add_url_link!!"><img src="(URL rules)" width="73" height="35" border="0" /></a><a href="!!add_premium_url_link!!"><img src="( See forum rules)" width="136" height="35" border="0" /></a><a href="!!register!!"><img src="(rules)" width="72" height="35" border="0" /></a><br />
<br />
</div>
<form method="POST" action="(: See forum rules)">
<p align="center"><input type="text" name="keywords" size="33"><input type="submit" value="Search"
name="B1"> <a href="(forum rules)">Advanced</a></p>
</form>
<div align="left">!!psdata!!<br />
<br />
</div></td>
</tr>
</table>
<h2><br />
<br />
<br />
</h2>
</div>
</div>
<!-- end inner -->
</div><!-- end outer -->
<div id="footer"><h1 align="center">C federalacquisitionservice.com 2008</h1>
</div>

</div><!-- end container -->
</body>
</html>
Code:

end code

Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox.

Site: www.measureoffaith.net
Stylesheet: www.measureoffaith.net/style.css

Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet.

Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well.

Thanks so much.

index.html w/ stripped content:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Measure of Faith on Aerie Peak
    </title>

<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="banner">

    </div>
    <div id="container">
      <div id="navigation">
      <!-- Start of Navigation Bar (NavigationBar2) -->
        <table id="NavigationBar2" border="0" cellspacing="0"
        cellpadding="0" nof=
        "NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F  YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
        width="140">
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton1) -->
              <a href="#" onmouseover=
              "F_roll('NavigationButton1',1)" onmouseout=
              "F_roll('NavigationButton1',0)"><img id=
              "NavigationButton1" name="NavigationButton1"
              height="30" width="140" src=
              "images/Home_Hbutton_on2.gif" onload=
              "F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
              border="0" alt="Home" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton2) -->
              <a href=
              "/eqdkp/viewnews.php"
              onmouseover="F_roll('NavigationButton2',1)"
              onmouseout="F_roll('NavigationButton2',0)"><img id=
              "NavigationButton2" name="NavigationButton2"
              height="30" width="140" src=
              "images/Raid_News_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
              border="0" alt="Raid News" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton3) -->
              <a href="charter.html" onmouseover=
              "F_roll('NavigationButton3',1)" onmouseout=
              "F_roll('NavigationButton3',0)"><img id=
              "NavigationButton3" name="NavigationButton3"
              height="30" width="140" src=
              "images/Charter_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
              border="0" alt="Charter" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton4) -->
              <a href=
              "roster.html"
              onmouseover="F_roll('NavigationButton4',1)"
              onmouseout="F_roll('NavigationButton4',0)"><img id=
              "NavigationButton4" name="NavigationButton4"
              height="30" width="140" src=
              "images/Roster_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
              border="0" alt="Roster" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton5) -->
              <a href=
              "/eqdkp/listmembers.php"
              onmouseover="F_roll('NavigationButton5',1)"
              onmouseout="F_roll('NavigationButton5',0)"><img id=
              "NavigationButton5" name="NavigationButton5"
              height="30" width="140" src=
              "images/DKP_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
              border="0" alt="DKP" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton6) -->
              <a href="/phpBB2/index.php"
              onmouseover="F_roll('NavigationButton6',1)"
              onmouseout="F_roll('NavigationButton6',0)"><img id=
              "NavigationButton6" name="NavigationButton6"
              height="30" width="140" src=
              "images/Forums_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
              border="0" alt="Forums" /></a>
            </td>
          </tr>
        </table>
      </div>

      <div id="content">
        <div class="newspost"><div class="wraptitle">
				<p class="subtitle">- I... AM... UNLEASHED!</p>
				<p class="thetitle">MAGTHERIDON DOWN</p></div>
          <div class="newsdate">
            28.04.2007 by <img src="images/icons/mar.png" />
          </div>
          <div class="newscontent">
            Magtheridon proved to be no match to the professional
            button clicking skills of MoF. Wiping a few times in
            order to fine tune the button clicking, we emerged
            with victorious with zero deaths and some bad loot.
          </div>
					<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
        </div>

...clipped content...

      </div><div style="clear: both;">
    </div>
    <div id="footer">
      &nbsp;
    </div>
  </body>
</html>

style.css: Code:

html,body { height: 100%; }

body{ 
 background: #000000 url('background-image.jpg') repeat-y;
 margin: 0;
 height: 100%;
}

.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}

.wraptitle{
float: left;
height: 79px;
}

p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}

p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}

.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}

.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}

p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}


a:link{
 text-decoration: none;
}

a:hover{
 text-decoration: underline;
}

a:visited{
 text-decoration: none;
}

a:active{
 text-decoration: none;
}

#banner{
 background-image: url('header-one.jpg');
 height: 200px;
 width: 943px;
 padding: 0;
}

h5.styling{
 color: #555555;
 font-family: trebuchet ms, tahoma;
 border: 0;
 padding: 8px; 
 margin: 0;
}

p.styling{
 color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 8px; 
 margin: 0;             
 text-align:justify;
}

td.styling{
 font-color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 0; 
 margin: 0;             
 text-align:justify;
}

html > body #navigation{
 background-image: url('left-runner.jpg');
 font-size: 0;
 float: left;
 width: 140px;
 min-height: 100%;
 padding: 0 0 0 4px;
 line-height: 0;
 border: 0;
 margin: 0;
}

html > body #content{
 background: #EDF2F5;
 float: right;
 width: 796px;
 min-height: 100%;
 padding: 0;
 border: 0;
 margin: 0;
}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
.clearfix {
    display:block;
}
* html .clearfix {
    height:1px;
}


#container{
 width: 940px;
 height: 100%;
 margin: 0;
 padding: 0;
 border: 0;
}

#footer{
 background-image: url('bottom-frame.jpg');
 width: 943px;
 height: 47px;
}

Thanks for taking the time to read my question.

I have 2 types of pages. One with 2 colums and one with 3. If I have only one row, it all works out fine. When I add subsequent rows, the page gets all messed up.

Why?

How do I make "contentleft" always be on the lefthand side?


CSS

Code:

body {
  text-align:center;
  margin-top: 0px;
  background-color: #d8d8d8;
}

a:visited {
color:#c0c0c0;
}
a:hover {
color:red;
}
a {
color:white;
}

#frame {
width: 640px;
text-align: center;
}

#main {
background-color: #6699cc;
width: 640px;
}

#main p.pagetitle {
color: white;
font-size: 32;
}

#main p.title {
color: white;
font-size: 22;
text-align: left;
text-decoration: underline;
font-weight: bold
}

#sub {
background-color: #6699cc;
width: 640px;
padding-left: 20px;
padding-right: 20px;
}

#sub p.titleleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}

#sub p.titlecenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}

#sub p.titleright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
text-decoration: underline;
}

#sub p.contentleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;

}

#sub p.contentcenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}

#sub p.contentright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
}

#sub p.titlerightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}

#sub p.titleleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}

#sub p.contentrightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}

#sub p.contentleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}

html: 3 colum example.
Code:

<html>
<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 10/15/04 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="bradsonorus@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link rel="StyleSheet" type="text/css" href="test.css">
</head>
<body>
<div id="frame">
<div id="main">
<img src="C:/Lisa/images/topbar.png" width="640" height="30" alt="">
<img src="C:/Lisa/images/highburyschool.jpg" width="166" height="104" alt="Highbury School, Winnipeg, Manitoba, Canada">
<span>&nbsp;</span>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="LisasNavBar" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="C:/Lisa/LisasNavBar.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#6699cc" />
<embed src="C:/Lisa/LisasNavBar.swf" quality="high" bgcolor="#6699cc" width="500" height="100" name="LisasNavBar" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<p class="pagetitle">TESTS</p>
<p class="title">Tests:</p>
</div>
<div id="sub">
<p class="titleleft">Test Topic / Subject</p>
<p class="titlecenter">Test Date</p>
<p class="titleright">Suggestions</p>
<p class="contentleft">Math: Long Division Test</p>
<p class="contentcenter">Tuesday, October 15, 2004</p>
<p class="contentright">Review pages 31 to 40 in Math text.</p>
<p class="contentleft">English: Spelling Test</p>
<p class="contentcenter">Tuesday, October 22, 2004</p>
<p class="contentright">Practice all the 17 syllable words, they will be on the test.</p>
<p class="contentleft">Phys. Ed.</p>
<p class="contentcenter">Tuesday, November 5, 2004</p>
<p class="contentright">Full Marathon. Those that don't make it under the 5 hour limit will fail.</p>
<p><hr width="80%"></p>
<p><a href="C:/Lisa/home.htm">Home</a> | <a href="C:/Lisa/homework.htm">Homework</a> | <a href="C:/Lisa/projects.htm">Projects</a> | <a href="C:/Lisa/specialevents.htm">Special Events</a> | <a href="C:/Lisa/tests.htm">Tests</a> | <a href="C:/Lisa/links.htm">Links</a></p>
</div>
<img src="C:/Lisa/images/bottombar.png" width="640" height="30" alt="">
</div>
</body>
</html>

I am just muddling through tweaking my weblog at the mo - learning as I go. But I have come accross something that I just can't pinpoint the solution for. I was hoping someone here could look at it with a fresh [and more knowledgeable] perspective.

I have been googling, reading, researching, experimenting and generally pulling my hair out for about 12 hours now and am still no closer.

The problem is that I have a div (with the id of "left bar") which I would like to sit on the left hand side of my page. It displays perfectly in firefox but in IE the whole section sits to the extreme right.

Here is the link to the SITE

Here is a link to some SCREENSHOTS

The code:CSS

Code:

/*left bar  */

#left_bar {
	float: left;
        position: absolute;
	padding-left: 2px;
	margin: 160px 12em 0px 0px;
	width: 200px;
	display: inline;
}


#left_bar ul {
	color: #336666;
	font-weight: bold;
	text-transform: lowercase;
	list-style-type: none;
	margin: 0;
	padding-left: 1px;
}
#left_bar ul li {
	font: italic normal 100% 'Times New Roman', Times, serif;
	text-align: right;
	letter-spacing: 0.1em;
	margin-top: 10%;
        margin-right: 10%;
        float: none;
	padding-bottom: 2px; 

}
#left_bar ul ul {
	font-variant: normal;
	font-weight: normal;
	line-height: 100%;
	text-align: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#left_bar ul ul li {
	font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: 1px;
	border: 0;
	margin-top: 0;
	padding: 0;
	padding-left: 8px;
}
#left_bar ul ul li a {
	color: #996699;
	text-decoration: none;
}
#left_bar ul ul li a:hover {
	border-bottom: 1px solid #660066;
}

The code: html

Code:

<div id="left_bar">
<ul>
<li id="calendar">
	<?php require( dirname(__FILE__).'/_calendar.php' ); ?>
	</li>
</ul>
<ul>
<li>
	<?php require( dirname(__FILE__).'/pophis.php' ); ?>
	</li>
</ul>

<br />
<ul>
<li>
<ul>
<li>
	<?php require( dirname(__FILE__).'/misc.php' ); ?>

</li>
</ul>
</li>
</ul>

</div>

Any thoughts, help, suggestions..... anything...... would be v much appreciated!

My website open fine in pretty much everything except IE (Ie is terrible). I tried to use the "if ie" stylesheet link but its not working. Help please. Test server is http://ivorygaming.clanservers.com/debuhrs


HTML Code:

<html> <head> <title>deBuhrs Seed & Feed</title> <!--[if IE 7]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> </head> <body bgcolor="#070707"> <div id="navbar"><ul id="navbar"> <li><a href="index.html"><span id="green">H</span><span id="white">ome</span></a></li> <li><a href="about.html"><span id="green">A</span><span id="white">bout</span></a></li> <li><a href="staff.html"><span id="green">S</span><span id="white">taff</span></a></li> <li><a href="products.html"><span id="green">P</span><span id="white">roducts</span></a></li> <li><a href="contact.html"><span id="green">C</span><span id="white">ontact</span></a></li> </ul> <div id="logo"></div> <div id="front"></div> <div id="side"></div> <h2>New Website</h2> <hr color="#b9bab9" width="60%" align="left" height="50%"> <p class="postinfo">posted by Bernie deBuhr at 10.39 p.m. Sunday, July 4th, 2009</p> <p class="content">&nbsp&nbsp&nbsp deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.</p> <div id="bottom"></div> <div id="container"></div> </body> </html>

ie.css
Code:

@charset "utf-8"; /* CSS Document */ body { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; text-align: center; } #container { width: 1024px; height: 15px; margin: 0 auto 0 auto; text-align: left; } #logo { height: 112px; width: 702px; padding-bottom: 0px; padding-top: 0px; margin-top: 1000px; margin-left: -200px; background: #FFF url('images/logo.png') ; } #front { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/front.png') ; } #side { height: 444px; width: 312px; padding-bottom: 0px; padding-top: 0px; margin-top: -269px; margin-left: 700px; background: #FFF url('images/side.png') ; } #block { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -177px; margin-left: 10px; background: #FFF url('images/block.png') ; } #block1 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 124px; background: #FFF url('images/block.png') ; } #block2 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 238px; background: #FFF url('images/block.png') ; } #block3 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 352px; background: #FFF url('images/block.png') ; } #block4 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 466px; background: #FFF url('images/block.png') ; } #navbar ul li { padding-left: -10px; position: relative; display: inline; padding-top: 383px; color: #FFFfff; float: left; font-size: 10pt; font-family: arial; font-style: italic; margin-left: 15px; } #green { color: #9bf006; font-size: 11pt; font-family: arial; font-style: italic; } #white { color: #c8cbc3; font-size: 9pt; font-family: arial; font-style: italic; } a { text-decoration:none; color:#930; border-bottom: 1px solid #5b8c04 } h1,h2,h3,h4,h5 { margin:0; text-align:left; color:#9bf006; font: arial; margin-top: -100px; margin-left: 15px; } p.postinfo { margin:0; text-align:left; color:#a0a19e; font: arial; margin-top: 0px; margin-left: 35px; font-size: 8pt; } p.content { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 15px; margin-left: 40px; font-size: 10pt; width: 600px; height: 200px; } p.phone { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: -180px; margin-left: 40px; font-size: 10pt; } p.email { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 3px; margin-left: 40px; font-size: 10pt; } #bottom { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/bottom.png') ; }

Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE.

If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place...

help?