9 Replies - 935 Views - Last Post: 15 October 2012 - 11:58 AM

#1 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 09:41 AM

So, I have yet another problem with my website, and now it's the footer. It works fine when there's only one line in it, which is the makers name. But when I added a source and floated the source to the left and name to the right the rgba background disappeared. If I don't float them to the left and right it works fine, what can I do to fix this?

Here's the CSS code for the footer:

footer {
	background-color: rgb(255,255,255); /* IE fallback - http://css-tricks.com/rgba-browser-support/ */
	background-color: rgba(255,255,255,0.4);
	font-style:italic;
	color:#990000;.
}
.heimild
{
	float: left;
}

.hofundur
{
	float: right;
}



And the HTML
<footer>
			<p class = "hofundur">
			Nublet 2012.
			</p>
			<p class = "heimild"> Source: <a href = "http://en.wikipedia.org/wiki/Big_L">http://en.wikipedia.org/wiki/Big_L</a>
		</footer>



And if you don't understand what I'm talking about, here's a picture before I float them:

Posted Image

And after:

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: RGBA transparent background won't stay on in footer.

#2 Utael  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 210
  • Joined: 12-December 11

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 11:51 AM

You have two background color elements, remove the one you don't want and done.
Was This Post Helpful? 0
  • +
  • -

#3 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 12:02 PM

View PostUtael, on 14 October 2012 - 11:51 AM, said:

You have two background color elements, remove the one you don't want and done.


Removed the top one, it still looks like the bottom picture :/

Also tried using margin-left and margin-right but that just screwed things up. Using text-align doesn't work either :dontgetit:
Was This Post Helpful? 0
  • +
  • -

#4 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 12:14 PM

It also doesn't work to use
footer.heimild
{
    float: left;
}

footer.hofundur
{
    float: right;
}


Was This Post Helpful? 0
  • +
  • -

#5 Utael  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 210
  • Joined: 12-December 11

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 01:45 PM

Check your html closing tags
Was This Post Helpful? 0
  • +
  • -

#6 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 02:05 PM

The footer looks like this now:

<footer>
			<div class = "hofundur">
			<p>Nublet 2012.</p>
			</div>
			
			<div class = "heimild">
			<p>Source: <a href = "http://en.wikipedia.org/wiki/Big_L">http://en.wikipedia.org/wiki/Big_L</a</p>
			</div>
			
		</footer>



Again, the float works perfectly but the background isn't there

Accidentally erased the ">" at the end of the source link whilst pasting this in here :P
Was This Post Helpful? 0
  • +
  • -

#7 Utael  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 210
  • Joined: 12-December 11

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 02:07 PM

hmm...
this ones got me stumped.
Was This Post Helpful? 0
  • +
  • -

#8 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 02:28 PM

Oh well, thanks for the help though! :bigsmile:

Does IE read pixels differently than Chrome? My div is much larger in IE and also the embedded videos than in Chrome.
Was This Post Helpful? 0
  • +
  • -

#9 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 241
  • Joined: 22-November 10

Re: RGBA transparent background won't stay on in footer.

Posted 14 October 2012 - 02:56 PM

Since you are floating the heimild and hofundur within the footer element, the footer will collapse. You will either have to set a min-height on the footer or insert a <div style="clear:both"></div> right before your closing footer element.
Was This Post Helpful? 1
  • +
  • -

#10 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: RGBA transparent background won't stay on in footer.

Posted 15 October 2012 - 11:58 AM

View Postexiles.prx, on 14 October 2012 - 02:56 PM, said:

Since you are floating the heimild and hofundur within the footer element, the footer will collapse. You will either have to set a min-height on the footer or insert a <div style="clear:both"></div> right before your closing footer element.

Thank you! Clearing the <div> worked! :D Too bad I had to turn it in before you replied :P But it still feels awesome to have been able to fix it :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1