Ok, I am currently directing my style sheets as listed below:
<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>
On the Site.css I have a certain ID with a background-image:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
background: url('../images/topbackground.gif') no-repeat;
}
On the mobile.css I thought I could simply change it to "none" or another image, somewhat similar to this (I've tried several variations at this point):
#container {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #ffffff none;
z-index: 30;
}
However, it doesn't seem to be working. The background still shows on the mobile version of the site. I've been looking at it in both Opera Mini and the Android SDK Emulator. The mobile version of the site is picking up all other properties from mobile.css, just not background-image changes.
I know it's got to be something obvious at this point that I am just oblivious to. Any help would be appreciated.
this is because you load mobile.css before you load Site.css. (in the example you have made).
I thinks its working if you juste insert site first then mobile.css ..
If you need to keep it that way for some reason you gonna need to use !important afters the statement.
Here you can find a working example:
http://jsfiddle.net/2EaQb/
Related
I m building a website on my laptop by watching an instructor's video.I have to set the same pixels with him, to follow the design they gave me. BUT the design he follows,and i have to do so, fits only when my browser's zoom is 90%. When i zoom in 100% the content overflows.The items are shown as they should when my zoom is 90%. In other words the design i have to follow does not work on 100%, which is the default on my browser by the way.Any other website that i m just looking on internet works on 100% perfcetly.
i have set :
*
body margin 0
all sections background sizes cover or 100%
if i have to specify more details, please it would be helpful to let me know
Thank u in advance.
body{
margin: 0;
font-family: "SourceSansPro", serif;
}
#media (min-width: 1280px) {
.container {
width: 1360px;
}
header {
height: 745px;
padding-bottom: 90px;
}
<html>
<head>
<link href="app2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container">
I noticed a closing brackets error here:
#media (min-width: 1280px) {
.container {
width: 1360px; /* Why you set 1360px when min-width is 1280px? */
} /* Need to close this */
}
To find out how to solve the problem, it would be advisable to publish the page's html and css. It would be the best if you also post a screenshot to make us understand better what happens.
i have a website with productpages and just found out that it looks really different between chrome and Internet explorer. Example page:
Website
In IE the images are really large. Now if i change CSS it will also change on chrome where it looks like how i want it.
Thanks for your time,
Sjoerd
you need to set max-width on the image. But use pixels, not percentage!
.thumbnail.alignleft > img {
width: 100%;
max-width: 116px;
}
I believe that you can set a CSS for IE only
<!--[if IE]>
<link rel="stylesheet" href="ieCSS.css" />
<![endif]-->
Also refer to this link How to target only IE (any version) within a stylesheet?
I used
.thumbnail.alignleft > img {
width: 100%;
max-width: 116px;
}
Not sure why someone downvoted my question for no reason but for the people that are here on this site to actually help people thanks!
I've tried everything I know to get our responsive site http://www.usalight.com to print. I've tried adding #media queries to our stylesheets like below:
#media print {
* {
text-shadow: none !important;
color: #000 !important;
background: transparent !important;
box-shadow: none !important;
}
}
I've tried adding a separate print.css stylesheet linked in our header like below:
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print">
I've also added media="print,screen" to all our stylesheets to no avail. I don't get why I can't get anything to show up in print preview. Ideas?
It seems to have something to do with the fact that almost all your page is inside the .navbar-default div. Adding ending div tag before your #main-body id allows most of the page to print.
I feel so stupid, like I'm missing something really obvious but I have checked everything a bunch and can't figure out what's wrong. I'm trying to use CSS3pie to make rounded corners in ie8, but it just won't take.
I have the path set up relative to the html document, not the css. It's in a folder called pie, so this is what i'm using in the CSS:
#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
}
Does anyone know more about css3 pie who could maybe advise me on what I'm missing? I've tried it on a ton of different elements and it hasn't worked once.
A few things to try:
Use a leading forward slash in your path:
behavior: url(/pie/PIE.htc);
This will make sure the path is correct in case you are on a page with more than one URI segment, like http://example.com/pages/archives/mypage.html. WIthout the leading forward slash, it would be relative from mypage.html and not the root directory (which it should be).
Try to force hasLayout (obscure IE thing) by adding position:relative; or zoom:1 to the element. This is often the issue, the HTC file is referenced correctly but the styles won't apply without it.
Read the known issues page carefully and make sure you aren't experiencing any of the other multitude of common problems.
I too had these problem in my earlier days.
You've to keep the pie.htc file generally in the root of the project folder.
I know the following solution is a little weird but you could try it
Try adding an alert or console in the pie.htc file and place the file in each folder until it gets rendered.
HOW to make sure your HTC file loads..
put below <script type="text/javascript"> alert("test");
this alerts test when the file loads
put in the complete url in your css file behavior: url("http://www.yourwebsite.com/test/PIE.htc");
WHen you load the page an alert shows up :)
this means you are sure the file loads :)
now shorten the behavior: url("relative to the CSS-FILE/PIE.htc"); and make sure you still get the alert
remove the alert =)
You are now 100% sure it is using the HTC file
I struggled with this, All I can suggest is try this.
Use the Javascript version with jQuery
<!--[if lt IE 9]>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="js/PIE_IE9.js"></script>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css"/>
<script>
$(function() {
if (window.PIE) {
$('.Circle').each(function() {
PIE.attach(this);
// alert("Attached");
});
}
});
</script>
<![endif]-->
Now in your CSS, with the .Circle class or any class which is using the CSS 3, give them:
zoom: 1;
position: relative;
One other note I have found when using jQuery & the migrate plugin - some are "finicky" these work.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
With luck, that will do the trick.
Guys i found the problem you where looking for.
First of all I used 2 different web host. 1 of my own and 1 of the company.
I made my full css3 responsive webdesign hand coded on my own website.. which I needed the PIE.htc file to get the rounded corners working for all IE versions and I succeeded!.
However when I uploaded the same files to the web host of my company it didn't work anymore.
And it turns out that they doesn't support .htc files.
So I scratched my head and didn't get it right either, but then I discovered that this provider will work with the PIE.php file.
So if for you this doesn't work;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.htc);
Than this does;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.php);
Just change the PIE.htc to PIE.php and it will work.
I am attempting to bypass the need for a PDF component by building a good print stylesheet.
I have two CSS files, site.css and print.css. They are loaded via the following:
<link href="site.css" rel="stylesheet" type="text/css" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
site.css is a large, long and boring css file with the addition of
.printonly
{
display: none;
}
This is applied to elements in the document I have added for the sole intention of printing which I do not want on the page. It only exists in the site.css file.
When I have the image loaded through <img class="printonly" src="image.png" id="logo" alt="logo"/> It is not visible on the printed sheet.
If I drop the class="printonly", then it places the picture on the printed page just fine.
This makes me believe that it is picking up site.css even when trying to print.
Is there any way around this, or can anyone suggest anything?
For completion sake, I have included the entire print.css, however, I am not sure it is really needed:
body {
width: 210mm;
height: 297mm; }
#logo {
margin-left: 50%;
margin-right: 50%; }
.noprint {
display: none; }
You can either make the first stylesheet for screen media only, or you can change the display value for those images back to inline in your print media stylesheet.