So confused with CSS

[Capo64]

Ok, well I'm designing a website, and I have no idea what the problem is with this.
http://www.thedjhouse.com/subindex.p...%20CD%20Player
Stylesheet: http://www.thedjhouse.com/style.css

If you look at that page, the content overflows out of the div. I have no idea why. But as if that's not weird enough, the look of the page changes every time you refresh it. Sometimes it'll look normal, sometimes it won't (only in firefox). Does anyone have an idea what the problem could be?

[Costin Trifan]

OS: Windows Vista
res: 1024x768
browsers: IE7 & FF 2.0.0.3

There's nothing wrong with that site....I refreshed the page multiple times...I even navigate troughout it....

are you trying to promote your site here...??

[Capo64]

lol I really am not trying to promote i'll take a s/s of what it's doing
http://www.thedjhouse.com/website.jpg
I'm on XP with Firefox. The weirdest thing is that it doesn't do it sometimes without me changing the code at all.
It makes no sense because I created this website originally on my computer using WAMP5 and it works fine, but after I upload it to the server it does this..

edit: Changed to URL cause big image size

[alainkun]

I´m in XP too and I can see it perfectly with FF and IE6.

Did you tried to delete your cookies?

[Capo64]

I'm in school now on a Mac and the same thing happens here, but everything gets messed up on Macs. I was thinking it could be that I have Dual Monitors set up and they're different sizes. But it doesn't make sense that it only happens sometimes

[Costin Trifan]

it doesn't make any sense for me either

[StrongInTheArm]

XP, FF 2.

Resizing the browser window has an effect but not what you reported.

Making the window too small to display the entire page, makes the third product column lose all its products, I just get a thinner white column with nothing in it. I do not see any contents overflowing.

You could look at the min-width attribute but not all browsers support it, at least not the older ones

[Capo64]

They don't disappear they just wrap as if they were text because they're not a table.

Has anyone else had the same problem as me?

Edit:

Alright I made a change to it and so the body div isn't 100%. The problem seems to be that it's not seeing the content as if it's in the div itself because the div stops and the content goes.

[StupidScript]

Not seeing overflow issues with FF2/Win98SE, but that dark blue background makes it tough to read the black text (so something's not allowing the actual bgcolor to display) and there is a syntax error on Line 81:

dl.menu dt {
	background: #0044AA;
	color: #FFFFFF;
	width: 100%;
	align: left;
	text-indent: 0;
	font-weight: bold;
	font-size: 15;
	}

(should be "text-align:left;")

Otherwise, in the interest of working with squeaky clean code, you should update your stylesheet with measurement values for many of the entries, for example font-size is specified in a unit of measurement, like 15em or 15pt or 15px, as are width/height/indent measurements. It has been seen many times how an incomplete stylesheet definition can mess up the display in unexpected ways.

As weird as it may sound, fix all of the measurement units in your stylesheet, and see if that fixes your issues.

[Capo64]

Thanks for the advice, StupidScript. I fixed the measurements (I'm usually really anal about having clean code. Not sure why I never did that), but it didn't change anything. You're getting the dark blue background too right?

In IE it looks fine now, but for some reason, FF is closing the div before it puts in all my items. I'll try a few things to see if I can fix it.

Look now at the index.php. I added some text in the body div and it made it larger. Do you think it just doesn't want a div inside another div?

[Capo64]

Ok, I just changed it to a table layout primarily, it works now, but I really still want to know what was going on with it with the other layout. Oh well it works alright now I suppose.

[StupidScript]

Here's your hint:

...FF is closing the div before it puts in all my items.

You probably tidied up the containers with your rewrite. It probably was a problem with a broken nest that remained virtually invisible until you took it out. I'll bet if you go back through and manually change it back (!) to a DIV-oriented design (as it was, but with fresh code), it'll probably work, for the same reason it works now as a fresh TABLE-oriented design.

[Capo64]

Originally Posted by StupidScript

Here's your hint:You probably tidied up the containers with your rewrite. It probably was a problem with a broken nest that remained virtually invisible until you took it out. I'll bet if you go back through and manually change it back (!) to a DIV-oriented design (as it was, but with fresh code), it'll probably work, for the same reason it works now as a fresh TABLE-oriented design.

Not sure, I was making test codes of straight HTML and just a LOT of text and it ended up overflowing the containers too. I always liked tables better but people kept talking about how good using div's is. I think it had something to do with the floating.

Oh well, all is good now. Thanks everyone for the help