I have an iframe inside a popup for some reason in mobile safari once the iframe loads it's changing the size of the iframe to go beyond the screen dimensions and no matter what I do in inspector the computed style won't update.
The style that inspector shows is taking effect is (and works everywhere else including android):
.gc-lightbox > iframe {
background-color: #FFF;
height: 645px;
width: 900px;
position: relative;
border: 4px solid rgba(255, 255, 255, 0.5);
max-height: 90%;
max-width: 90%;
overflow: hidden;
border: none;
}
However, in mobile safari the "computed height" and "computed width" are way off (depending on which popup you initiate) they're up as high as 3000px tall and 700px wide. Inspector does not have the height: 900px or the max-height: 90% crossed out and even if I put style="width: 300px !important; height: 300px !important" directly on the iframe tag the computed values are still going past these values with no indication as to why.
Any clues?
Click on any of the campus tour links (as I said, it works as expected everywhere but mobile safari - even android)
http://www.georgiancollege.ca/new-campus-tours/
In one of my projects, Safari Computed Rules were not matching the Styles Rules. And like, you even adding !important directly to the inline style did not help.
The culprit turned out to be too many transition effects on the page. The transitions were on inputs and textareas (which we manipulated a lot with JS). Changing to this helped me out.
transition: none;
If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated)
How can I increase this area in order to allocate enough space for all?
timeline.setGraphCaption(container, h.toString());
You need to add these rules in your scss file:
.v-timeline-widget .v-timeline-widget-modelegend{
background: inherit;
}
.v-timeline-widget-legend-label{
height: auto !important;
white-space: normal !important;
}
Before:
After
3 points:
While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.
As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)
Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.
This is more of a general best practice question rather than a very focused one.
I'm a big fan of the font shorthand as it solves most of the line-height headaches I had when I was using just font-family, font-size etc etc and it really cuts down on the total number of the CSS declarations while providing full control on the typography.
The problem is, as font-sizes change throught a page, so do the line-heights, so I'm finding myself redefining font several times, like so:
.lastUnit h2 {font:normal 23px/23px Calibri,Tahoma,sans-serif;color:#a51d21;padding: 21px 0 15px 70px;}
.lastUnit a:link, .lastUnit a:visited {color:#a57129;font:normal 16px/16px Calibri,Tahoma,sans-serif;}
h1 {font: normal 26px/26px Calibri,Tahoma,sans-serif;border-bottom:2px dotted #bababa;color:#204fe7;padding-bottom: 8px;margin-bottom: 8px;}
h2 {font: normal 22px/22px Calibri,Tahoma,sans-serif;color: #a41d21;margin-bottom:12px;padding-bottom: 12px;}
.internal h2 {border-bottom: 2px dotted #62c6c7;}h2.section {font:normal 20px/16px Calibri,Tahoma,sans-serif;color:#1d7373;border:0;margin: 0 0 15px 0;padding-bottom:12px;border-bottom:2px dotted #62c7c8;clear:both;height:18px;text-transform:uppercase;}
ul,ol,p {font:normal 16px/24px Calibri,Tahoma,serif;}
h3 {font: normal 18px/18px Calibri,Tahoma,sans-serif;color:#204fe7;margin:6px 0;}
I have a strong feeling this code is not optimized... I'm thinking to declare the font-family on my body (or on an id very high in the markup) so I don't have to repeat it each time, but then I'll have to use font-family, line-height and some times font-weight.. Which makes for pretty much the same amount of CSS.
Any ideas or tips to optimise this procedure? Maybe additional classes in the markup?
ps: for Stackoverflow admins: That would be a question for "coding style" tag but it's not allowed to use it..
I would try to write CSS as if I were designing a database or defining OO-classes. I would:
try to eliminate redundancy in the CSS
define generic CSS rules first and then the specific cases
avoid shorthands if necessary
Here is an example:
h1, h2, h3 {
font: normal large/1em Calibri,Tahoma,sans-serif;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
Start from this:
body { font-family: Calibri, sans-serif; }
* { line-height: 1.3; }
Then define h1, h2 etc. sizes in percentages. Then set colors, and so on. To tune spacing between blocks (e.g. between a heading and a paragraph, or between items of a list), it is almost always better to use vertical margins rather than line height.
There is no need to create a mixed salad of font settings, and the font shorthand tends to confuse rather than help.
Calibri is a nice little font, unfortunately with no suitable fallback on systems that lack it—but virtually any sans-serif font is a better fallback than Tahoma, which is completely different from Calibri in almost every way (except being sans-serif).
if all share the same font-family, why not declare it in one place at the top, and then define the "fine details". In other words, the best practice is to set the common/general rules and then redefine the ones you need.
example:
/* define the font family/general characteristics */
h1, h2, h3 {
font:normal 23px/23px Calibri,Tahoma,sans-serif;
}
/* define the details for the ones you would like */
h1 {
font-size:26px;
line-height:26px;
border-bottom:2px dotted #bababa;
color:#204fe7;
padding-bottom: 8px;
margin-bottom: 8px;
}
I believe the best way to shorten this down would be to specify one tag that sets the font family. A bit like this
body {
font-family:Calibri,Tahoma,sans-serif;
}
Then you can fine tune each element further down your css styles.
Also just to mention. CSS doesn't cause that much of an issue when loading the page. I would focus more on optimizing images and any server side code.
I'm using the 62.5% font-size trick, and while it works on some bits of text, it doesn't work for others.
Any ideas?
body {
font: 62.5% HelveticaNeue, Arial, Verdana, sans-serif;
}
For example, this isn't 16px: http://jsfiddle.net/vfGJa/6/
On the jsfiddle link, the problem is that em is like a relative value, so that element is recieving first the size 62.5%, than is increased to 1.4em, and than increased again to 1.6em but based on previous 1.4em value. Remove that 1.4em and you'll see that you get the size you're looking for.
Sorry my bad english.
Some elements don't inherit font properties. Use a Css Reset file and this will work fine.
I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?
The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.