What is wrong with FF and Opera?

Okay, seriously, I am totally confused. I am about to crack my head on my wall, so I am asking for the help of the masterful people of DP to help me out .

I just wrote a little html for a certain site that I am coding, but for some reason, my container doesn't repeat in FF or Opera, yet it does in IE7. I don't even know how that is possible. I don't see what I could be doing wrong. Anyway here is part of the code, can anyone help me?

#container {
	width:903px;
	background:url(images/content.gif) repeat-y;
}

#container-t {
	background:url(images/content-top.gif) no-repeat;
	width:903px;
	height:12px;
}

#sidebar-l {
	width:240px;
	float:left;
	display:inline;
}

#sidebar-l .clear {
	font-size: 1px;
	height: 1px
}

.bl {
	background: url(images/bl.gif) 0 100% no-repeat #4a8d4a;
	width: 171px;
	margin:15px auto 0;
}

.br { background: url(images/br.gif) 100% 100% no-repeat; }

.tl { background: url(images/tl.gif) 0 0 no-repeat; }

.tr {
	background: url(images/tr.gif) 100% 0 no-repeat;
	padding:10px
}


#content {
	width:460px;
	float:left;
}

#content h2 {
	font-family:helvetica87-CondensedHeavy;
	font-size:23px;
}

#sidebar-r {
	width:203px;
	float:left;
}

Code (markup):

and the html

	<div id="container">
	<div id="container-t"></div>
		<div id="sidebar-l">
			<div class="bl">
				<div class="br">
					<div class="tl">
						<div class="tr"> Lorem ipsum dolor sit amet consectetur adipisicing elit </div>
					</div>
				</div>
			</div>
			<div class="clear">&nbsp;</div>
		</div>
		<div id="content">
			<h2>Lorem Ipsum Dolor sit amet</h2>
			Lorem ipsum dolor sit
		</div>
		<div id="sidebar-r">Lorem ipsum dolor sit</div>
		
	</div>

Code (markup):

 

Not containing floats? Set overflow to hidden on your containers and they should then hold the floated elements. P-S, the whole point of an extraneous clear element is to CLEAR (clear:both.

 

Thanks, that worked. o)

Actually, I have clear set up at the top. This clear was part of this little thing that I got for the rounded corners (http://www.sitepoint.com/article/css-round-corners-boxes-curves).

Again, Thanks for your help.

Regards,
Nick

 

This may sound silly, but can't <div> tags hold multiple classes? the whole point of div tags is to minimize nesting, or so i've been led to believe.

 

Some quite complex schemes for having rounded corners have been developed. I consider this to be a bit silly, but there are some schemes much worse.

@Hades: The clear property allows an element to clear a float element above it. The overflow property is used to create a new block formatting context that will enclose float elements.

cheers,

gary

 

Yes, BUT - attributes overload. If you put that as class="lt rt lb bt" or whatever, only the background attribute on the LAST class would actually show.

Since it's four different backgrounds, that needs four different div's.

Even though I dislike that technique because it uses four separate images, requires one of those rubbish clearing DIV's, and doesn't work with transparancies.

Personally, I prefer:

<div class="borderBox">
	<div class="borderTop"><div></div></div>
	<div class="borderLeft"><div class="borderRight">
		Content goes here
	<!-- .borderRight, .borderLeft --></div></div>
	<div class="borderBottom"><div></div></div>
<!-- .borderBox --></div>

Code (markup):

Which would use a single image and sliding doors. Border-top and border-bottom would have their height set to the radius of your 'rounded', padding left equal to that, and margin-left equal to that. Then the nested DIV would be absolute positioned right negative that radius with a width and height of... you guessed it, the radius.

You can see an example of this here:
http://battletech.hopto.org/html_tutorials/eightcorners/template.html

Which is used for shadows on that page, but can just as easily be rounded corners. It's a hair more code, but it's three to eight less handshakes with the server, and by sharing palette you can actually end up with a smaller single file than you can all those little separate ones... meaning anywhere from two to four times less load time!

 

Yes, they can contain multiple classes, though it's not always a good thing to do, especially when you can use contextual selectors.

 

apologies all around, then. truth is, my student group really needed a website, and rather than having a templated one, i learned what i could in the month between classes over winter break. i probably could've done the whole thing with the 30 day trial of dreamweaver, but i figured learning to code by hand made more sense for the long run.

guess i shouldn't give up the day job yet

 

Keep at it. You'll get better.