Check out the following link: http://65.36.199.60/test.html
The red bottom border isn't stopping for my right aligned image, but my h2 text is. Any ideas why this is happening, and how to have the bottom border stop where the right image starts?
Thanks,
X.
Yes, the problem is that the border underlines the complete "box" that the H2 would normally fill. The image comes along and alters the text, but the border is already drawn and ignores that. It's a small rendering problem, same would say a bug.
The fix is to force the H2 to display a certain way. Add display: table-cell; to your style declaration for the H2. That fixes it in FireFox, IE still has a bug, but not as dramatic. You can play with other values for "display" to see if one works better for you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title></head><body>
<div style="width: 700px;">
<img src="nokia9300.jpg" alt="" style="padding: 10px; float: right;" border="0" height="281" width="336">
<h2 style="border-bottom: 1px solid red; display: table-cell;">Analysis: Paid search results often not worth the click</h2>
</div>
</body>
</html>yep, that fixed it in firefox. Thanks for your help!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.