CSS Issue

Sketch · 02-15-2007, 08:29 PM

So I thought its about time I learnt how to code without tables... It isn't had hard, but at the same time there is something that I just cannot figure out.

I'm working on a layout http://www.sketchthat.com/dev/ and in IE it works fine however in Firefox its not working correctly and I'm not sure why.

I think it has something to do with the #body style, because when I add the height in there it will work in firefox, but I want the height to be fluid (i hope thats the correct word), I need to to change size depending on how many adds are shown.

If anyone can help me that would be fantastic!!!

I won't post the code because its a bit long, but you'll be able to see it by visiting the page then viewing the source.

Thanks in advance

SEOclown · 02-16-2007, 12:02 AM

Are you sure the problem is with the CSS? I could be terribly wrong but my guess is it has something to do with the (div)

Code:

<body>
	<div id="header">
		Login | Advertisers | Contact Us | About Us
	</div><div id="navigation">
		<b>Find sales in: </b>

		<a href="#">Victoria</a> | 
		<a href="#">New South Wales</a> |
		<a href="#">Queensland</a> |
		<a href="#">Tasmania</a> |
		<a href="#">South Australia</a> |
		<a href="#">Northern Territory</a> |
		<a href="#">Western Australia</a>		
	</div>

		
	<div id="main_add">
		<div class="top"><div></div></div>

Maybe you need to remove one or something in here? Its like they are cancelling themselves out you know. Or i have no clue but thats all i can come up with.

Sketch · 02-16-2007, 12:05 AM

Each of those divs closes itself...So there shouldn't be any problem there??

Code:

<div class="top"><div></div></div>

The only reason that div is in their is because it does one of my rounded corners. I read a tutorial and thats what it told me to do

SEOclown · 02-16-2007, 12:49 AM

Yeah by looking at it thats all i was thinking, The divs close itself but maybe one needs to be open?

Oh, Thats how you make round corners, i was wondering because it looks as though it just cancells each other out.

Im sure someone has the answer, sorry i wasnt of more help.

Taltos · 02-16-2007, 10:32 AM

I have been fighting similar problems lately. IE7 does what I expect from my code and FF is doing bizarre things. It's all backwards now

The first thing I would try is call that ID something besides "body". I never like to see duplicate names even when they SHOULDN'T conflict. Just out of curiosity, have you tried just using height: 100% if you want it fluid but need seem to need a height to make FF cooperate?

Sketch · 02-16-2007, 05:34 PM

I ran the code through the validator and i had a lot of problems, but after fixing them all it still hasn't helped my little FF issue.

I've also changed the name of body to main_body so that the names aren't being reused.

atox · 02-16-2007, 06:08 PM

Code:

		
	<div id="main_add">
		<div class="top"><div></div></div>
		<div id="main_body">
			<ul>
				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>
				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>
				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>

				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>
				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>
				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>
				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>
				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>

				<li><a href="#"><img src="sample_add.gif" width="200" height="156" alt="" /><b>Xbox 360</b><label>Proin id pede sed felis blandit aliquam. Nam auctor tellus quis nunc. Praesent ultrices.</label></a></li>
			</ul><div style="clear:both; height:0px; overflow:hidden">&nbsp;</div>
		</div>
		<div class="bot"><div></div></div>
	</div>

atox · 02-16-2007, 06:13 PM

Forget adding the extra div, that's unnec. markup. Just add

Code:

.bot
{clear:both}

to your css and all should be fine