THE BORE
General => The Superdeep Borehole => Topic started by: 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:
#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.
-
I'll fucking rape you if this is about your job, that you supposed to quit months ago, again.
-
So remove background? A pic would be helpful, since c/p that source doesnt do me any good.
-
Also: BONKERS SSSSSS
-
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
-
http://asilenttreatment.org/sageexport/MikeMeBlog/
Have a peek. It worked for awhile and the it stopped.
-
http://asilenttreatment.org/sageexport/MikeMeBlog/img/graywhitefooter.gif Here's the transparency. Firebug says that the background property just isn't coming across anymore?
-
I dunno what it's supposed to look like. It looks fine to me.
-
(http://img401.imageshack.us/img401/3061/78438348.png)
(http://img32.imageshack.us/img32/3662/68592117.png)
-
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;
}
-
And if I check it out in FireBug, the Background property doesn't show up.
-
You sure? I see the image just fine.
-
(http://img32.imageshack.us/img32/9318/44037383.png)
-
What the fuck. Why can't I see it?
-
Here's a first: Shows in IE, not in FireFox.
-
I dropped the "transparent" property and it worked fine. ffffffffffff
-
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.
-
Can I drive you bonker? :-*
-
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)
<div id="footer">
<span class="tagcloud">
<p>TAG CLOUD</p>
</span>
<span class="findus">
<p>Find Us</p>
</span>
</div>
#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;
}
-
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
-
Add the #footer identifier to the class definitions, and add overflow: hidden to the definition of #footer. That should do it.
#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;
}
-
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.,
background: transparent #eff3f4 url('img/graywhitefooter.gif') repeat-x scroll 0 0 !important;
YMMV of course
-
Durr. Overflow:auto. Me so dumb. Also, trying to put <p> in <span> durrr
-
Durr. Overflow:auto. Me so dumb. Also, trying to put <p> in <span> durrr
Thanks jiji :)