DIVS, CSS and Iframes

Question

I have this DIV:

#bar {
  margin: 5px 0px 10px 0px;
  height: 25px;
  background:#c0c0c0;
  color: #E0E0E0;
  border: 2px solid #444444;
  background: #333333;
  padding: 5px;
}

And this Iframe:

<div id="bar">
<iframe src="myvotes.php?u=<? echo $_GET['u']; ?>" width="100%" height="28px" scrolling="no" frameborder="0"></iframe>
</div>

Inside the iframe (myvotes.php) there are 5 small images 16 x 16 each followed by some text. I am trying without success to have the images and text vertically aligned in the [div id="bar"].

First off, how high should my iframe be. I have tried everything from 16px to 35px. I have tried adding various combinations of padding and margins to get it t center, but no luck,

Again, I have no link to provide, but any help is appreciatred. These little things are so annoying and waste huge anounts of time I don't have.

Answer 1

I'm not 100% positive if this will answer your question, because I'm a little unsure of what you're trying to do, but an easy way to vertically align images is to set the vertical-align property on them:

#bar img {
    vertical-align: middle; 
}

If that doesn't work, you can also try setting the line-height to the same height as the div:

#bar {
    height: 28px;
    line-height: 28px;
}

And totally unrelated, any text you indent 4 spaces on this site will give it code style formatting.

Answer 2

I have no idea what I did but I just messed around with all the values and got it, but I should not have to do that. I don't know how other programmers deal with kind of thing, but after this project, I am just tossing it in. Too many hours of screwing around with things that really should only take a few minutes, but end up taking hours.

Ok enough of my rant, thanks for the suggestions, and I could not find a code button when posting this so had to improvise.

Also vertical-align is self explanetory, but it does not work as I expected. I think I remember reading somewhere that there is always a space around images. Not sure.

Answer 3

I think you need to specify what you mean by vertically aligned. But the important thing to know here is that iframes are tricky beasts. Essentially they are a webpage within a webpage and everything is aligned to the upper left hand corner if there are no styles associated with that "inner" page.

What you might want to do is have myvotes.php echo the content you want wrapped in a div that has the appropriate css applied to it. I believe myvotes.php would also have to have to have it's own css, which is where the div gets it's style from. If you could provide some source code for myvotes.php I might be able to help you further.

Answer 4

Not sure of your question but I will try to give you a solution where you can align your 16x16 images vertically.

Create a div inside your myvotes.php and keep your images inside it. An Example.

<div id="someone" style="width:16px;">
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
</div>

This will bring your images in a vertical column.

Now your main div and iframe

<div id="bar">
<iframe src="myvotes.php?u=<? echo $_GET['u']; ?>" width="100%" height="80px" scrolling="no" frameborder="0"></iframe>
</div>

I am not sure, this is your answer though. Anyways hope it helps.