CSS - Mozilla Firefox And Ie Floating/clear Problem

So I've tried to make my site www.thespinzone.com
work for all browsers, but I'd settle for IE & Mozilla, however I have run into a big problem with IE (and it appears ONLY 7+) and Mozilla, all versions.
First the IE problem is that it's adding a horizontal scroll bar on my main page, not the others, and I can only assume it has something to do with the RSS headlines positioning?

screen shot 1

Now I'm having 2 problems with Mozilla:
1st: No matter how I try manipulate the CSS, the headlines won't float to the right, and they end up being squeezed next to my picture which is a waste of space and looks silly. Here is a screen shot of how it looks.
Ideally I want the headlines to be on the right hand sight of the page, as far as it can be. I WANT the layout to look, MINUS the horizontal scroll bar like that first IE screen shot.

2nd: clicking or right clicking on any of the 'headline' items, moves that entire part underneath my picture and I have no idea why? In case it doesn't do that with your mozilla version, here's a screen shot

The relevant CSS is on the index page so rather than me cut & paste it (unless that's preferred) then 'view source'.....

I appreciate any and all help and advice. Thanks

Hi,

I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly.

When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is.

The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly?

It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also?

Thanks.

Does anyone know why the clear: left isn't working on firefox 1.0 on this page.

Generic Page with floating divs and then clearing them for a new line.
http://section31.us/temp/float_boxes.html

Am I doing something wrong or is this a bug?

I'm designing a site and have an absolute div with a z-index of -1. This div has a background image.

On top of this div I have a normal layout table with my content, in effect I wanted a background image that didn't tile, so I threw it in a div.

When i view it in IE6 everything looks nice, but when I view it in firefox, the image doesn't show up, the dive borders dont show up and any text I put in the div doesn't show up.

Any thoughts or workarounds why the image isn't showing.

Thanks

chuck_samsonite
_______________________________________________
Lloyd: Oh yeah! It's right here, Samsonite! I was way off! I knew it started with an S though!

This is just driving me up a wall here. It's been like this for a while, and I never cared b/c I don't use IE. My viewers, however, do, and it's an eyesore.

Link to crappy page

This is a sidebar I have on all the pages. It grabs the latest 10 threads from the forum. Gets the latest 10 additions to the database, and finally gets the top 10 viewed items. As you'll see (specifically in the top entry of the top list (latest news) it messes up the vertical alignment for some reason. AFAIK, my CSS is fine. Again, this problem only exists in IE.

Thanks

I've been pulling out my hair trying to figure out what it is i'm doing wrong here. I've been messing with this code and trying different things, but can't seem to figure out what the problem is. One of my divs is not sized properly. Can someone take a quick look and see what it could be? I'd realyl appreciate it. Thanks!

http://ritchie.acomp.usf.edu/~lamba/my2.html

Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is:
Benefit Solutions, Inc
Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance

hi all...

i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet....

frank/

I'm not sure what is causing the extra spaces to the top and bottom area of the images...

Code:

     <div style="margin:0px;padding:0px;background-color: #FF0000;">
       <img src="images/mod_bt2.gif"><br>
       <img src="images/mod_bt1.gif"><br>
       <img src="images/mod_bt7.gif"><br>
       <img src="images/mod_bt6.gif">
     </div>

I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded.

Here's my css for the navbar:

/* Navbar */
#nav { width: 158px;
margin-left: 0;
}
#nav ul { font-family: "Trebuchet MS", serif;
font-size: 11px;
margin-left: 0px;
list-style-type: none;
}
#nav ul li ul { margin-left: 12px; }

Any suggestions or help would be appreciated.

Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers?

Check this out: Test Page.

It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred.

Thanks,
Darin

Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated.

My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site...

I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla.

I am new to using CSS and I'm sure that something is off somewhere in the code.

Thank in advance for any help.

Feel free to e-mail me he dekay@baltimoregamers.com

Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this?

<STYLE type="text/css">
BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed }
</STYLE>

Thank you for an insight into this little glitch.

I am using a <dl> list to render dates and titles for a press release page. I want to display the date first and then display the title on the same line next to the date. If the title needs to wrap to more than 1 line, it should not wrap below the date - its left margin should be consistent.

Simple example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

dl	{
	width: 100%;
}


dt, dd	{
	float: left;
	margin: 5px;
}

</style>
</head>

<dl>
	<dt>12.24.2006</dt>
	<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer cursus lacus. Nullam imperdiet diam sit amet dui. Suspendisse nonummy, ante ut pharetra vehicula, augue neque porta arcu, vel adipiscing lorem augue eu purus. Aenean vulputate pellentesque arcu.</dd>
</dl>

<body>
</body>
</html>

My problem is that with a long title that wraps to more than 1 line, Firefox is putting the <dd> on its own line - it will not float it next to the <dt> as it should.

If you change the title to something shoter like

Code:

<dd>A ShortTitle</dd>

It displays as it should.

Any ideas why this is happening?