What's wrong with my css?

Devious · July 18, 2011, 7:14am

my content is bleeding off the div. [noparse]http://ipodrepairman.com[/noparse]

thanks

ralphm · July 18, 2011, 7:28am

Add the code in red:

#back_all {
  background: url("images/back_all.gif") repeat-y scroll center center transparent;
  width: 754px;
[COLOR="Red"]  overflow: hidden;[/COLOR]
}

Devious · July 18, 2011, 7:35am

Thanks Ralph, +rep to you!

system · July 18, 2011, 8:07am

almost ALWAYS that behavior either comes from an unclosed div and/or a failure to wrap all your floats and/or trying to use a fixed height on dynamic height content… Though it’s funny, my normal answer to your title is “your HTML is what’s wrong with your CSS”

Let’s take a look. Warning, I’m a bit frank on problems with sites, I’m going to run right down the checklist of common issues you see many developers basically cripple themselves with.

If I’m curt with you it’s because time is a factor. I think fast, I talk fast and I need you guys to act fast if you wanna get out of this. So, pretty please… with sugar on top. Clean the {expletive omitted} car. – Winstone Wolfe, Pulp Fiction

With 61 validation errors, you do not have HTML, you have gibberish. Amongst said gibberish is MULTIPLE doctypes, MULTIPLE head and body tags (probably a bad embed method) – these ALONE could be wreaking all sorts of havoc with your layout.

From there I’m seeing all-caps tags indicating HTML 3.2 in a XHTML doctype (upper case is invald XML for tags and attributes!), style inlined in the markup (just because Google is too stupid to leverage caching models doesn’t mean you shouldn’t), static scripting inlined in the markup for something that… well… doesn’t even look like it does anything useful, tables for layout, adverts before your actual content (way to flush your SEO), multiple unnecessary DIV, nonsensical use of heading tags (see the H1/H2 pairing – whiskey tango foxtrot?), tags that have NO BUSINESS on a website after 1997 like FONT, paragraphs around non-paragraph elements, more inlined style, lack of a list around a obvious list… it’s no wonder you’ve got 12k of HTML for only 1.7k of actual content; making at least 50% of your HTML wasted bloat.

I wouldn’t even TRY to diagnose a layout issue like the one you’re encountering until all of the above is diagnosed, but – I’ll fire up dragonfly and firebug and see what I can see.

Ok, using those tools I cannot even determine where/how you are even applying that red background – wait, I can’t find it in the CSS either – what the??? Is that applied with scripting or something?!?

Though I’m also left wondering how much of this is “bravenet” just screwing with you… given all the crap in the header and footer that doesn’t even seem related to the page… yeah, the more I look at the code, the more that free hosting looks to be at fault for many of the “other” issues I outlined above. You should probably look at getting REAL hosting for that.

If I was writing the same page, throwing away all the “bravenet” manure, the HTML would probably end up something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="description"
	content="Quality repairs by Apple Technicians in New Orleans! From LCD & power to issues to cracked touch screen & audio jack repair. (504) 256-8323 1914 St. Claude New Orleans, LA 70116
">

<meta
	name="keywords"
	content="new orleans,iPhone,ipad,repair,service, glass, cracked, battery, replacement"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	IPHONE, IPAD & SMARTPHONE REPAIR
</title>

</head><body>

<div id="firstPageWrapper"><div id="secondPageWrapper">

	<h1>
		<a href="/">
			iPod <small>Repairman</small>
		</a>
	</h1>
	
	<div id="topAddress">
		(504) 256-8323<br />
		1914 St. Claude Ave.<br />
		New Orleans, LA 70116	
	<!-- #topAddress --></div>
	
	<ul id="mainMenu">
		<li><a href="http://ipodrepairman.com>Home</a></li>
		<li><a href="http://ipodrepairman.com">Services</a></li>
		<li><a href="http://ipodrepairman.com">Accessories</a></li>
		<li><a href="http://ipodrepairman.com">Recycle</a></li>
		<li><a href="http://ipodrepairman.com">About Us</a></li>
		<li><a href="mailto:neworleansipodrepair@gmail.com">Contact</a></li>
	</ul>
	
	<div id="content">
		<div class="subSection">
			<h2>
				6,492 REPAIRS IN 6 YEARS!<br />
				<small>IPHONE 4 SCREEN REPAIR</small>
			</h2>
			<img src="/iphone-4-screen-repair.png" class="plate" />
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h2>PRICING: WE'LL BEAT EM ALL!</h2>
			<p>
				With Apple's growing popularity, &#63743; iPod Repairman impersonators have been sprouting up all around the city. They think they can undercut iPod Repair Man, well guess what? <strong>We'll beat any stores repair price by 5%!</strong>
			</p>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h2>REPAIRS: WE'VE GOT IT DOWN TO AN ART!</h2>
			
			<h3>HARDWARE REPAIR</h3>
			<p>
				Did you drop your iPhone in the tub? Run over it on your moped? No problem! Our technicians can repair any iPhone/iPod now matter what magnitude of damage AND we carry every iPod part in stock. We specialize in screen repair (touch screen) replacement. In fact, we can do it in under 5 minutes. There is no one faster!
			</p>
			
			<h3>SUPPORT</h3>
			<p>
				Is your iPhone not playing music? Can't connect to the internet? Again, give us a call! We know these things inside and out!
			</p> 
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h2>SHOP INFO: WE'RE HERE... <span>ALWAYS</span> HERE!</h2>
			<ul>
				<li>STANDARD SERVICE: MON-FRI 10AM-4PM</li>
				<li>EMERGENCY SERVICE: 24 HOURS (+$25)</li>
				<li>ONSITE SERVICE: House calls in Orleans/Jefferson Parish (+$20)</li>
			</ul>
		<!-- .subSection --></div>
		
		<p class="standout">
			<strong>APPOINTMENTS ONLY, CALL: (504) 256-8323</strong>
		</p>

	<!-- #content --></div>
	
	<div id="sideBar">
	
		<div class="subSection">
			<h2>IPHONE SERVICES</h2>
			<ul>
				<li>Touch Screen Repair</li>
				<li>LCD display Repair</li>
				<li>Liquid damage Repair</li>
				<li>Fix iPhone not charging</li>
				<li>Fix headphone jack</li>
				<li>Dropped/Cracked Glass</li>
			</ul>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h2>IPOD SERVICES</h2>
			<ul>
				<li>Screen Repair</li>
				<li>Charging Issues</li>
				<li>Liquid Damage</li>
				<li>Battery Replacement</li>
				<li>Headphone Jack Repair</li>
				<li>Hard Drive Repair</li>
				<li>Data Recovery</li>
			</ul>
		<!-- .subSection --></div>
		
	<!-- #sideBar --></div>
	
<!-- #secondPageWrapper, #firstPageWrapper --></div></div>	
	
<div id="footer">
	&copy; 2004-2010. iPod Repair Man |
	A division of
	<a href="http://neworleanscomputerrepair.com">
		New Orleans Computer Repair
	</a>
<!-- #footer --></div>	

</body></html>

If I have time later I’ll toss together an example CSS to go with that. EVERYTHING else you’re trying to do on the page belongs in the CSS, NOT in the markup… which is how the HTML is gutted down to 4.1k. Even without the bravenet garbage you had around 12k of HTML.

Oh, and I don’t know what character #63743 is supposed to be – but since it doesn’t exist in ANY font I have installed here, I would get rid of those.

– edit – Oops, looks like ralph responded while I was typing this… though really I’d not throw a silver bullet fix at it like that when there’s so much wrong on the page