CSS positioning not working right in Firefox

Amazingly enough after working around the many bugs in IE I ended up having an issue in Firefox. The site I am designing is not positioning the center column correctly in non-IE browsers. (looks perfect IE7)
The url is:
http://www.williamsmemorialcme.org/newsite/

the css (style.css):

body {
margin : 20px;
padding : 0;
font : 73% "Trebuchet MS", verdana, arial, sans-serif;
color : #666;
background : #F6F6F2 url(img/bgd.png) repeat;
}
#container {
width : 930px;
border : 5px solid #fff;
margin-left : auto;
margin-right : auto;
padding : 10px;
color : #666;

Gap at top of div

I am having such a huge problem with a div giving me a mysterious gap at the top. It's a sidebar div that should nestle right up again the header div at the top of the page, but there is a 30 px gap.

Here is the HTML:

<head>
<title>The Desk of Brandon Hrycyk</title>
<link href="twoColElsLtHdr.css" rel="stylesheet" type="text/css" />
</head>
 
<body class="twoColElsLtHdr">
<div id="container">
  <div id="header">
  <div id="topNav2">
    <h2><a href="http://www.brandonhrycyk.com/blog">Blog</a></h2>
    <h2><a href="/about.html">About</a></h2></div>

Video Player on left, Text on right - having trouble with block, float and subsequential text lines below it. 2 column layout

Hi,

I am working on a new site and am having trouble with floating items in the MainContent area.
I have a sidebar with navigation and that seem to be messing around when I try to clear="both" in the MainContent area

1) I have a video player that needs to reside on the left, and some words that need to reside on the right (testimonials) (on the same line)

menu - content (scrolled) - status

Hello there,

I'm having trouble with a layout - it's a menu - content (scrolling) - status layout which I've tried to achieve through a single table:

----------------------------
| Menubar |
----------------------------
| Content | |
| | | <- Scrollbar
| | |
| | |

Overlaying jpg and png images

Hello!

New here and have been stuck with a slight css/javascript problem. I am using open source code from: TwitStream

What I would like to do is overlay the Twitter jpg image avatars with a transparent png image - like a watermark. My problem is, do I recode the css AND the javascript files or is there a quicker, easier css only method?

Is there a way to change each jpg avatar to appear as a background image, overlapped with a png of the same size?

Syndicate content