I created a stylesheet for jquery mobile using the ThemeRoller tool. It looks really great on the ThemeRoller page. In my mobile app... not so good. I think there must be some conflicts in definitions between my stylesheet and the jquery stylesheets.
Rails layout file:
<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>
For those of you not familiar with rails it is rendered:
<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />
Is the only way to deal with this to wade through thousands of lines of css to look for conflicts? Is there a css debugging tool that will detect that in a stylesheet? I could change the jquery file names to scss and then roll them into one stylesheet. I am familiar with Firebug and Web inspector which check styles on one page. That wouldn't help... right?
Thanks.
Unfortunately for you, All of css is based on inheritance so there is no automated way of knowing of a conflict or if an object has just overriden the styling of a parent. I think the best bet is to force rails to show the mobile version of the site on a desktop pc and then you can use the Google chrome inspector. It will show you all styles applied to a specific object. It only shows relevant styles with line numbers in the stylesheet so you aren't stuck wading through css. You can also edit it in chrome to see what your changes will look like before you change your stylesheet.
Firebug (an extension for Firefox) can show all styles applied to any given element, as well as which styles are overridden by other styles. You would have to view your mobile site from a desktop browser, but this can be done in Firefox by changing the useragent to match that of a mobile device (iPod, Android, etc.)
If you plan on using webkit on your site, Firefox is not a great choice as it does not render webkit css styles. An alternative is to use Safari and its development tools (which can be activated in the options menu).
If you need to debug from an actual mobile device, there aren't many options. If you can get Opera mobile onto the device, it comes with a decent debugger called Dragonfly.
The order of your stylin Stylesheets matters for what gets overridden. Make sure your style sheet is before both of the jQuery style sheets.
Related
I'm using brackets.io for web dev.
The page looks great in the live preview, but when I just open the file from chrome by "file:///localurl/index.html" The page is not styled at all.
I'm using this in the <head>:
<link href="css/mystyles.css" rel="stylesheet">
Using "inspect element" on the page opened in chrome, it seems no stylesheet is applied. (There is also a bootsrapt CSS included, which I omitted for simplicity, but that one is not applied in chrome as well)
What am I doing wrong? The stylesheets are in the css subfolders.
Solved it, should have used ./css/mystyles.css and not css/mystyles.css
As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.
I've developed a website using MVC4 in visual studio. The standard template includes code for displaying correctly in mobile browsers.
When I run the project, it applies all of the mobile css. Also, when I deployed the website to my own (amateur) IIS server, it applies the mobile css perfect.
Then I bought a DNS address, and forwarded it to my server. Now when I visit the DNS address, it shows the desktop version instead of the mobile version.
What is breaking it down? How can I fix this?
Thanks for your time to answer my question.
EDIT
Thanks for your input. I only have one CSS file with a media section. On some browsers it displays correctly and on others it doesnt. But the problem only exists when visiting the DNS, not when visiting the direct ip-address.
Use the tag. Put all stylings for any browser that doesn't support javascript intp the tag. That way since most moblie browser do not support javescript You can put all stylings of mobile view into that tag and all would work well...... GOODLUCK!!! #da_skywalker10
If:
You have access to the HTML page and can edit it.
You have 2 different CSS files (one for mobile layout and one for
desktop layout).
I would suggest checking if the head tag of the HTML contains:
<link rel="stylesheet" type="text/css" href="locationOfCssFile.css" media="all">
Note: The above line will display the webpage according to one CSS file whether it's viewed on a mobile device or a desktop screen.
If it does, then change media="all" so you would have 2 link tags, one for desktop and one for mobile.
It would look something like this:
<link rel="stylesheet" type="text/css" href="locationOfDesktopCssFile.css" media="screen">
<link rel="stylesheet" type="text/css" href="locationOfMobileCssFile.css" media="handheld">
Source:
HTML link media Attribute - w3schools
Lately I've noticed a strange behaviour in my browsers, when developing a website or doing some debugging.
When I click on View Source to check the site's HTML source code, the external stylesheets that I coded as links appear now inlined, that is, in its entirety.
What appears is something like this:
<style media="screen" type="text/css" style="display:none">
/*a bunch of CSS styles here, lines and more lines of CSS*/
</style>
...instead of the typical:
<link href="mystyle.css" rel="stylesheet" type="text/css">
It's happening with Firefox, Chrome, Safari, IE... with any browser I use.
Do you know guys what could be going on?
It happens to be only when I use my iPhone as a modem... no idea why.
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.