therschbach Posted February 16, 2009 Share Posted February 16, 2009 Anyone know how to fix this? This space appears to be about 5 pixels and appears under each image with no formatting, separating it from the next element. I could take this space into consideration when doing alignment, but it's not the same separation between FF and IE7. It's 1px difference I think. I found a way to fix it in IE.... I just add a <br> at the end of every image. However, this doesn't have an affect in FF. I'm stumped. Thanks in advance. Link to comment Share on other sites More sharing options...
therschbach Posted February 17, 2009 Author Share Posted February 17, 2009 Ah, I just found on good 'ole google. Nevermind! Link to comment Share on other sites More sharing options...
therschbach Posted February 18, 2009 Author Share Posted February 18, 2009 Well, I thought I had it working using display:block, but I guess not. The space is still there under my images. <br> fixes it in IE, but not FF, and the space is larger by 1px in FF. Any ideas? Link to comment Share on other sites More sharing options...
jlhaslip Posted February 18, 2009 Share Posted February 18, 2009 What do you have for code?Does text-align: bottom work? Link to comment Share on other sites More sharing options...
Ingolme Posted February 18, 2009 Share Posted February 18, 2009 What do you have for code?Does text-align: bottom work?Do you mean "vertical-align: text-bottom"? Link to comment Share on other sites More sharing options...
therschbach Posted February 18, 2009 Author Share Posted February 18, 2009 This is what I have now. Here's the thing....if I put display:block in the html <img>, it works and collapses the space. But it doesn't work if I put it in the css. I must have something overriding it or something, but I don't have any styling or css embedded in the html, and the only container div is the #entire listed below. This contains everything. I don't see what could be causing the problem. (I have some leftover stuff in the code that I've been using to try to find the problem, such as the z-index and background color. Please disregard this stuff.) body{background-image:url('pictures/coinbackground.jpg');}p {font-family: arial;}div#entire {margin: 15px auto;width: 900px;border: solid 3px black;}div#bannertop{display: block;background-color: red;}div#bannerleft{display: block;width: 81px;/*position: relative;top: -4px;*/z-index: 3;}div#overlapquarter{display: block;width: 70px;/*position: relative;top: -696px;left: 81px;*/z-index: 2;}div#bannerright{display: block;width: 22px;/*position: relative;left: 878px;top: -788px;*/z-index: 3;}div#menubar{text-align: center;width: 797px;background: black;position: relative;top: -1342px;left: 81px;z-index: -1;}div#menubar img{margin: 3px;vertical-align: middle;} Link to comment Share on other sites More sharing options...
therschbach Posted February 18, 2009 Author Share Posted February 18, 2009 Ahhhh, I'm an idiot. I just realized what I'm doing wrong. I was applying the block to the div and not the img. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 18, 2009 Share Posted February 18, 2009 You are being too hard on yourself... give yourself some credit for figuring it out... good job, I say! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.