Author Topic: This CSS problem is driving me bonker. (Read 1285 times)

GilloD · « **on:** July 29, 2009, 04:12:08 PM »

Pretty simple template:

<html>
<head>
	<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>

<body>
	<div id="container">
		<div id="header">
			<h1> <img src="img/lightbulbheader.jpg"> </h1>
		</div>
		<div id="body">
			<div class="post">
				<span class="title"><p><a href="hehehehe">Consider the Audiobook.</a></p></span>
				<span class="text"><p>As far as life advice, I stumbled upon this yesterday and it has followed me since, begging me to put it into practice without any real advice in that regard: Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb  Dumb silly dumb </p></span>
				<span class="metadata">By: Scott | Comments (x) </span>
			</div>
		</div>
		<div id="footer">
			<span class="tagcloud">
				TAG CLOUD <br/>
				TAG CLOUD <br/>
				TAG CLOUD <br/>
				TAG CLOUD <br/>
				TAG CLOUD <br/>
				TAG CLOUD <br/>
			</span>
	</div>
</body>

Simple style sheet:

Code: [Select]

#body{
width: 100%;
font-family: Arial, Helvetica;
color: #000;
}

#container{
width: 100%px;

margin: 0 auto;
}

#header{
width: 100%;
border-bottom: dashed 2px;
text-align: center;
}

.post{
width:480px;
margin: 0 auto;
}

.title{
font-size: 20px;
text-align: center;
}

.title a{
color: #000;
text-decoration: none;
}

.title a: hover{
color: #A2A2A2;
}

.text{
width:480px;
margin: 0 auto;
font-size: 9pt;
text-align: center;
}

.metadata{
text-align: left;
font-size: 8pt;
}

#footer{
text-align: center;
width: 100%;
background: transparent #eff3f4 url('img/graywhitefooter.gif') repeat-x scroll 0 0;
}

.tagcloud{
width: 480px;
float:left;
background:transparent; 
}

PROBLEM: The .tagcloud span OVERWRITES the background of FOOTER even when set to transparent. Any thoughts? I feel stupid.

Reb · « **Reply #1 on:** July 29, 2009, 04:17:52 PM »

I'll fucking rape you if this is about your job, that you supposed to quit months ago, again.

demi · « **Reply #2 on:** July 29, 2009, 04:18:06 PM »

So remove background? A pic would be helpful, since c/p that source doesnt do me any good.

Reb · « **Reply #3 on:** July 29, 2009, 04:18:22 PM »

Also: BONKERS SSSSSS

GilloD · « **Reply #4 on:** July 29, 2009, 04:19:49 PM »

This is just for kicks. Actually, it looks like it's picking and choosing what to nab off the style sheet? Hold on, I'll upload

GilloD · « **Reply #5 on:** July 29, 2009, 04:23:37 PM »

http://asilenttreatment.org/sageexport/MikeMeBlog/

Have a peek. It worked for awhile and the it stopped.

GilloD · « **Reply #6 on:** July 29, 2009, 04:24:14 PM »

http://asilenttreatment.org/sageexport/MikeMeBlog/img/graywhitefooter.gif Here's the transparency. Firebug says that the background property just isn't coming across anymore?

demi · « **Reply #7 on:** July 29, 2009, 04:27:03 PM »

I dunno what it's supposed to look like. It looks fine to me.

demi · « **Reply #8 on:** July 29, 2009, 04:29:33 PM »

GilloD · « **Reply #9 on:** July 29, 2009, 04:29:37 PM »

There's no background image in the footer.

re: Stylesheet:

#footer{
text-align: left;
width: 100%;
background: transparent #eff3f4 url('img/graywhitefooter.gif') repeat-x scroll 0 0;
}

GilloD · « **Reply #10 on:** July 29, 2009, 04:31:04 PM »

And if I check it out in FireBug, the Background property doesn't show up.

demi · « **Reply #11 on:** July 29, 2009, 04:33:17 PM »

You sure? I see the image just fine.

demi · « **Reply #12 on:** July 29, 2009, 04:34:37 PM »

GilloD · « **Reply #13 on:** July 29, 2009, 04:37:03 PM »

What the fuck. Why can't I see it?

GilloD · « **Reply #14 on:** July 29, 2009, 04:38:02 PM »

Here's a first: Shows in IE, not in FireFox.

GilloD · « **Reply #15 on:** July 29, 2009, 04:38:57 PM »

I dropped the "transparent" property and it worked fine. ffffffffffff

Herr Mafflard · « **Reply #16 on:** July 29, 2009, 05:11:16 PM »

Quote from: GilloD on July 29, 2009, 04:38:02 PM

Here's a first: Shows in IE, not in FireFox.

Same here. I get this problem very occasionally where sometimes Firefox won't display images but IE will. Don't know the solution to this, I'm afraid.

Tauntaun · « **Reply #17 on:** July 29, 2009, 05:24:34 PM »

Can I drive you bonker?

GilloD · « **Reply #18 on:** July 29, 2009, 05:51:44 PM »

Slow day.

Anyway

Okay, new problem with backgrounds! Here goes:

I have a container element "FOOTER" with 2 elements inside of it. "FOOTER" had a gradient background.

Problem: FireFox won't render a DIV without content, so it's not rendering the footer since the footer is just a container. So I just dropped a single character in to make it render. The background shows up, but it seems to "kick out" the two DIVs it's holding.

The weird thing? It renders fine in IE. Ugh. I've included a screenshot and relevant code

Code: [Select]

<div id="footer">
			<span class="tagcloud">
				<p>TAG CLOUD</p>
			</span>
			
			<span class="findus">
				<p>Find Us</p>
			</span>
		</div>

Code: [Select]

#footer{
text-align: left;
width: 100%;
background:  #eff3f4 url('img/graywhitefooter.gif') repeat-x scroll 0 0;
}

.tagcloud{
width: 480px;
float:left;

 
}

.findus{
width: 480px;
float:left;

}

GilloD · « **Reply #19 on:** July 29, 2009, 05:52:44 PM »

Quote from: InfectedGib on July 29, 2009, 05:11:16 PM

Quote from: GilloD on July 29, 2009, 04:38:02 PM
Here's a first: Shows in IE, not in FireFox.

Same here. I get this problem very occasionally where sometimes Firefox won't display images but IE will. Don't know the solution to this, I'm afraid.

FF won't render an empty div. Sometimes that's the problem

jiji · « **Reply #20 on:** July 29, 2009, 06:01:21 PM »

Add the #footer identifier to the class definitions, and add overflow: hidden to the definition of #footer. That should do it.

Code: [Select]

#footer{
text-align: left;
width: 100%;
background:  #eff3f4 url('img/graywhitefooter.gif') repeat-x scroll 0 0;
overflow: hidden;
}

#footer .tagcloud{
width: 480px;
float:left;

 
}

#footer .findus{
width: 480px;
float:left;

}

Arbys Roast Beef Sandwich · « **Reply #21 on:** July 29, 2009, 06:10:52 PM »

I ran into something similar a couple weeks ago. Oddly enough, it was the footer background that wouldn't show too.

My fix was simply to add the !important rule beside the background image definition, i.e.,

Code: [Select]

background: transparent #eff3f4 url('img/graywhitefooter.gif') repeat-x scroll 0 0 !important;
YMMV of course

GilloD · « **Reply #22 on:** July 29, 2009, 06:20:30 PM »

Durr. Overflow:auto. Me so dumb. Also, trying to put <p> in <span> durrr

GilloD · « **Reply #23 on:** July 29, 2009, 06:20:56 PM »

Durr. Overflow:auto. Me so dumb. Also, trying to put <p> in <span> durrr

Thanks jiji

News:

Author Topic: This CSS problem is driving me bonker. (Read 1285 times)