george Posted March 25, 2011 Share Posted March 25, 2011 I have a web site and it looks close to what I want in ie, but if firefox there is a white space between the top image and the left side image. With both IE and Firefox, beneath the top image about center I have a small box with a blue background. The golden shapes are to be the left and right end caps for a menu. I used margin left to get the position from the main content left edge, but I can't position the top. In IE the gold colored images slightly overlap the top image. In Firefox, the golden images are flush with the bottom of the top image. I may be altogether using a wrong headed approach here. Suggestions are very appreciated. Link to comment Share on other sites More sharing options...
george Posted March 25, 2011 Author Share Posted March 25, 2011 In the main content area, I can't seem to get my right margin right either. Link to comment Share on other sites More sharing options...
Ingolme Posted March 25, 2011 Share Posted March 25, 2011 My internet is slow and I think it's making your page not load at the moment, so I can't see what it looks like.You're using a negative top magin on the golden parts, are you? Try not setting the top margin.The reason that there is a space between the top image and the one below it is because images are inline and automatically have a little space under them. Apply "vertical-align: middle" to the image element that has the gap below it. That should solve that problem. Link to comment Share on other sites More sharing options...
george Posted March 25, 2011 Author Share Posted March 25, 2011 #topimg { vertical-align:middle; } had no visable effect at all. Link to comment Share on other sites More sharing options...
thescientist Posted March 25, 2011 Share Posted March 25, 2011 if the site you linked is up to date (it looks like it is) you have no element with the id topimg for that style to affect. Link to comment Share on other sites More sharing options...
jeffman Posted March 25, 2011 Share Posted March 25, 2011 Rethink your whole plan for organizing the page. The top image and the side image should not be in the same div because they are not on the same horizontal. Don't use a <br> for anything but text. Don't rely on a position rule to line things up correctly. Let the top image be one div, and the side image and text be in the next div. Position the content using floats and margins.EDIT. Continue to use an absolute positioning rule to place the big red tag image. That's really what absolute positioning is intended for: things that must be taken out of the normal flow. Link to comment Share on other sites More sharing options...
george Posted March 25, 2011 Author Share Posted March 25, 2011 Thanks Deirdre's Dad, that is exactyly what I did, and everything went right into place. Then the client didn't like the design, so this rendition of my positioning problem is over. But I still have a knowledge gap about positioning when I want an image to appear on top of another image('s). I have tried using absolute and relitive positioning, but this always seems to introduce other positioning problems. I have a nice CSS reference book. I think I'll go bury my nose it it a while. Thanks again for your help, as always. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.