Forum Moderators: not2easy
I coded some css so that various text links with accompanying icons were enclosed in boxes using the span tag with a border attribute. However, both Netscape and Opera rendered this in such a way that the border of the span was only high enough to encompass the text, and the icon was left sticking out the top of the border.
IE rendered it as I expected to, that is with the icon fully enclosed within the span's border line. However, I decided that I preferred the way that Netscape/Opera render it so I'm trying to find a way to accomplish the same effect in IE.
I already tried using another borderless span which moves the image x pixels to the right, using relative positioning, and some left padding in the bordered span (now containing only text), and although this works fine for IE and Opera, Netscape/Mozilla sometimes chops off the part of the image that sticks out above the inner span, even if I tinker with z-index values (although oddly it only does this for the center link - there are three text/icon pairs in a row, in this particular example).
Here is the current code for any one of the links:-
<span style="position: relative; left: 20px; z-index: 1;">
<a href="some_page.html"><img src="some_icon.gif" border="0"></a></span>
<span style="padding: 5px 5px 5px 20px; border: 1px #555 dashed;">
<a href="some_page.html">link</a></span>
Does anyone have a suggestion as to why Netscape/Mozilla acts this way, or an alternate way to achieve the same effect?
As I understand it, the differences are due to the different box models the different browsers use. Try adding this in the head of the document:
<style type="text/css">
*{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
That should make Opera / NN render the same as IE, then you can just get it how you like it in one and the others should all look the same (in theory).
I think that will work, but as Lao Tse once said...'the CSS that can be spoken is not the eternal CSS' ;)
Jordan
that helped me with a problem i was having with something similar to what daosmith described... in my case, i was wanting a div to expand to be (at least) the height of the image... i tried divs in divs with more divs... argh! maybe i can clean it up a bit more, now...
