THE BORE

General => The Superdeep Borehole => Topic started by: GilloD on July 29, 2009, 04:12:08 PM

Title: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 04:12:08 PM
Pretty simple template:

Code: [Select]
<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.
Title: Re: This CSS problem is driving me bonker.
Post by: Reb 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.
Title: Re: This CSS problem is driving me bonker.
Post by: demi 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.
Title: Re: This CSS problem is driving me bonker.
Post by: Reb on July 29, 2009, 04:18:22 PM
Also: BONKERS SSSSSS
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD 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
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 04:23:37 PM
http://asilenttreatment.org/sageexport/MikeMeBlog/

Have a peek. It worked for awhile and the it stopped.
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD 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?
Title: Re: This CSS problem is driving me bonker.
Post by: demi on July 29, 2009, 04:27:03 PM
I dunno what it's supposed to look like. It looks fine to me.
Title: Re: This CSS problem is driving me bonker.
Post by: demi on July 29, 2009, 04:29:33 PM
(http://img401.imageshack.us/img401/3061/78438348.png)

(http://img32.imageshack.us/img32/3662/68592117.png)
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD 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;
}
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 04:31:04 PM
And if I check it out in FireBug, the Background property doesn't show up.
Title: Re: This CSS problem is driving me bonker.
Post by: demi on July 29, 2009, 04:33:17 PM
You sure? I see the image just fine.
Title: Re: This CSS problem is driving me bonker.
Post by: demi on July 29, 2009, 04:34:37 PM
(http://img32.imageshack.us/img32/9318/44037383.png)
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 04:37:03 PM
What the fuck. Why can't I see it?
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 04:38:02 PM
Here's a first: Shows in IE, not in FireFox.
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 04:38:57 PM
I dropped the "transparent" property and it worked fine. ffffffffffff
Title: Re: This CSS problem is driving me bonker.
Post by: Herr Mafflard on July 29, 2009, 05:11:16 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. 
Title: Re: This CSS problem is driving me bonker.
Post by: Tauntaun on July 29, 2009, 05:24:34 PM
Can I drive you bonker?  :-*
Title: A new CSS problem for Demi to solve
Post by: GilloD 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

(http://asilenttreatment.org/img/ieffdivproblem.jpg)

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;

}
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 05:52:44 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
Title: Re: A new CSS problem for Demi to solve
Post by: jiji 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;

}
Title: Re: This CSS problem is driving me bonker.
Post by: Arbys Roast Beef Sandwich 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
Title: Re: This CSS problem is driving me bonker.
Post by: GilloD on July 29, 2009, 06:20:30 PM
Durr. Overflow:auto. Me so dumb. Also, trying to put <p> in <span> durrr
Title: Re: A new CSS problem for Demi to solve
Post by: GilloD on July 29, 2009, 06:20:56 PM
Durr. Overflow:auto. Me so dumb. Also, trying to put <p> in <span> durrr


Thanks jiji :)