MathJax and the hover event - mathjax

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.

Related

Centering fluid div having max-width

I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo

span width property is being disabled

Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.
So I added a width element into my span in the template. (I know it isn't the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).
<script type="text/template" id="loadedwith-template">
<span style="width:100" class="library"><%= library.name %></span>
<input style="width:100" class='input' type="text" />
<button class="delete_lw" >delete</button>
</script>
However when I look at it in the browser, the element shows up as before without the width setting applied.
"Inspect element" in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.
There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).
a { color: #2929FF; }
a:visited { color: #777; }
a:hover {
color: #8F8FFF;
text-decoration: none;
}
body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background: #FFF;
color: #444;
padding: 25px 50px;
}
button, .delete, .swap {
border: 0;
border-radius: 5px;
color: #FFF;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
button:hover, .delete:hover, .swap:hover { opacity: 1; }
button {
background: #2929FF;
font-size: 0.75em;
padding: 7px 12px;
opacity: .75;
}
h1 {
font-size: 1.25em;
letter-spacing: -0.5px;
}
p {
color: #777;
font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
}
span {
display: inline-block;
margin-right: 10px;
}
ul { padding-left: 0; }
.delete, .swap {
font-size: 0.625em;
opacity: .25;
padding: 3px 10px;
position: relative;
top: -3px;
}
.delete { background: #FF29D0; }
.swap { background: #FF6529; }
You need to specify a unit of measurement
Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.
I.e. there is no "default unit" in CSS, it's just that the browser may try to help you out, although it may as well just ignore your statement that doesn't specify units as an invalid one.
Try style="width:100px"
You should specify a unit, like px:
style="width: 100px"

CSS Accordion + inline-block issue

I am having a problem with my css accordion menu...
I have creater a nice slider as shown here:
http://jsfiddle.net/LedZep257/hDzyH/1/
but the lis aren't spaced nicely meaning that some items are not appearing fully.
When I use inline-block, the spacing is right but it mucks up the entire slider:
http://jsfiddle.net/LedZep257/hDzyH/
Can anyone help/does anyone have any ideas how to fix this?
I think that you can not set a transition in diferent measures, and I think that "auto" an "%" are diferent measure, you can use only one measure to set the transition, if you are having too much troubles and you really need to get that done why dont you use another measure like "em" meaby that would fix it.
e.g.
.horizontalaccordion>ul>li
{
display: inline-block;
overflow: hidden;
float: left;
margin: 0;
padding: 0;
list-style: none;
width: 8em; /*I was here*/
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
transition: width 0.6s ease-in-out;
-moz-transition: width 0.6s ease-in-out;
-webkit-transition: width 0.6s ease-in-out;
-o-transition: width 0.6s ease-in-out;
}
.horizontalaccordion>ul>li>h3
{
display: inline-block;
float: left;
margin: 0;
padding: 10px;
padding-left:19px;
padding-right:18px;
height: 19px;
width: 8em; /*I was here*/
border-left: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
white-space: nowrap;
filter: progid;
-ms-filter: progid;
}
.horizontalaccordion>ul>li:hover
{
overflow: hidden;
width: 60em; /*I was here, I just set 60em for example*/
}
.horizontalaccordion:hover li
{
width: 0em; /*I was here*/
}

How to align on the right an inline-block element?

As you can see in the following Fiddle: http://jsfiddle.net/EvWc4/3/, I'm currently searching a way to align the second link (link-alt) to the right side of its parent (p).
Why not using float or position:absolute you'll say, well the main reason is that I like the fact that the links' display (inline-block) property allow them to be verticaly aligned in a naturally kind of way.
By using float or position:absolute; I'll be forced to calculate and put some extra margin-top or top value to vertically aligned the links.
Here is the code but better see the Fiddle http://jsfiddle.net/EvWc4/3/ :
<p>
link
link alt
</p>
p {
padding: 20px;
background: #eee;
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt { padding: 20px; }
To do this with CSS3 you can use the flex box model
HTML:
<div class="content">
<div class="box box1"><a>Link 1</a></div>
<div class="box box2"></div>
<div class="box box3"><a>Link 2</a></div>
</div>
CSS:
.content {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.box2 {
box-flex: 1;
}
(needs vendor prefixes)
http://jsfiddle.net/EvWc4/18/
CSS3 flex and grid items are supposed to address these issues, but standard support remains spotty as of 2013.
Back to the real world. I don't think it is possible to do this purely in CSS2.1 (IE8+) without pixel hacks. The thing is, text alignment is controlled by the parent element, and since the two anchors share their parent, they either both align to the left or to the right. And justify doesn't work on the last line.
If you can suffer a little additional HTML, there are two approaches:
1) Add another inline that is guaranteed to wrap the line, and then try to hide the empty line. This allows you to use text-align justify on the parent.
<p>
link
link alt
<span class="boom"></span>
</p>
<style type="text/css">
p {
padding: 20px;
background: #eee;
text-align: justify
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt {
padding: 20px;
}
span {
display: inline-block;
height: 0;
width: 100%
}
</style>
Pros: works on any number of inline blocks, not just two. Only a little extra HTML required.
Cons: takes extra effort to hide the last (empty) line of text (setting the inline block inside of it to 0 height won't help you), and you're going to have to fiddle with margins or something else to make it really work. Further discussion: How do I *really* justify a horizontal menu in HTML+CSS?
2) Add another layer of inline blocks on top of your anchor tags and size them to 50%. Then you can apply separate text-align to get the final layout you requested. It is important that no whitespace is allowed between two inline blocks sized to 50%, or you'll wrap the line.
<p>
<span class="left">
link
</span><span class="right">
link alt
</span>
</p>
<style type="text/css">
p {
padding: 20px;
background: #eee;
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt {
padding: 20px;
}
span {
display: inline-block;
width: 50%
}
.left {
text-align: left
}
.right {
text-align: right
}
</style>
Pros: produces the exact layout you requested without polluting the outer box model.
Cons: only works for two inline blocks (you can try to extend it, but it quickly gets really complicated). Relies on having no extra whitespace, which could jeopardize your nicely formatted markup.
You could set the position to absolute and use right: 0
.wrapper {
position: relative;
}
.right {
position: absolute;
right: 0;
}
http://jsfiddle.net/EvWc4/13/
I believe this accomplishes what you're looking for:
.link-alt {
position: absolute;
right: 0; top: 0; bottom: 0;
margin: auto;
max-height: 1em;
}
You can use position: absolute and right: 0 to obtain the right alignment. To keep the vertical centering, you can use top: 0; bottom: 0; margin: auto;. Of course, you'll also need to set a height on the element, or it will stretch to the full height of its parent.
Here's a jfiddle: http://jsfiddle.net/pHppA/
I've updated Pethas example, so it can be done in pure CSS2. It doesn't work in IE7, as it doesn't support display: table-cell; which I use.
http://jsfiddle.net/EvWc4/133/
The attribute float has no bearing on the element's vertical positioning.
p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}
should accomplish what you're looking for. Setting the overflow of the parent to something besides it's default (visible) will force it to treat floating children like normal elements.
Reference article
I haven't tested this at all outside of Chrome, so it might suck for IE.
This simple (and limited) solution leverages text-align: right and width: 50% on the aligned children, and white-space: nowrap on the parent to achieve the desired result.
Example: http://jsfiddle.net/erikjung/ejcJZ/
.vertically-centered-module {
white-space: nowrap;
}
.vertically-centered-module > * {
display: inline-block;
vertical-align: middle;
width: 50%;
}
.vertically-centered-module > :last-child {
text-align: right;
}

Anchor (<a>) dimensions with only inline-block spans inside

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.

Resources