Forum Moderators: not2easy
I have 2 lines
top line - blahblah blah 123
bottom line - blahasoau uo 1234 - <img src="ex.gif">
only problem is the image is taller than the text.
but I want to reduce the gap between the 2 lines.
hope that makes sense.
I have tried all manner of things but the only thing that works is removing the image - not good lol
top line - blahblah......+------+
blah 123.................¦......¦
bottom line - blahasoau..¦......¦
uo 1234..................+------+
could be achieved by moving the image to the first line and floating it right
If you'd rather risk the text of the first line running into the image, you could set negative margins on the second line.
basically i want the top 2 line of text
on the third line is more text followed by an image of 5 stars. they go slightly above the text in the height so im left with the top 2 lines nicely spaced but the third line text is to far below because of the image on that line. I want to move the bottom line so it is nearer the 2nd line.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p {
background-color:green;
}
p img {
height: 30px;
width: 50px;
display: inline-block;
margin-top: -20px;
}
</style>
</head>
<body>
<p>first line<br />
second line <img src="1.jpg" />.</p>
</body>
</html>
Note that I had to use display: inline-block and that it might not work all that great in the older versions of firefox still in use (it works in FF3, safari, opera and even in IE7 and IE6)
Many thanks I can now finally move on lol.
