This issue happens in ALL browsers. Mac or Windows, PC or mobile. It would be nice to have an expert in CSS rendering engines answering this since it doesn't look like an actual bug but a rendering issue instead.
HTML
<a> </a>
CSS
/* just for style */
body {
background-color: black;
text-align: center;
}
a {
/* using the next 3 rules together triggers the leak/bleed problem */
border-radius: 20px;
box-shadow: inset 0 0 0 15px black;
background-color: white;
/* just for style */
display: inline-block;
padding: 5em;
}
CodePen demo: http://codepen.io/nunoarruda/pen/cbCxH
Related
I'm having my html-css practice day. Right now, the NAV-Bar-Menus are appearing on the upper left of the screen (vertically). I have tried checking CSS cheat sheet regarding display, flex, etc., google, and all but its still not working. Any help for a newbie would be appreciated :)
Here's the CSS:
<style>
.nav-bar {
display: flex;
align-items: center;
width: 100%;
padding: 10px;
font-family: Arial;
background-color: orangered;
color: white;
font-size: 20px;
text-decoration: none;
list-style: none;
margin: 0;
}
</style>
and here's the HTML:
<nav>
Home
Wordpress+
Web Design+
Graphic Design
Inspiration
Contact
About
</nav>
I am new to bootstrap and made some stuff.
but there is a specific effect of highlight a text i can't reach. i made it wrong many times - like the BG was offset or the line had no spacing and many more problems.
Can you please explain me how to do this ?
Tenter image description herehank !
edit:
Thae image is photoshop, how the final result should look
Or you could work with a border and padding like in the following demo and this fiddle.
For the unhovered link I've added a transparent border to avoid jumping on hover. You could probably also do this with margin/padding.
.styled-link {
color: #5F6065;
font-size: 2em;
padding: 15px;
border-left: 2px solid transparent;
margin: 5px;
text-decoration: underline;
}
.styled-link:hover {
color: gray;
background-color: #D1E7FE;
font-size: 2em;
border-left: 2px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Highlighted link
Does this answer your question?
With the use of pseudo elements we can make a ::before element appear on hover
https://jsfiddle.net/jfe1uf50/
.cool-link {
color:red;
position:relative;
padding:0 15px;
&:hover {
color:blue;
&::before {
position:absolute;
left:-5px;
content:"";
height:100%;
width:3px;
background-color:blue;
}
}
}
Hello World!
I'm finding MathJax a superior alternative to MathML. However, I'm having some trouble getting MathJax to render while using a :hover event in my CSS:
span.rollover span {
display: none;
position: absolute;
background-color: white;
padding-left: 7px;
padding-right: 7px;
border: 1px solid red;
color: navy;
font: 1em "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif;
text-decoration: none;
border-radius: 10px 10px 10px 0;
opacity: 0.9;
text-align: center;
vertical-align: middle;
white-space: nowrap;
line-height: 150%;
}
span.rollover:hover span {
display: initial;
top: -30px;
z-index: 50;
}
At the moment it's displaying garbage; a current draft of the page can be found here. Here's an example of the problem:
<span class="rollover">Initial angle<span>0.0 ≤ $\theta_0$ ≤ 1.6 rad</span></span>
Is there a way to force MathJax to render the markup for such an event?
Your CSS is too aggressive: it applies to every span within your rollover spans. Since MathJax uses spans to lay out the mathematics, it applies to those, and so you are forcing the position, border, top, etc. for every element used by MathJax. That means you are moving the math content out of place, and giving it borders, and so on (this account for some of the extra elements that appear above the ones you expect.
If you change
span.rollover span {
...
}
span.rollover:hover span {
...
}
to
span.rollover > span {
...
}
span.rollover:hover > span {
...
}
so that these styles only apply to the top-level child spans (rather than every span), that should do it for you.
What I am trying to achieve is a shadow ONLY in the middle of a div. What I have now is:
<body style="background-color: #ccc;">
<div style="padding: 30px;
-webkit-box-shadow: inset 0px 0px 0px 20px #000;">
Some text in the box</div>
</body>
Which looks like (#1):
But I want to achieve (#2):
Question A: Is it possible to achieve #2 using only CSS?
Question B: If yes to Question A, how should #2 be modified to achieve the effect only on the top and the bottom, leaving the sides shadowed all the way from left to right (#3)?
Clarification: The intent is to use a 50% shadow that shows up only in the middle of a div, but I CANNOT change any HTML, only CSS. Also, The code posted here is oversimplified. There are several elements inside the div, including images. I cannot change their BG.
I have achieved your #3 using this html:
<body>
<div id="shadow">Some text in the box</div>
</body>
and this css:
body, html {
margin: 0;
padding:0;
background-color: #ccc;
}
div#shadow {
margin-top:20px;
padding: 15px 30px;
background-color: #000;
color:white;
}
you can see it here: http://jsfiddle.net/quPB5/
Edit:
Here is only the modified CSS:
<body style="background-color: #ccc;margin: 0;padding:0;"><div style="margin-top:20px;padding: 15px 30px;background-color: #000;color:white;">Some text in the box</div></body>
You can use "box-sizing" to move the padding and borders etc, inside the div and in this way - keep the div size despite changes in padding or shadow. In this case I have box-sizing on the wildcard, *
I put it on everything, but you can just put it on the elements you want as well.
Also add inset to your shadow.
HTML
<div class="box box-shadow">inset shadow</div>
CSS
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* this moves padding and borders and such inside the div instead of outside */
.box {
width: 300px;
height: 100px;
padding: .5em;
background-color: rgba(255,255,255,.1);
}
.box-shadow {
-webkit-box-shadow: inset 0px 0px 50px 5px #f06; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: inset 0px 0px 50px 5px #f06; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
HERE is a jsfiddle with it in action:
As far as your last question I'm a little unsure of what you want. shadow just on top and bottom? That would be cool... could use some pseudo elements maybe --- ? ? ?
Could someone explain me what's going on with this small piece of HTML ?
http://jsbin.com/akome5
On most of current browsers (FF4, Chrome10, IE9, IE8, Opera 11), the layout of the element looks like this :
Meh?! I don't understand why ?!
Why aren't the height and width as big as the visible box (orange+red spaces) ?
Adding a "display:inline-block;" to the element doesn't seems to really fix it.
How can I fix it ?
Thx!!
Setting a width and height on an A tag
Try adding the following styles.
a.button {
display: block;
float: left;
overflow: auto;
}
a.button span {
display: block;
float: left;
}
I'd propose a different approach involving no spans
html:
<a class="button2" href="#">Text Text Text</a>
css:
/* Button 2 */
.button2 {
background-color:red;
border:solid 10px orange;
border-top:0;
border-bottom:0;
display:inline-block;
color:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
line-height:30px;
text-decoration:none;
padding:0 3px;
}
old (top) new (bottom)
http://jsfiddle.net/pxfunc/vr7gJ/
For information I manage to do it without float:left, here is the whole CSS :
a.button{
display: inline-block; /* <- added */
text-decoration: none;
}
a.button span{
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
height: 30px;
line-height: 30px; /* <- added */
text-decoration: none;
}
a.button .left, a.button .right{
background-color: orange;
width: 10px;
}
a.button .text{
background-color: red;
color: white;
}
The line-height instruction was the key.