forum.userstyles.org

IanN1990

Heya, i know the information on this will be a little loose but alas i dont have much to work with :)

I use stuff like -moz-border-radius: 0px !important; but i can when i zoom in i can still gaps in the corner of the tooltips border. Any ideas on how i could make it completely straight ??

luckymouse

Note: When asking for help about style development, put the topic under the "Style Development" category for convenience to others (consequently may get you a faster response)

Use this.

tooltip {-moz-appearance: none !important;}

IanN1990

i just tryed that code, and the edges are still rounded "ie missing a pixel in each corner" :(

luckymouse

Try using border-radius, not -moz-border radius.

"border-radius: 0 !important;"

IF that doesn't work, try combining with border: 1px solid black !important;}

tooltip {

-moz-appearance: none !important;
border-radius: 0 !important;
border: 1px solid black !important;}

(I'm guessing here)

Edit: Never mind, tried it, not working for me either.

makondo

I recall something about this (well, it was about tabs, i believe) in one of the nightlies threads. I believe, they use image (!) for those corners. Might need to search mockups a bit or something.

EDIT: wait! just looked at my style here, i get something like that too but it's hardly visible so i never really paid attention:

luckymouse

Pretty sure it's a characteristic of the user's operating system.

Windows XP doesn't have rounded tooltips, WIndows 7 does.

Setting some properties to their default values is not eliminating the rounded corners.

tooltip:not(#asdf):not(#adsf) {

-moz-appearance: none !important;
border-radius: 0 !important; -moz-border-radius: 0 !important;
border: 1px solid black !important;
-noz-border-image: none !important;
background-color: #fff !important;
-moz-box-sizing: content-box !important;
clip: auto !important;
outline: none !important;
background-clip: border-box !important;}

makondo

Doesn't seem to make much of a difference here:

IanN1990

i am loving all the support this topic is getting, though all the code listed i have tryed with no success :(

Ohne Mitleid

Does -moz-border-image: none !important; have the same effect as background-image:none !important;?

IanN1990

nope still no effect :(

srazzano

Apply whatever custom appearance to the tooltip-label.

tooltip {
-moz-appearance: none !important;
background: none !important;
border: 1px solid transparent !important;
}
.tooltip-label {
background: #CCC !important;
border: 1px solid #000 !important;
color: red !important;
padding: 4px !important;
text-shadow: black 1px 1px 1px !important;
}

luckymouse

Ah, I see.

srazzano

tooltip {
-moz-appearance: none !important;
background: none !important;
border: 1px solid transparent !important;
}

tooltip {
-moz-appearance: none !important;
background: none !important;
border: 1px solid transparent !important;
}
.tooltip-label {
background: #CCC !important;
border: 1px solid #000 !important;
color: red !important;
padding: 4px !important;
text-shadow: black 1px 1px 1px !important;
}

luckymouse

Yep, it's just a matter of getting the child to mimic the general appearance of the parent element.

Ryo slankers abadi

luckymouse said: Pretty sure it's a characteristic of the user's operating system.

Windows XP doesn't have rounded tooltips, WIndows 7 does.

Setting some properties to their default values is not eliminating the rounded corners.

tooltip:not(#asdf):not(#adsf) {

-moz-appearance: none !important;
border-radius: 0 !important; -moz-border-radius: 0 !important;
border: 1px solid black !important;
-noz-border-image: none !important;
background-color: #fff !important;
-moz-box-sizing: content-box !important;
clip: auto !important;
outline: none !important;
background-clip: border-box !important;}

IanN1990

srazzano said: tooltip {

-moz-appearance: none !important;

background: none !important;

border: 1px solid transparent !important;

}

.tooltip-label {

background: #CCC !important;

border: 1px solid #000 !important;

color: red !important;

padding: 4px !important;

text-shadow: black 1px 1px 1px !important;

}

The code works well, very creative thinking the only problem is it doesn't work with https://addons.mozilla.org/en-US/firefox/addon/url-tooltip/ which is the main reason i wanted this :(

**Edit The tooltip the addon produces doesn't seam to have a .tooltip-label so instead the tooltip is very transparent and almost impossible to read :)

IanN1990

is there any way to get your script to work while keeping the functionality of the addon ?

srazzano

tooltip, #aHTMLTooltip, urlTooltip, bhTooltip {
-moz-appearance: none !important;
background: none !important;
border: 1px solid transparent !important;
}
.tooltip-label, #aHTMLTooltip description {
background: #CCC !important;
border: none !important;
color: red !important;
margin-top: -2px !important;
padding: 0px 4px 4px 4px !important;
text-shadow: black 1px 1px 1px !important;
}
#aHTMLTooltip description#label {
border: 1px solid #000 !important;
}
#aHTMLTooltip description#uri {
border: 1px solid #000 !important;
border-top: none !important;
}

IanN1990

Works perfectly :) Thanks all that has taken part in this discussion and kudos to Srazzano for solving the problem :)

forum.userstyles.org

Howdy, Stranger!

Categories