This page works fine in Firefox and Chrome:
http://ewh.ieee.org/r1/schenectady/events.php

but in IE, the maincontent appears way at the bottom (below the sidebar) instead of to the right of the sidebar as it should. Google convinced me that IE has trouble with CSS, but this is such a basic thing I figured it would be fine...

Here is the css file:

#container 
{ 
  width: 780px; 
  background: #FFFFFF;
  margin: 0 auto; 
  /*border: 1px solid #000000; */
  text-align: left; 
}

#header 
{
  padding:5px 10px;
  /*background:#ddd;*/
}
	
#sidebar 
{
  float: left; 
  width: 200px;
  background: #FFFFCC;
  padding: 15px 10px 15px 20px;
}

#mainContent 
{ 
  margin: 0 0 0 250px;
  padding: 0 20px 20px 20px; 
}

#footer 
{
  clear:both;
  padding:5px 10px;
  /*background:#cc9;*/
}

Any suggestions?

Thanks!

David

try adding a float:left; to the main content rule

failing that, try to wrap an additional div around the floated sidebar, apply the float to the wrapper and remove the float on the interior div,. IE has big problems rendering floats.(IE6 anyway)

After adding float:left; :

#mainContent 
{ 
  margin: 0 0 0 250px;
  padding: 0 20px 20px 20px; 
}

http://ewh.ieee.org/r1/schenectady/events.php also breaks on Chrome and Firefox :)

The double div seems like a "hack" - this seems like something that should be able to be fixed in the css file (especially since we see how sensitive it is from the float:left experiment)

Any other thoughts?

Hm, I added

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

To the top of the page and it looks nice in Chrome and IE, but in Firefox the sidebar is all "scrunched up" (for lack of a better term.. haha). Basically the line breaks between the links are missing, so it looks like a paragraph instead of 10 separate links.

Any idea what would cause that?

Looking at your code for the page, you have </p> after each link in that menu but you don't have an opening <p> tag.

You have:

<p class="text1">
  <a href="whoweare.php">Who We Are</a></p>
  <a href="events.php">Events</a></p>

  <a href="newsletter.php">Newsletter &amp; News</a></p>
  <a href="AwardNominations.php">Award Nominations</a></p>
  <a href="videos.php">Video Library</a></p>
  <a href="jobs.php">Jobs</a></p>
  <a href="links.php">Links</a></p>

  <a href="discounts.php">Discounts</a></p>
  <a href="volunteers.php">Call for Volunteers</a></p>
  <a href="societies.php">Society Websites</a></p>
  <a href="bylaws.php">By-laws</a></p>
  <a href="http://www.ieee.org/portal/index.jsp?pageID=corp_level1&amp;path=membership&amp;file=coa.xml&amp;xsl=generic.xsl">Update
  IEEE profile and email address</a></p>
  <a href="other.php">Other Events</a></p>

  <a href="http://www.ieee.org/fap"><img border="0" src="images/fap.jpg" width="120" height="60"></a>
</p>

Try this:

<p class="text1">
  <p><a href="whoweare.php">Who We Are</a></p>
  <p><a href="events.php">Events</a></p>
  <p><a href="newsletter.php">Newsletter &amp; News</a></p>
  <p><a href="AwardNominations.php">Award Nominations</a></p>
  <p><a href="videos.php">Video Library</a></p>
  <p><a href="jobs.php">Jobs</a></p>
  <p><a href="links.php">Links</a></p>
  <p><a href="discounts.php">Discounts</a></p>
  <p><a href="volunteers.php">Call for Volunteers</a></p>
  <p><a href="societies.php">Society Websites</a></p>
  <p><a href="bylaws.php">By-laws</a></p>
  <p><a href="http://www.ieee.org/portal/index.jsp?pageID=corp_level1&amp;path=membership&amp;file=coa.xml&amp;xsl=generic.xsl">Update IEEE profile and email address</a></p>
  <p><a href="other.php">Other Events</a></p>
  <p><a href="http://www.ieee.org/fap"><img border="0" src="images/fap.jpg" width="120" height="60"></a></p>
</p>
commented: Thanks for catching my mistake! +4

Wow how silly of me. I actually just changed them all to <p/> and it works now. Thanks!

Hm, I added

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

To the top of the page and it looks nice in Chrome and IE, but in Firefox the sidebar is all "scrunched up" (for lack of a better term.. haha). Basically the line breaks between the links are missing, so it looks like a paragraph instead of 10 separate links.

Any idea what would cause that?

I'm going to quote a mentor of mine for this,

“That line your are playing with is the doctype which is required for all modern web pages. If it works without it, that tells me you originally created the page without it. The doctype is the set of rules you are telling the browser you are using to create the page. Change the doctype, change the rules.” - doc

The doctype should never be an after thought.


Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.