I tried using a button tag with overflow: hidden and an inner img tag with position: relative and left: -34px. The image is not positioned correctly by 4px.
styling:
#user-menu button,
#user-menu .sheet17x17 {
background-color: transparent;
cursor: pointer;
}
#user-menu .sheet17x17 {
margin: 2px;
width: 17px;
height: 17px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
#user-menu .sheet17x17.sheet-effects>img {
position: relative;
}
#user-menu .sheet17x17.sheet-effects:hover>img {
right: 17px;
}
#user-menu #user-menu-profile:hover>img {
outline: solid azure 1px;
}
#user-menu #user-menu-social>img {
margin-left: -68px;
margin-top: -143px;
}
html:
<div id="user-menu">
<span id="welcome-msg" class="lang-content">Welcome, </span><span id="goto-profile">Guest!</span>
<button id="user-menu-profile"><img src="profiles/erich.seac/avatars/avatar-28x28.png" /></button>
<button id="user-menu-comm" class="sheet17x17 sheet-effects"><img src="css/kacang.png" /></button >
<button id="user-menu-social" class="sheet17x17 sheet-effects"><img src="css/kacang.png" /></button >
<button id="user-menu-aux" class="sheet17x17 sheet-effects"><img src="css/kacang.png" /></button >
</div>
----- however this works -----
<div id="user-menu">
<span id="welcome-msg" class="lang-content">Welcome, </span><span id="goto-profile">Guest!</span>
<button id="user-menu-profile"><img src="profiles/erich.seac/avatars/avatar-28x28.png" /></button>
<div id="user-menu-comm" class="sheet17x17 sheet-effects"><img src="css/kacang.png" /></div>
<div id="user-menu-social" class="sheet17x17 sheet-effects"><img src="css/kacang.png" /></div>
<div id="user-menu-aux" class="sheet17x17 sheet-effects"><img src="css/kacang.png" /></div>
</div>Modified by cor-el
الحل المُختار
You can post a more complete test case using this site if you don't have other hosting: jsFiddle
Read this answer in context 👍 0All Replies (9)
Sorry, the forum's wiki-based markup is not friendly to hash symbols. If you can edit your post and place a space before each # symbol, it will not be turned into a number.
I've edited the text to show the CSS and HTML code properly.
Which DOCTYPE are you using (if any) to avoid Firefox from using quirks mode?
By default:
button {padding: 0 6px;}
div {padding: 0;}
That might explain the discrepancy.
Thanks for the reply and I see that my code sample is by far not complete.
Based on what I posted that would be a fair conclusion, however that is not the case. I do in fact set the padding to 0px for buttons inside the div in the actualy case.
Thank you for taking the time to answer by question and sorry for not providing enough information.
thanks for the tip.
thanks
الحل المُختار
You can post a more complete test case using this site if you don't have other hosting: jsFiddle