Image is causing vertical alignment problems
I have the following div layout:
Everything is fine when I put normal txt elements in both the blue and orange divs. However, when I place the image in the orange div (which is 31px), the elements in the blue div are offset by about half the height of the blue div.
(the extra information hovering over the html for the orange div in firebug seems to contain only half of the image, although it looks fine to the naked eye).
Would appreciate any help, I'm still a little rusty on the box. Thank.
source to share
You might want to try moving the image to the left of the text. This way the text will be positioned next to the image without the need for positioning. For example:
<style>
div {
position: absolute;
border: 1px solid blue;
}
div img {
height: 31px;
width: 50px;
float: left;
}
</style>
<div>
<img src="myImage.gif">
<p>Lorem ipsum dolor sit amet...</p>
</div>
Adjust the layout by giving your container div an padding and / or image in the box and you can get exactly the look you want. Good luck!
source to share
I am not very good with CSS blocks, but I can add: display: inline; to the picture style to fix the palm? And / Or adding a margin: 0px;
Oh, and this is a great translation in Quirks mode, as not rendering it in Quirks mode can fix some issues too.
Edit
By quirks, I mean if your page has a DOCTYPE declaration like the one below (although you should use a DOCTYPE cursor)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
more on DOCTYPES here: http://htmlhelp.com/tools/validator/doctype.html
source to share