I am trying to print an html document to my epson-3700 printer via zapier and google cloud print. When I print to PDF from zapier everything works out fine, the pdf is the correct size and when I print the newly created PDF it prints out just how I want it, however when I try to print from zapier directly to google cloud print on my printer it makes a huge margin around the whole page which causes the printing to be cut off.
I have tried adjusting all sorts of zapier settings and settings from my PC (manage your device) and they all dont seem to do anything. There must be something wrong with my code...?
I have been working on this for a good 10 hours and cannot seem to get it, any help is much appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
width: 4.75in;
height: 6.5in;
margin: 0 0 0 0;
}
html, body {
margin: 0;
padding: 0;
width: 4.75in;
height: 6.5in;
}
div.absolute1 {
position: absolute;
top: 5mm;
left: 5mm;
font-size: 10pt;
}
div.absolute2 {
position: absolute;
top: 1.5mm;
right: 1.5mm;
width: 43mm;
}
div.absolute3 {
position: absolute;
top: 63mm;
right: 70mm;
font-size: 8pt;
font-family: "Courier", courier;
text-align: right;
}
div.absolute4 {
position: absolute;
top: 70mm;
left: 40mm;
font-size: 11pt;
}
</style>
</head>
<body>
<div class="absolute1">
company name <br>
address <br>
address line 2<br>
</div>
....
i solved it basically by moving the positions to the middle right and making a margin around a full letter sized paper, It doesnt work out the same when I print to PDF which is what i was trying to avoid but this will do the trick.
I dont think zapier can recognize different page sizes although it has the option to select a page size... not entirely sure what is going on here but here is my code for anyone else with the same problem:
note that my printer feeds paper from the middle rather than to one side so if your page adjust is to one side you will need to adjust accordingly
also note I am not a developer so my code is probably not the best
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
margin: 46mm 0mm 46mm 118mm;
padding: 0;
width: 4.75in;
height: 6.5in;
}
body {
margin: 0;
padding: 0;
}
div.returnaddress {
position: absolute;
top: 7mm;
left: 7mm;
font-size: 9pt;
}
div.postage {
position: absolute;
top: 3mm;
right: 5mm;
width: 40mm;
}
div.packagenumber {
position: absolute;
top: 53mm;
right: 55mm;
font-size: 8pt;
font-family: "Courier", courier;
text-align: right;
}
div.recipientaddress {
position: absolute;
top: 60mm;
left: 50mm;
font-size: 11pt;
}
</style>
</head>
<body>
<div class="returnaddress">
COMPANY NAME <br>
COMPANY ADDRESS <br>
ADDRESS 4Z8<br>
</div>
<div class="packagenumber"> PACKAGE NUMBER
</div>
<div class="recipientaddress"> RECIPIENT ADDRESS
</div>
<div class="postage">
<svg
....
Related
I am in NO SHAPE or form a coder, but have made some tweaks to my BigCartel site that is expected to come out in the next few weeks. I have a clothing line, and I wanted enable consumers who have selected a product, to be able to hover over the image of the product to view it magnified... (here is an example from Nike of what I mean: http://store.nike.com/us/en_us/pd/breathe-womens-short-sleeve-running-top/pid-11319700/pgid-11619220 ) I wanted to know what code to use to make the image/product that a consumer has clicked on and is viewing larger/magnify when hovering over a certain area... I saw some codes uploaded, but SINCE I am not a professional coder, I was wondering WHERE to insert it in the custom coding . I have a CSS option, and HTML and I don't know if I should go to "Products" or the over all coding...(Sorry for the rookie question)...
I also want to know (If I can slide this question in there as well) How to speed up the speed of the slide show on my BigCartel site, and possibly even change it to a dissolve option... And, again, where would I insert that code..
I've made some minor changes on my own, but again, I am NO CODER and there are a few additional tweaks, I would love to make to not make my site so "cookie cutter" The good folks at BigCartel, sent me this link to search and ask questions on. Thanks so much in advance for your help!
Have you tried this this always works for me https://codepen.io/ccrch/pen/yyaraz
JS
$('.tile')
// tile mouse actions
.on('mouseover', function(){
$(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
})
.on('mouseout', function(){
$(this).children('.photo').css({'transform': 'scale(1)'});
})
.on('mousemove', function(e){
$(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})
// tiles set up
.each(function(){
$(this)
// add a photo container
.append('<div class="photo"></div>')
// some text just to show zoom level on current item in this example
.append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
// set up a background image for each tile based on data-image attribute
.children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
})
HTML
<div class="tiles">
<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700);
body {
background: #fff;
color: #000;
margin: 0;
}
.tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tile {
position: relative;
float: left;
width: 33.333%;
height: 100%;
overflow: hidden;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
}
.txt {
position: absolute;
z-index: 2;
right: 0;
bottom: 10%;
left: 0;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
}
.x {
font-size: 32px;
line-height: 32px;
}
I'm just learning/practicing, so any help would be SUPER appreciated. Also, if you find other errors or inefficiencies while looking, I'd love to hear about it.
I have four layers.
.body
.main
.main-side
.sidebar
This is essentially what I'm trying to recreate , and everything is working fine other than the third layer, or in the case of the example, the navy blue bar extending vertical on the right side. I can get it to go to the second layer (right above the main background) or cover up everything (including the sidebar), but I can't get it between layer two and four (in the example, the light blue inner box and the smaller, yellow side box.) Thanks in advance!
Here is the HTML and the CSS.
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<title>CSS Zen Garden</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="main-side"></div>
<div class="main">
<h1 class="redbox">CSS Zen Garden</h1>
<h2>The Beauty of CSS Design</h2>
<div class="sub-heading">
<p class="top>">A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.</p>
<hr>
<p class="bottom">Download the example HTML file and CSS file
</div>
<div class="enlightenment">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
<div class="about">
<h3>So What is This About?</h3>
<p>There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.</p>
<p>CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.</p>
<p>You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your CSS file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing CSS really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>
<div class="sidebar">
<h3>Select a Design:</h3>
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
<h3>Archives:</h3>
<ul>
<li>
Next Designs <span class="indicator">›</span>
</li>
<li>
View All Designs
</li>
</ul>
<h3>Resources:</h3>
<ul>
<li>
View This Design’s CSS
</li>
<li>
CSS Resources
</li>
<li>
FAQ
</li>
<li>
<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
Submit a Design</a>
</li>
<li>
Translations
</li>
</ul>
</div>
<div class="requirements">
<h3>Requirements</h3>
<p>Where possible, we would like to see mostly CSS 1 & 2 usage. CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.</p>
<p>Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related design.</p>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your work.</p>
<hr>
<div class="author">
<p>By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.</p>
</author>
</div>
<footer>
HTML
CSS
CC
A11y
GH
</footer>
</div>
</body>
</html>
body {
font-family: 'Source Sans Pro';
line-height: 120%;
font-size: 16px;
font-weight: 400;
color: #333;
background: #daede2;
z-index: 1;
width: 90%;
vertical-align: center;
}
p {
font-size: 20px;
line-height: 140%;
padding-left: 50px;
}
h1 {
font-weight: 300;
text-transform: uppercase;
font-size: 30px;
color: white;
margin-bottom: -25px;
}
h2 {
font-weight: 900;
font-size: 130px;
line-height: 100%;
color: white;
letter-spacing: -.025em;
line-height: 1em;
width: 65%;
margin-left: 50px;
position: relative;
}
.sub-heading {
text-transform: uppercase;
width: 60%;
margin: 0 0 50px 14px;
position: relative;
color: white;
letter-spacing: .07em;
font-size: 18px;
}
h3 {
font-size: 30px;
font-weight: 400;
padding-left: 50px;
}
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 1020px;
height: 2000px;
top: -200px;
width: 30%;
z-index: 1;
}
.redbox {
background: #df3c56;
position: relative;
top: 50px;
left: 50px;
padding: 25px;
width: 224px;
text-align: center;
}
.enlightenment {
background: #f2f9fb;
padding: 50px 50px 50px 0;
width: 58%;
position: relative;
top: 40px;
margin-bottom: 150px;
}
.about {
color: white;
width: 45%;
margin-bottom: 100px;
margin-top: 250px;
}
.about h3 {
color: white;
}
.benefits {
background: #f2f9fb;
position: relative;
top: 225px;
float: left;
padding: 50px;
width: 25%;
left: 50px;
}
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: 0px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
.sidebar a, h3 {
color: #333;
}
.sidebar h3 {
font-weight: 400;
padding-left: 40px;
margin-bottom: -20px;
}
.sidebar ul {
list-style-type: none;
}
.participation {
background: #df3c56;
float: right;
width: 45%;
color: white;
position: relative;
top: -618px;
right: 80px;
padding-top: 50px;
}
.participation p {
padding: 0 50px 0 50px;
}
.participation h3 {
color: white;
}
.requirements {
background: #f2f9fb;
position: relative;
float: right;
top: -625px;
width: 57%;
padding: 50px;
}
.requirements a {
color: #333;
text-transform: uppercase;
}
.author {
text-transform: uppercase;
}
footer {
background: #e9f198;
position: relative;
top: 119px;
padding: 25px;
font-size: 22px;
word-spacing: 10px;
color: #333;
left: -440px;
width: 80%;
}
a {
text-decoration: none;
color: white;
border-bottom: solid 1px #999;
padding-bottom: 2px;
}
hr {
border: 0;
height: 0;
border-top: 1px solid #df3c56;
width: 93%;
margin: 50px 0 50px 50px;
}
All you need to do is move .main-side into .main so you can add the right z-index to it to make it overlap like the example you posted and adjust the values:
.main-side {
background: rgba(58,68,83, .8); //convert to rgba so you can fade the background like the example
position: absolute;
right: -150px; //update - change to right instead
height: 2400px; //update
top: -200px;
width: 30%;
z-index: 1;
}
I also converted some of your colors to rgba to give it that transparent look.
FIDDLE
I'm not quite sure what you're asking, but here's a few things that might help. First, to achieve what they are with the yellow menu, you should use something like this:
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: -100px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
You'll see that the sidebar is now placed more like theirs.
And with these two changes, does it get closer to what you're looking for?
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 900px;
height: 2000px;
top: 70px;
width: 30%;
z-index: 1;
}
I've also made a JSFIDDLE, which you should always do in the future for questions like this!
I am really struggling to find what is making the grey space at the bottom of my site. This is the first time I have attempted any coding so any simply put answers would be greatly appreciated. I am sure there are numerous errors in the code / conflicting codes but
I have also been trying media queries which may also be making stuff go wrong? Any help would be really well received... Here is the code so far...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<style>
a:link {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-size: 20px;
font-weight:lighter;
color: #7a5131;
}
a:visited {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-weight:lighter;
color: #7a5131;
}
a:hover {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #c57b43;
}
a:active {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
}
* {
padding: 0px;
margin: 0px;
margin-top: -5px;
}
#footer {
position: fixed;
clear: both;
width: 104%;
height: 30px;
bottom: 0;
border: none;
padding: 13px 0 0 0;
text-align:
center; color: #ffffff;
background-color: #ffffff; }
body {
background-color:grey;
height: auto;
background-size: 100% 100%\9
}
}
#container {
width: 100%;
height: auto;
color:blue;
margin-left:0;
padding-left: 0;
margin-top: 0;
padding-top: 0;
position: absolute;
}
#nav {
width: 100%;
height: 100%;
text-align: center;
margin-left:0;
padding-left: 0;
padding-top: 0px;
height: 100px;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
float:left;
}
navtype {
position: absolute;
top: 60px;
left: 0;
width: 100%;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
}
#images {
position: relative;
width:100%; /* you can use % */
height: auto;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
top: 0px;
}
#fullscreen {
position: relative;
width:100%; /* you can use % */
height: auto;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
padding-bottom: 0px;
min-width: 50%;
text-align: center;
}
#test {
position: absolute;
width:100%; /* you can use % */
height: auto;
margin-left: auto;
margin-right: auto;
min-width: 50%;
text-align: center;
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
display: block;
}
#ourstory {
position: relative;
width:100%; /* you can use % */
height: auto;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
padding-bottom: 50px;
min-width: 50%;
text-align: center;
background-image: url("/Users/DESIGNHAPPY04/Desktop/NEW
SCROLL DOWNSITE/images/storyback.jpg" );
background-size: 100%;
}
#type {
position: relative;
margin-left: 15%;
margin-right: auto;
max-width: 70%;
font-family: "georgia";
font-style: italic;
font-weight:lighter;
color: #5f4029;
line-height: 180%;
font-size: 15px;
}
#media all and (min-width: 601px) {
#test {background-image:url("/Users/DESIGNHAPPY04/Desktop/NEW
SCROLL DOWN SITE/images/breaker.jpg" );
width:100%;height:100%;
}
}
#media all and (max-width: 600px) {
#test {background-image:url("/Users/DESIGNHAPPY04/Desktop/NEW
SCROLL DOWN SITE/images/breakermobile.jpg" );width:100%;height:100%;
}
#type {
position: relative;
margin-left: 15%;
margin-right: auto;
max-width: 70%;
font-family: "georgia";
font-style: italic;
font-weight:lighter;
color: #5f4029;
line-height: 180%;
font-size: 10px;
}
a:link {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-size: 13px;
font-weight:lighter;
color: #7a5131;
}
a:visited {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-weight:lighter;
color: #7a5131;
}
a:hover {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #c57b43;
}
a:active {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
}
* {
padding: 0px;
margin: 0px;
margin-top: -5px;
}
#nav {
width: 100%;
text-align: center;
margin-left:0;
padding-left: 0;
padding-top: 0px;
height: 60px;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
position:relative;
}
navtype {
position: absolute;
top: 30px;
left: 0;
width: 100%;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<navtype><span>
Story
Testimonial
Recipes
Spreads
</span></navtype>
<a name="top"></a>
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/headerbar.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/landscape.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="ourstory">
<a name="storyanchor"></a>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/storypics.png"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="type">
How it all began
<br>
The emergence and growth of blogs in the late 1990s coincided with the advent o
web publishing tools that facilitated the posting of content by non tec
(Previously, a knowledge of such technologies as HTML and FTpu Indeed, bloggers do not only produce content to post on theirblogs, but also build social relations
<br><br>
Click Here For More Recipe ideas
</div>
</div>
<a name="testimonial"></a>
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/images/breaker.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="ourstory">
<a name="ourspreads"></a>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/jars.png"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="type">
Our Spreads and Jams
<br>
The emergence and growth of blogs in the late 1990s coincided with the advent of ` web publishing tools that facilitated the posting of content by non-technical users. (Previously, a knowledge of such technologies as HTML and FTP had been required to publish ;content on the Web.)Indeed, bloggers do not only produce content to post on their blogs, but also build social relations
</div>
<div id="fullscreen">
<a name="recipes"></a>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/recipes.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
</div>
<div id="test">
</div>
</div>
<div id="footer">
Back to top</p>
</div> <!--END OFCONTAINER browser-->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/java/smoothscroll.js"></script>
</body>
</html>
Congratulations on coding your own site. Here are some things that could be causing the odd gap:
Two default CSS styles that will effect spacing
Small space under an image, and this may be your bug. One quick fix is to change the image to display:block;. Another solution is to use vertical-align: bottom;, as demonstrated in this easy article: http://salman-w.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html
Margin Collapse happens when a top or bottom margin from one html element (divs, headings...) touch another without a border, padding or anything else in-between. One margin is deleted or the margins are added together, and will only be applied to one element. Please see this article for more info: http://www.sitepoint.com/web-foundations/collapsing-margins/
Potential problems within your code:
As Sable Foste suggested, run your code through the validator, and concentrate on the code errors. (You may not be able to fix everything the validator suggests.) Remember to fix the errors mentioned in the comments above, along with fixing the missing opening <p> tag in the footer, and removing the extra closing brackets } in the css under the body and navtype. Add the additional media query closing brackets } (they need 2: one for the actual style and one to close the media query). Remember to fix * {padding: 0px; margin:0px; margin-top:-5px;} by removing the margin-top:-5px, and assign this only to the styles that need a -5px top margin. These may seem trivial, but coding errors can wreak havoc on your layout.
It looks like your using <div id="test"> at the bottom to test the media queries. What you can do is use #test {display:none;} to hide the div in the regular css, and turn it back on by adding #test {display:block;} in the media queries. This may help you see if the test div is causing problems.
You asked about using a code snippet. Since this is an entire web page, perhaps a JSFiddle would be helpful.
JSFiddle Tutorial - this site lets you paste your html, css, and scripts in a separate, editable environment. It then displays the results in a small browser window. You can paste the link, and we can troubleshoot and demonstrate the fixes in a real environment. For example, the code you supplied does not show your problem, but if you had it in a JSFiddle, we could see the issue, help troubleshoot it, and offer a real example solution. If you have a JSFiddle example, people are more willing to help.
Useful Info
Developer Tools - learn how to use the built in developer tools in your browser because it'll be your best friend when troubleshooting your site. (Like the rest of us, this won't be your last bug). You can view your html and css code, and it has the added benefit of being able to turn off and even delete html elements and css styles. This helps to quickly find the offending element. It is safe to make edits in this environment because the changes are in the browser, and will not change your real code. Hit F12 in your browser to open developer tools, then use the little arrow and mouse over your elements in the browser window, and the code that displays below. Right click on the element to see more options. You can use Firefox with the downloadable Firebug extensions. This lets you edit the html and css. Lots of people like Chrome's developer tools, and you are in luck because CodeSchool offers a fun, free and easy course. It'll be well worth your time to take this because in the time it takes you to troubleshoot one bug, you could have finished this course.
When using this site, upvote the comments and answers that are helpful, and accept the answer that solves your problem. Upvoting and accepting builds your reputation and shows you are an active participant with your own questions, it builds the reputation of the people that answer your questions, and it builds the reputation of the question. If you find your own solution, it's helpful to post the fix.
I make this jsfiddle:
http://jsfiddle.net/andycds/vds8f/1/
It places many layers over a map, using Google Maps API. I call
addLayer()
several times, with the same layer, just to be concise.
If you resize de edges of the map, making it bigger, parts of the screen disappear (only in Chrome).
It's a bug on Chrome, Google Maps API or in my code?
I think this a bug in the Chrome with the jsfiddle, when the browser try to render the map.
try to delimit the area of the map
html {
height: 200px;
}
body {
height: 200px;
margin: 0;
padding: 0;
}
#wrapper {
font-family: Helvetica, Arial, sans-serif;
position: absolute;
z-index: 999;
background: #77C;
color: #FFF;
padding-left: 10px;
height: 30px;
line-height: 30px;
}
#map_canvas {
height: 200px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
All embedded google maps render strange for me in chrome. I've even done a fresh install of chrome. Can you got to this page:
https://developers.google.com/maps/documentation/javascript/basics
and see if the maps there render correctly. If not you know it's the browser and not your map code.
I used below code for customize the file input type,
<form class="example" action="#">
<!--<input type="file" class="required-entry filename file" name="filename[]" />-->
<div class="fileinputs">
<input type="file" class="file hidden">
<div class="fakefile"><input><img src="ravi/images/button_select.gif" /></div></div>
</form>
style.css
<style type="text/css">
body{
color: black;
font-family: arial;
font-size: 13px;
}
form.example input {
background: url('ravi/images/input_boxes.gif') no-repeat 0 -58px;
border: none;
width: 241px;
height: 20px;
padding-left: 3px;
padding-top: 3px;
}
form.example input:focus {
background-color: transparent;
}
form.example div.fileinputs {
position: relative;
height: 30px;
width: 300px;
}
form.example input.file {
width: 300px;
margin: 0;
}
form.example input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
form.example div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
form.example div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
}
</style>
and the page display like below,
when i click select button the browse folder appears and then i select the image file.but in input filed the uploaded image caption not displayed..
i integrated this one from http://www.quirksmode.org/dom/inputfile.html
what is the issue?
You need to add JavaScript code as explained on the page you cited.
If the code you use in testing consists essentially of the HTML and CSS code that you posted, then you are using the “pure CSS” version of the approach described on the page. In the numbered list that explains the basic version, which uses JavaScript too, item 5 describes the feature that is missing from the “pure CSS” version. And that feature is “When the user has selected a file, the visible, fake input field should show the correct path to this file”.
(It won’t actually show the correct path. For security reasons, browsers don’t disclose the real path. But they do let you show the filename part.)