By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

Floated dv with bg image takes no space?

P: 35
Okay I've got a problem which wouldn't be a problem if IE was not around, but yeah, IE is giving me trouble.
I've got a tag-cloud that is on my page; everything was fine. Sort of like this:
<header>
<tags>
<footer>

I then decided I wanted to have two images at the top of it, like so:
<head1><head2>
<tags>
<footer>

(to see in action, confusinglygood.com. It's on the right, can't miss it)

With each head being a bg image, and a link, to change the content. I had previously found a trick online to make bg images behave as links; basically you put a hidden span inside of the links inside of the div; the span makes it so there is content inside the div so you can click it (I think). Looks like this:
[html]<div id="logo">
<a href="http://www.confusinglygood.com/" title="Go Home">
<span>ConfusinglyGood.com</span>
</a>
</div>[/html]

And the css for this:

Expand|Select|Wrap|Line Numbers
  1. #logo a {
  2.     background: url(../images/design/backgrounds/header2.png) no-repeat !important;
  3.     background: url(../images/design/backgrounds/header2.gif) no-repeat;
  4.     display: block;
  5.     height: 143px;
  6.     width: 732px;
  7. }
  8.  
  9. #logo a:hover {
  10.     color: none;
  11.     background-color: none;
  12.     text-decoration: none;
  13. }
  14.  
  15. #logo a span {
  16.     visibility: hidden;
  17. }}
This worked fine with my logo up top, but now I want to float the divs side by side. In Fx 2 it's not floating them (I think it considers the hidden span to be no content), and in IE it does float them. So I added left 183px to the right div to make it move over, but of course that makes IE move it WAY over.

I don't want to absolutely position the elements, but if I must then I will.
Is there an easier/better way to achieve this?
Feb 20 '07 #1
Share this Question
Share on Google+
3 Replies


Expert 100+
P: 1,892
Okay I've got a problem which wouldn't be a problem if IE was not around, but yeah, IE is giving me trouble.
I've got a tag-cloud that is on my page; everything was fine. Sort of like this:
<header>
<tags>
<footer>

I then decided I wanted to have two images at the top of it, like so:
<head1><head2>
<tags>
<footer>

(to see in action, confusinglygood.com. It's on the right, can't miss it)

With each head being a bg image, and a link, to change the content. I had previously found a trick online to make bg images behave as links; basically you put a hidden span inside of the links inside of the div; the span makes it so there is content inside the div so you can click it (I think). Looks like this:
[html]<div id="logo">
<a href="http://www.confusinglygood.com/" title="Go Home">
<span>ConfusinglyGood.com</span>
</a>
</div>[/html]

And the css for this:

Expand|Select|Wrap|Line Numbers
  1. #logo a {
  2.     background: url(../images/design/backgrounds/header2.png) no-repeat !important;
  3.     background: url(../images/design/backgrounds/header2.gif) no-repeat;
  4.     display: block;
  5.     height: 143px;
  6.     width: 732px;
  7. }
  8.  
  9. #logo a:hover {
  10.     color: none;
  11.     background-color: none;
  12.     text-decoration: none;
  13. }
  14.  
  15. #logo a span {
  16.     visibility: hidden;
  17. }}
This worked fine with my logo up top, but now I want to float the divs side by side. In Fx 2 it's not floating them (I think it considers the hidden span to be no content), and in IE it does float them. So I added left 183px to the right div to make it move over, but of course that makes IE move it WAY over.

I don't want to absolutely position the elements, but if I must then I will.
Is there an easier/better way to achieve this?
Have you found a solution to this?

Aric
Feb 22 '07 #2

P: 35
Have you found a solution to this?

Aric
Not yet. Was going to bump the thread soon but I've been busy with other things. Any ideas? I think soon I'll need to start trying to come up with another solution for this, start from scratch. Maybe just have an image inside the div and not as the BG, that would probably be better anyway.
Feb 23 '07 #3

Expert 100+
P: 1,892
Not yet. Was going to bump the thread soon but I've been busy with other things. Any ideas? I think soon I'll need to start trying to come up with another solution for this, start from scratch. Maybe just have an image inside the div and not as the BG, that would probably be better anyway.
I have some erronds to run then I'll look at the site again and see if I can come up with an idea.
Feb 23 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.