Browsing the CSS category

reference google font locally

I have a web app that I want to use Google Fonts, but I want to download (and reference it) locally from the device.  You can’t use the normal CSS style/import tags.  I found  this link that can generate the CSS code you need: https://google-webfonts-helper.herokuapp.com/fonts

Read the article

Apple App Store Rejection: iPhone resolution doesn’t run on iPad

My app was rejected from the Apple App Store with the following reason:

We also noticed that your app did not run at iPhone resolution when reviewed on iPad running iOS 10.3.1. Specifically, your app is not optimized for iPad.

They included a picture, but it wasn’t much help.  It wasn’t until that I viewed my app on the iPad 12.9″ screen simulator did I notice that the images were a little blurry.

My app is comprised of a website being displayed in an app “shell.”  With the retina screens, images will appear blurry if not resized correctly.  Ideally you’d upload 2 versions of a picture; the regular and then one of higher quality.  My app is based on users uploading pictures, so I decided to cut the image in half.

The solution: have a CSS media query that, if the device is using a Retina display, resize it to 1/2 of the image width (not specifying a height will make it proportional).

 

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
img {
width:50%;
}
}

UPDATE:

I had explicitly stated a height/width for my images (as, you should), but that didn’t help – some were still blurry.  In some cases I removed the height/width (leaving the Bootstrap “responsive” class intact), and for my logo, I was able to use CSS tricks instead of an image.

Read the article

jQuery Drag-and-Drop with Resizing changes position

I was using jQueryUI’s drag-and-drop feature WITH the resizable one, and then storing the value in a database (from an Ajax call).  When I refreshed the page, the DIV element “jumped” a bit.

The problem/solution was that, for testing purposes, I had a 1px border surrounding the DIV, and that was being counted in the “size” – therefore affecting the top/left coordinates when I was placing it back on the screen.  Removing the border solved it.

Read the article

CSS Positioning isn’t working

A coworker was recording (and placing) objects (DIVs) in an absolute position, but it wasn’t correctly positioning them.  The problem was that each ID started with a number, which isn’t allowed.

Read the article

  • 05.18.2016
  • CSS

Terms I searched for:

bootstrap 2 items next to each other

bootstrap 2 items to be on same horizontal axis

I tried using the CSS:

float:left and display:block

.. which didn’t work.  This was in addition to the inline style on the DIVs AND in addition to having classes in the DIVs.  I put an enclosing DIV around everything.

I was using Bootstrap, which might’ve been messing things up.  The solution was to use their “grid” system, as found here – http://stackoverflow.com/questions/23686786/2-div-next-to-each-other-in-bootstrap

Read the article

high charts graph with data next to it

A coworker had a graph (in High Charts), and a data table next to it.  Depending on the size of the monitor, it would occasionally overlap.  Instead, it should appear next to it (if available), or below it (if not).  We tried various experiments with the CSS (“float:left”), but couldn’t get it initially.

Eventually, he got it.  The solution: on the DIV with the graph in it, set the “min-width” equal to the width of the graph.

Read the article

Waterfall graph in HighCharts doesn’t work in IE8 when using Bootstrap CSS

I’m using HighCharts for jQuery graphs on the web.  I’m also using Bootstrap for some CSS (specifically, a table).  Everything works in Chrome, but of course it doesn’t work in IE8 (what my users have).

Specifically, the “waterfall” graph doesn’t show correctly in IE8 – but only when also using Bootstrap.  After a lot of investigation, I realized it was the Bootstrap CSS file (and not the jQuery that I originally thought).

First I grabbed the non-minified version, and taking out everything, one-by-one (of course, in large chunks) to figure out what the problem was. Surprisingly, here’s the culprit:

body {

  font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

  font-size: 14px;

  line-height: 1.428571429;

  color: #333;

  background-color: #fff;

}

 

Specifically, it was the one line:  line-height: 1.428571429;

One you remove that, it worked! For me, in the version of Bootstrap I was using, it was around line 280.

Maybe IE8 has some sort of limit on a maximum decimal point precision for the line-height… but it was somehow conflicting with how the HighCharts graph was being loaded.  By removing that one line (of the ~6,000) this caused the waterfall graph in HighCharts to correctly work in IE8 when also using Bootstrap!

Read the article

Internet Explorer doesn’t show bootstrap tables correctly

As I’ve mentioned before, everyone at my company has to use Internet Explorer. So even when I develop in Chrome, I have to make sure the website looks as intended in IE 8.

Recently I wanted to style my HTML tables with Twitter Bootstrap.

The start of my ASP file is as follows:

<!–#include file=”includes/generic_functions.asp” –>
<!–#include file=”includes/specific_functions.asp” –>
<!–#include file=”includes/validation.asp” –>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

(… yeah, I should probably be using an upgraded Doctype!). On a specific page, I do NOT want to have validation, so I removed that line, and instead put in a comment of “no validation”

<!–#include file=”includes/generic_functions.asp” –>
<!–#include file=”includes/specific_functions.asp” –>
<!–no validation –>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

This caused my table (in IE8, only) to have the “condensed” look – as if I was using the Twitter Bootstrap “.table-condensed” class. I’m still not sure why this… but once I removed it, and had NO comment (as in, remove the line in bold above), the table appeared as intended.

Read the article

CSS 5Grid navigation doesn’t work on mobile for downloaded template

I’m not a designer.  For my personal website, I downloaded a template from 4templates.com .  I wanted my “new” design to be responsive (i.e. optimized – it’ll look slightly different- depending on the device – computer, tablet, phone).  After I got it set on my desktop, I viewed it on my Android phone and iPod.  The navigation didn’t work on the mobile devices.  There were different problems depending on using the Chrome app on my Android phone, vs the regular “Internet” browser, and also different with the Safari browser (on my iPod).

The real solution: there’s an updated version of the 5Grid – called skelJS – that their tech support sent me.  They replied very quick – I’m now an advocate for 4templates.com!

However, I was impatient so I investigated it myself and wasted a few hours on it while waiting for the response.  I did not come up with the full solution myself, but here were the steps I followed, incase you need to troubleshoot a similar problem:

I tried hooking up my Android phone to my computer, to use the webmaster developer debugging tools, but couldn’t figure that out.  It was the “ADB Chrome Extension”.  While I’m sure it’s useful, it couldn’t detect my phone and I gave up.

I had to find + read the documentation for CSS 5Grid that the template was using.

I looked at the “everything” file (that listed all examples) on my phone and it worked, so I had hope!

I started by updating jQuery to 1.9.1 (from 1.8), as the demo had (and the changelog mentioned it was updated). Originally I tried jQuery 1.10.2, but that didn’t work. Then I got the new “init.js” file (in the /css/5grid folder).  (I did so much troubleshooting that I lost track if these had any affect or not).

I noticed that in the HTML of the sample template (that I downloaded), it had the line:

<script src=”css/5grid/init.js?use=mobile,desktop,1000px&amp;mobileUI=1&amp;mobileUI.theme=none”></script>

Note: it says “&amp;” instead of just “&” .  Also according to the official documentation, it should have been mobileUI_theme (not “mobileUI.theme“).  I updated that, and it still didn’t work.  I then just had it read:

<script src=”css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1″></script>

(taking out the mobileUI.theme) – it worked, but I got a weird mobile navigation icon.  But it worked!!

Looking back at the docs, I looked at their sample that did work.  The one on the site was an iFrame, going to:  http://websuporte.net/5grid-0.4.2/docs/sample-mobileui0.html

I got their core-mobile.css and mobileUI-modern.css file and could see that it did work.  I did this by using the “Inspect Element” in Google Chrome to easily get the other files.

By this point, I had everything working, but it didn’t look right (which is pretty much my motto!).  It was functional, but the mobile navigation “icon” appeared twice; almost overlapping.

My next step was to download all the CSS and javascript from the site and replace it piece-by-piece.  But then the tech support said they’d send me an updated file, so I didn’t have to spend more time on it.  They sent me the replacement files in a timely manner, so 4templates.com had a happy customer!

Read the article

Purpose of a CSS Reset

Last week I was going over some code with a coworker.  Starting at the top of the website file, I verified that he know what a “CSS Reset” file was for.  He didn’t, so I explained:

Each browser (IE, FireFox, Chrome, etc.) has different default settings on how to display text.  This would be things such as the margin/padding, text height, maybe even the default font.  In order to make sure that a website looks the same in all browsers, designers/programmers put in a “reset” file to make every attribute the same (ex. 0px for margin spacing).  By giving everyone the same boiler-template, they can then build the CSS style sheet to ensure sites will look the same.

Eric Myer created a standard “CSS Reset”: http://meyerweb.com/eric/tools/css/reset/

…include this code first, then specify all of your CSS settings.

More examples:
http://mashable.com/2011/06/13/boilerplates-templates-dev

Read the article

  • 06.02.2011
  • CSS