Hope someone can help. Around line 459 in my css http://192.185.137.91/~gothicarch/ihealth/ there is this media query that IE can''t see. I'm completely stumped. Chrome and FF see it just fine. If someone could take a look I would appreciate it.
#media only screen and (max-width:902px){
h2{
font-size:20px;
}
#callouts-wrapper{
width:100%;
padding-left:0;
text-align:center;
}
#callouts{
float:none;
text-align:center;
margin: 0 auto;
}
}
Depending on what version of Internet Explorer you're talking about... IE 8 did not support "only screen" in the media query.
Related
I have a problem to display the superscript value in the Safari (iOS 8).
In the IE/Chrome browser:
But Safari iOS8 iPad Air confusing:
I have tried the below two options to display the superscript value, but both of them cannot fix the issue in iOS8.
Option 1: use the sup element.
<span>6<sup>7</sup></span>
Option 2: use css to implement the superscript.
.sup
{
font-size: 75%;
line-height: 0;
vertical-align: super;
}
So any suggestion?
Thanks a lot.
We have had the same problem. We tested with iOS 8.1 beta and it appears to be fixed, so you may just have to wait for its release!
This example works for me:
span.sup {
font-size: 75%;
position: relative;
bottom: 1ex;
}
I need to make my Previous and Next buttons smaller.
Im using the dataTables plugin alongside bootstrap so the tables are already styled.
Here you can see the involved files .css and .js
I've tried twicking them a bit but I can't make it work for me, I can't fing the buttons-related data.
Thanks in advance, any direction you may point would be helpful.
You can select those two links by class
.previous, .next {
// CSS here
}
Here's a live version to play with.
Answering to an old question.
You are probably looking for this. I found it somewhere on Datatable's official site not sure where. But for me the below solution worked:
.dataTables_paginate>span>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
.dataTables_paginate>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
Hope it helps someone like me.
The nav starts out great once you lower the bowser width the nav becomes stacked, this is great. Once you open the window back up the nav items are in two rows. Here's a pic.
This is how it starts out:
http://reggi.myshopify.com/pages/about#
FWIW, I found that forcing a redraw of the .nav-justified element in question helps WebKit understand. Obviously, how you chose to do this is up to you—I opted for the fadeIn(), 'cause when life hands you lemons...
$(window).bind('resize', function(){
var w = $(this).width(),
threshold = 768;
if(w < threshold){
$('.nav-justified').hide().fadeIn();
}
});
Both answers seem to be lacking. The JS solution causes a lot of flicker, and the CSS solution doesn't seem to keep the integrity of the designed tabs. Here's what I came up with.
If you're not using less with your bootstrap styles just replace #screen-sm with 768px
#media (min-width: #screen-sm) {
.nav-tabs.nav-justified > li {
display: block;
float: left;
width: 32.9999%
}
}
The problem is display: table-cell; instruction in the .nav-justified class.
Let's take a look at the bootstrap.css file, I believed that you are using Bootstrap version 3.0, at line 4109.
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
You must change it to :
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: inline-block;
float: left;
margin-left: 100px;
}
}
This will solve your problem.
This is a known bug with Bootstrap.
This has been fixed in Chrome Since 2013, but is still an open bug in WebKit and occurs in Safari.
Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
— cvrebert
I recommend to not use .nav-justified or be ok with it not working properly in Safari.
Im using Ext.Msg.alert() and 'Ext.Msg.show()' to show my message box. But so far only the Title is displayed with an OK button, but the message field is not shown. There's no error when I run the code. Anything that I miss?
Below is my code when using Ext.Msg.alert(),
Ext.Msg.alert('Title', 'Why you no display!?', Ext.emptyFn);
and when using Ext.Msg.Show(),
Ext.Msg.show({
title:'Title',
message: 'Why you no display!?',
buttons: Ext.MessageBox.OK,
fn:Ext.emptyFn
});
Update on 27th August 2013
I found that the message box works when running on IOS Devices, but not on Android and on Desktop Browsers.
After digging trough the web, I finally found the solution. It turns out the fix is in the sass file in base folder.
The original post is here.
In short,
Go to touch\resources\themes\stylesheets\sencha-touch\base\mixins, open the _Class.scss file and replace the whole block of #mixin st-box with the code below, and then re-compile your css (e.g. use compass watch)
#mixin st-box($important: no) {
#if $important == important {
display: flex !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
} #else {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
}
}
many old mobile brwoser do not support position:fixed, I tried writing a sloution myself,it works, but not smooth enough.
I googled, no luck for now.
so I would like to know if there is "smooth" solution for this, thanks.
i think it would be better to mention the browsers that you have problems with. for example I assume you have problems with IE6. I will try to answer your question according to my assumptions. So the 100% height on the body and html stuff is in case you want to do fixed positioning along the bottom edge of the browser window.
like so:
* { margin:0; padding:0; }
html, body {
height: 100%;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
top: 0;
right: 0;
}
#page-wrap {
width: 600px;
margin: 0 auto;
font: 16px/2 Georgia, Serif;
}
hope this will help please also check this site when having problems related to CSS
http://css-tricks.com/snippets/css/fixed-positioning-in-ie-6/