rin67630 Posted August 23, 2015 Share Posted August 23, 2015 (edited) Hi experts here, maybe someone coud give me a hint: I have defined my hyperlinks to be bordered on hover: a:link { color: #808080; text-decoration: none; border-style: none none none none; } a:hover { border-style: dashed; border-color: #808080; text-decoration: none; border-width: 1px; border-color: #808080; border-radius: 5px that works fine for texts, but not for images. If an image has a hyperlink, only a part of the border will be displayed, I would have expected to have the whole image wrapped. You might see it here: http://www.schirmer-mosel.com/deutsch/presse.htm (hover at the ten images by Audrey Hepburn.) I could live with that, but it comes worse: If the image has an attibute "float:right" the "border" will be reduced to a line snippet pretty far away from the upper left of the image (hover at the two images on the left menu). Has anyone got a clue how to get it right? Alternatively, which solution could I have to get the image aligned to the right, without the float:right attribute that seems to jeopardize the border on hover? That behavior is consistent across many browsers, only old IE7 seems to wrap the images as I would expect. Thanks a lot for your advice. Edited August 23, 2015 by rin67630 Link to comment Share on other sites More sharing options...
Ingolme Posted August 23, 2015 Share Posted August 23, 2015 Set the link's display to inline-block. Borders on inline elements only wrap around the lines of text. When you want an element to wrap around something that was floated you can set their overflow property to hidden or auto 1 Link to comment Share on other sites More sharing options...
rin67630 Posted August 23, 2015 Author Share Posted August 23, 2015 (edited) Thank you Foxy, for your incredibly fast and helpful reply. The display:inline-block attribute worked. That had some side effects, so I had to add overflow:auto to the containers. It however completely jeopardizes the float property, irrespective of being declared in a style: <style> img { float: right; margin: 6px; overflow: hidden } </style> or given in the image itself: I just can't get the image to align to the right cleanly. Finally, I cheated and have placed an invisible image at the left, but that's the dirty way, isn't it? Who has got a better idea? Thanks a lot for your help. RIN Edited August 23, 2015 by rin67630 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2015 Share Posted August 23, 2015 First thing is NOT to use current doctype <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">, use HTML5 doctype. <!DOCTYPE html>, you are not using frames and HTML5 doctype is the preferable current doctype to use. Second is NOT to use tables. Once you have done this, float link/image parent container right and make sure the combination of padding, margins, borders width are the same at default state, and hover state. You can try using transparent border, or add 1px margin for default state and then remove it for hover state, because at the moment images go all over the place when image is hovered over. Link to comment Share on other sites More sharing options...
Ingolme Posted August 23, 2015 Share Posted August 23, 2015 The overflow goes on the link, not on the image. Link to comment Share on other sites More sharing options...
rin67630 Posted August 23, 2015 Author Share Posted August 23, 2015 First thing is NOT to use current doctype <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">, use HTML5 doctype. <!DOCTYPE html>, you are not using frames and HTML5 doctype is the preferable current doctype to use. Second is NOT to use tables. Thank you. I just have a long way behind me to migrate a 10 years old site to (mostly) non-obsolete code. I have also to deal with my existing manpower, so doing it with caution. I still have some deprecated code along, hope to get rid of it soon... But you helped me, it looks acceptable now. My customer is'nt sad to see the objets shiver slightly on hovering. That draws attention to active objects. Thanks I consider my request solved. Link to comment Share on other sites More sharing options...
rin67630 Posted August 23, 2015 Author Share Posted August 23, 2015 The overflow goes on the link, not on the image. Ooops! Thas was not obvious. Thank you for your patience. Link to comment Share on other sites More sharing options...
Hilal Posted August 24, 2015 Share Posted August 24, 2015 Its is best to place your image in a div or any span give the width 100% and apply border and width on span or div you can get Excellent results. Link to comment Share on other sites More sharing options...
Ingolme Posted August 24, 2015 Share Posted August 24, 2015 The modern approach is to give the image a max-width of 100% and put the image in a <figure> element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now