Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not working on another. Works OK in Firefox.
p.unindent {
color: #555555;
background-color: #e6e6e6;
border-bottom: 1px solid #d3d3d3;
border-left: 1px solid rgba(0,0,0,0); /* so things are the same size so we don't develop scroll bars*/
border-right: 1px solid rgba(0,0,0,0);
border-top: 1px solid rgba(0,0,0,0);
padding-top: 2px;
padding-bottom: 2px;
padding-left: 25px;
padding-right: 5px;
margin-top: 0;
margin-bottom: 0;
}
p.unindent:first-letter {
margin-left: -20px;
}
p.unindent.menuitemon {
color: #e6e6e6;
background: #555555;
border: 1px solid #222222;
border-radius: 4px;
}
Can someone point out what I might be doing wrong that's causing this?
You've done nothing wrong. Apparently Chrome has decided that for version 41, it'll screw up repainting the :first-letter pseudo-element (incidentally, Chrome is notorious for repaint bugs). If you declare the "menuitemon" class in the markup, it has no trouble rendering the pseudo-element with the negative margin. It's only when you add it dynamically that it screws up.
Fortunately, unlike the cascade resolution bug that affected Chrome 39 -> 40, I was able to work around this very trivially by using a negative text-indent on the element instead of a negative margin on :first-letter:
p.unindent {
text-indent: -20px;
/* ... */
}
/*
p.unindent:first-letter {
margin-left: -20px;
}
*/
The pseudo element (:first-letter) only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)
You must set pseudo's parent to
.parent {display:block}
.menutitle {
/* font-size: 1.2em; */
font-weight: bold;
/* font-style: italic; */
margin-left: 0;
}
the moment i commented those two lines it worked properly
EDIT
nop it only solved half the problem
Codepen
Related
I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>
I have a little issue with my context menu, the CSS doesn't apply and the event on click doesn't work too. If i inspect the element with F12 (on IE 11), I can see the CSS is on the page (in the header) and I can see that all line of the context menu have the event on click but it doesn't work when I click.
CSS :
.ctxmenu
{
position: absolute;
height: auto;
padding: 0px;
margin: 0;
margin-left: 0.5em;
margin-top: 0.5em;
border: 1px solid black;
background: #F8F8F8;
z-index: 11;
overflow: visible;
}
.ctxline
{
display: block;
margin: 0px;
padding: 2px 2px 2px 8px;
border: 1px solid #F8F8F8;
overflow: visible;
}
.ctxline:hover
{
border: 1px solid #BBB;
background-color: #F0F0F0;
background-repeat: repeat-x;
}
for the constitution of the contextMenu :
for (i = 0; i < listCorrection.length; ++i) {
var p = document.createElement('p');
d.appendChild(p);
p.setAttribute('class', 'ctxline');
p.setAttribute('onclick', 'alert("do something");');
p.innerText = listCorrection[i];
}
when I inspect the element of this context Menu i can see :
<p onclick="alert("do something");" class="ctxline">set</p>
and the div containing the context Menu :
<div id="ctxmenu1" style"CURSOR: pointer" class="ctxmenu">(the p on context menu are here)</div>
does anybody have an idea why ? i try to moove it Inside the header with a but it is still not working.
Well after several hours spend on this issue i might have find a fix, if someday someone end up on this page try this :
replace every line that are like this :
p.setAttribute('class', 'ctxline');
by something like this :
p.className = 'ctxline';
I know it's the same thing, but well IE so sometimes you have to think outside the box (this fix work for IE11, IE9, I did not test with other Navigator).
I have a CSS-class RoundedActivityCell in my stylesheet, like this:
.RoundedActivityCell {
-moz-border-radius: 4px 4px 4px 4px; /* rounds corners for firefox */
border-radius:4px 4px 4px 4px; /* rounds corners for other browsers */
float: left;
text-align: center;
vertical-align: middle;
height: 18px;
width: 150px; /* Follows the grid columns */
border:solid 2px;
padding: 3px;
}
Then I have a span in my cshtml file, like this:
<span class="RoundedActivityCell" id="signalRAsxActivity-#:ViewUnitContract.ConveyanceId #">
#: ViewUnitContract.Status.StatusText#
</span>
I know how to apply certain css properties like border-color etc. using jquery, but I was wondering if it's possible to remove the class="RoundedActivityCell" part from the html tag and set that using jquery instead?
I.e (Never mind the conveyanceId part, it's automatically generated and works the way it's supposed to :) ):
$('#signalRAsxActivity-' + conveyanceId).css.class('RoundedActivityCell');
Use addClass:
$('#signalRAsxActivity-' + conveyanceId).addClass("RoundedActivityCell")
I have two divs that are inline. they both have similar styles and importantly both are inline.
JQuery is reporting that their css "display" is block ONLY in chrome. I really need to know that these two are inline.
jsfiddle here
css:
div
{
display: inline;
width: 50%;
float: left;
height: 100px;
text-align: center;
font-weight: bold;
padding: 10px;
box-sizing: border-box;
}
.div1
{
background-color: black;
color: white;
border: 2px solid grey;
}
.div2
{
background-color: white;
color: black;
border: 2px solid black;
}
html:
<div class="div1">1</div>
<div class="div2">2</div>
jQuery:
jQuery("div").click(function()
{
jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>");
});
jQuery("div").click();
Does anyone know what is happening or more importantly what can I do? (other than pull my hair out... its starting to hurt ;) )
As I said in my comment, float: left forces display: block.
Here's the relevant information in the spec:
http://www.w3.org/TR/CSS21/visuren.html#propdef-float
The element generates a block box that
is floated to the left.
And then:
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.
I want to create a link with the rounded corner effect.
However, the rounded corner effect will show while hover only.
By using CSS3, it's working fine on mozilla, chrome and Safari, but not in IE.
Here my css
a {
color: black; background-color:#ddd;
text-align: center;font-weight: bold;
width:110px; height:25px;
padding: 10px; text-decoration:none;
}
.abc:hover {
background-color: lightblue;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}
Here my html
Button
As #Michael Rose says, IE8 and lower simply do not support CSS3 rounded corners.
There are a variety of workarounds to apply rounded corners in these versions of IE.
To my knowledge, the best of these workarounds is CSS3 PIE.
See another relevant answer I wrote:
Is .htc file a good practice in older versions of IE for rounded corners like CSS3 has?
Edit in response to your edited comment: I'm reasonably sure CSS3 PIE supports :hover properly.
Edit 2:
I just tried it, this CSS works:
a {
color: black; background-color:#ddd;
text-align: center;font-weight: bold;
width:110px; height:25px;
padding: 10px; text-decoration:none;
behavior: url(PIE.htc);
}
.abc:hover {
background-color: lightblue;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}
To make it work, I moved the behavior property to the a block instead of the .abc:hover block.
It's simply because rounded borders are only implemented in IE9 and not below.
You might check the compatibility with IE9, just add
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
to your page header and it's going to work, hopefully isA
Try this. It will work for IE9
<div class="rounded" style="background:#ddd"></div>
.rounded {
height: 100px;
width: 100px;
margin-right: 20px;
padding: 5px;
border:2px solid #404040;
border-radius: 5px;
}