When I simply print (like on paper), or save as PDF a page (using the browser built-in tool), the css is completely ignored and I just get ugly lines after lines of the content!!
Is there a way to do this (without having to convert the HTML 2 PDF/image)?
Thanks!
That's probably cause you've got the media option specified.
<!-- will ignore css on print -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- will only use css when printing -->
<link href="style.css" rel="stylesheet" type="text/css" media="print" />
<!-- will use both -->
<link href="style.css" rel="stylesheet" type="text/css" />
You should look up Media Types in CSS... set one up for printing and you should be good to go. I've found that this page is really helpful.
Related
I have a problem where my css does not affect my html. I made a fiddle here
It worked when I wasn't trying to connect an external stylesheet and used style tags,
Thanks in advance to anyone who can help.
btw i tried
<link rel="stylesheet" type="text/css" href="index.css">
and it did not work.
Make sure you are linking it in your 'head' section of the HTML such as this:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also be sure to close the tag and that the style sheet you are linking is named 'index.css'
Edit:
HTML is split up into two main section tags: body and head. In a normal HTML page, the structure is like so:
<html>
<head>
</head>
<body>
</body>
</html>
The code I referenced at the beginning of this answer should be placed into the head section of the HTML page.
The fact that you are linking to simply index.css worries me. Is index.css in your site root? If so, specify that:
<link rel="stylesheet" type="text/css" href="/index.css">
As stated also by BuddhistBeast, check to make sure it's in between the head tags:
<head>
<link href="index.css" type="text/css" rel="stylesheet" />
</head>
Also check that you are referencing it correctly. If it is all in one folder, then
<link href="index.css" type="text/css" rel="stylesheet" />
is correct.
If it's in its own folder, named "css" for example, it should be written as:
<link href="css/index.css" type="text/css" rel="stylesheet" />
You put #button instead of input, #button in the css.
I'm working in a project which already uses a stylesheet, but I would like to improve the website using Foundation.
I tried to put the new stylesheet in the project but something that was like this:
Became this:
So I just stop using Foundation, but I really would like to use it, but how ?
What did you guys do to apply a new CSS in a project that already has ?
update
<!-- CSS Ganglia -->
<link type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.liveSearch.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.multiselect.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.flot.events.css" rel="stylesheet" />
<link type="text/css" href="./styles.css" rel="stylesheet" />
<!-- /CSS Ganglia -->
<!-- CSS Integra -->
<link type="text/css" href="css/integra/style.css" rel="stylesheet" />
<!-- /CSS Integra -->
<!-- CSS Foundation -->
<!-- <link rel="stylesheet" href="css/foundation/normalize.css" /> -->
<!-- <link rel="stylesheet" href="css/foundation/foundation.css" /> -->
This is a very complicated process that you are going about performing here... 99.99% of the time you can not just "plug and play" so to speak with new style sheets. For example it is likely that your two inputs up there have float: left defined in the old stylesheet. The new stylesheet overwrote those styles and made them essentially float: none which broke the layout.
So, what should you do.
Duplicate the current site out to a development directory (just make a folder in the root directory called dev and duplicate the entire site inside that directory. You'll use this directory to develop from without modifying a site that is currently live.
Include your foundation stylesheet/s below the current one. Then slowly go through the old stylesheet and figure out whats being over-written and merge it to a new stylesheet.
I'm stumped. Working on a site that isn't loading properly in FireFox. It loads great in Chrome and even IE, but for some reason the stylesheet isn't loading in FireFox.
The site: http://gregsonaccounting.com
I'm using html5 code and have used the basic resets and such from html5 Boiler Plate. Not sure if the problem is in my html or CSS.
Any insight is extremely helpful.
Many thanks.
Your problem comes from style.css which begins by #charset "IBM437"
Replace it with #charset "UTF-8"; and it will be better !
It seams this charset IBM437 is auto added by SASS:
CSS pseudo element ▼ becomes gibberish in IE
A stylesheet should be defined in the format;
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
You may also include media attribute, that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
In your page, it is;
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />//Here is the problem
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
So that line may be modified like;
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
Try changing:
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />
to
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
My CSS code worked well on Chrome, but it kept crashing on IE and Firefox. Then i found out the problem was in a badly preprocessed CSS.
Just copy paste your CSS to http://csslint.net/ and if you get any error, just fix it and you are good :)
Worth trying!
insert this inside your html documents. I am not writing in code just giving u the key words so you know and can put it in.
link rel="stylesheet" type="text/css" href="stylesheet.css"
it works so make sure you have this correctly or else your html document will not load with your stylesheet. best of luck to you and keep working brah.
I have a problem with a web page. The introduction of a simple <base href=""> tag in the head of the page creates lots of unexpected problems such as dismantlement of the layout of the page, size of figures etc. Here is the web page without http://vlab.mooo.info/tanks and this is with the tag: http://vlab.mooo.info/tanks/wrong.php.
Note: I've tested with Firefox and Chrome.
You have file
http://vlab.mooo.info/tanks/style-tanks.css
which is called in
http://vlab.mooo.info/tanks/
via
<link href="style-tanks.css" />
With base href set to the root, the browser looks for http://vlab.mooo.info/style-tanks.css which is wrong
Change to
<link href="/tanks/style-tanks.css" />
The problem is line #14:
You have
<link rel="stylesheet" type="text/css" href="./style-tanks.css" >
Should be:
<link rel="stylesheet" type="text/css" href="./tanks/style-tanks.css" >
I have a very new site I am trying to put together and it seems that my css file isn't being recognized.
The site is http://www.problemio.com and I have in my index.php a direction to pick up the css file like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
and then a header div declaration like this where some of the initial styles are used:
<?php
include("divs/header.php");
?>
I am trying to go through the index.php file with firebug, but not sure how to tell if the css file is being recognized or something else is the problem.
Any ideas how to get the styles recognized?
You have to link to the CSS Reset before you link to your own styles.
The way you set it up now, the CSS Reset is resetting your styles.
Change this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
to this:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Loaded CSS:
grids-min.css
main.css
menusystem.css
reset-min.css
Reset is loading after the others, which nullifies the majority of your settings.
This is probably because of the order you are loading the CSS files. You are loading your "main.css" file first, then the YUI reset CSS, which basically resets whatever your main.css file has set already. Try loading the reset first.
The stylesheet appears to be loading fine. You need to put it after the reset styles though, or the reset will get rid of most of yours.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
If the problem you think you are seeing is related to the sign-in links, note that they are set to color:#fff;, which happens to match the background...
Depending on your browser, Ctrl+Shift+I (Chrome), Ctrl+Alt+I (Safari), F12 (IE9), or Firebug (Firefox) can show you which resources are loaded... You should probably get comfortable with the developer modes for each.