Removing horizontal scrollbar from embedded gist - javascript

I have a Github gist embedded on my site. So far so good. Unfortunately, it displays a horizontal scrollbar that I just can't seem to get rid of. Code is this:
<html>
<head>
<style type="text/css">
.gist, .gist-file, .gist-meta {
font: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;
background-color:#ffffff !important;
border: none !important;
border-radius: 0;
border-bottom: none;
overflow-x: hidden !important;
max-width: 100% !important;
overflow: hidden !important;
width: 100%;
align-self: center;
}
</style>
</head>
<body>
<script class="test" src=.js"></script>
</body>
</html>
As you can see in the script tag, I've tried a lot of different things to remove it. The CSS works, meaning that I can use those classes to manipulate the gist somewhat, but I just can't seem to get rid of the horizontal scrollbar. Please help. What can I do here? Using Chrome. site is on Github Pages.
EDIT: Even when I create an entirely new project for just this html file I get the horizontal scrollbar.

Related

i cant make div or any image 100% in html5/css3

earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides
here's what I tried
<html>
<head>
<style>
.cont img {
display: inline-block;
width :100%;
height : 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
</html>
what can I do to make it 100% with in any browser?
have a look at this code, set margin:0px on body tag
<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>
Question is not 100% clear, but are you looking for a solution like this?
.container {
height:100%;
width: 100%;
border: 1px red solid;
margin:0;
padding:0;
line-height: 0;
}
.container .imgmy{
height:100%;
width: 100%;
margin:0;
padding:0;
}
Are you sure it was good earlier?
The margins around the image have nothing to do with the image itself.
Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.
Luckily you can easily override these user agent stylesheets, and you should in this case.
You can add margin:0 to the body, as mentioned above by Shreya.
But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/
Read more about User Agent Stylesheets here: What is user agent stylesheet
Assuming HTML
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
CSS
.cont img {
max-width: 100%;
max-height: 100%;
}

Printing to a Brother Label Printer from the browser

I am wanting to print labels from a Brother Label Printer from a web browser. I know DYMO has a JavaScript framework that makes printing from the browser simple. But I have customers with a Brother label printer so I need to make it work.
I've been doing some testing and some searching and it's surprising how little information is out there on this subject.
So far the only browser I have had success with is Google Chrome as it doesn't seem to print header and footers. I have installed the printer/drivers and created a custom paper size which measures 62 x 29mm.
When I try to print, it's splitting the text over 5 labels. I have the following text on the page I am trying to print:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Print</title>
</head>
<body>
<p style="margin: 0; padding: 0; line-height: 13px; font-size: 11px; font-family: Arial; font-weight: normal; border: 1px solid #000;">Line 1<br />
Line 2</p>
</body>
</html>
But it prints 5 pages as you can see from the print que sample.
Has anyone tackled this before or have any suggestions.
UPDATE
After changing the the margins listed in the first screenshot above to 0, it got it down to two pages. But there's still a huge margin around it:
This answer won't solve your problem in 100%. I've tested it against Safari with custom paper settings - same as ones from your example. I was testing it against printing to PDF so maybe with specific printer driver it will behave a bit different. Your example CSS and HTML are missing margin and padding reset. Here is example for #media print:
#media print {
body, html, p {
margin: 0pt !important;
padding: 0pt !important;
}
#page {
margin: 0pt !important;
padding: 0pt !important;
}
}
With this settings 2 lines of text are on one page, hover there is still some margin that can't be reduced to 0.

CSS3 PIE doesn't work with border-radius and box-shadow

I've coded a simple html/css for testing purposes and I can't get the library to work.
I've moved the .htc, .php and .js files to the same directory of index.html and it doesn't work at all.
Link to the code.
All files are in the same directory of index.html, are accessible via URL, and I believe that should be enough to work.
I've already tried putting the behavior tag and position: relative, z-index:0 in the css file but IE can't see these properties.
The Code: HTML
<link rel="stylesheet" type="text/css" href="index.css">
<script src='jquery.js'></script>
<script src='PIE.js'></script>
<body>
<div>test</div>
</body>
CSS:
div {
float: left;
position: relative;
z-index: 0;
width: 300px;
height: 300px;
-webkit-border-radius: 10px;
-moz-borderradius: 10px;
border-radius: 10px;
-pie-box-shadow: 1px 1px 10px #000;
box-shadow: 1px 1px 10px #000;
behavior: url(PIE.htc);
background-color: red;
}
Solved it.
The problem were several things.
How it worked:
I'm testing on IE10 but I hadn't activated the Navigate Mode, only Document Mode IE8. So just activate Navigate Mode IE8.
Import script PIE.js. .htc or .php doesn't matter.
Set the element styles one by one with position: relative and z-index: 0
That's it.
Tnks!
I have found that the order in which you set the different browser-compatibility rules is important:
border-radius
then -moz
then -ms
then -webkit
I had them in a different order and it wouldn't work...
Maybe it will help someone...

"overflow:hidden" invalid in ie

<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?
The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>
Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.

How do i add border in all four side of browser page

How do i add border in all four side of browser page no matter what browser, whatever resolution. Is there any such css or javascript code ?
If you want border around viewport you can try the following:
<html>
<head>
<style>
body {position: fixed; top:0; left: 0; bottom: -5px; right: -5px;
border: 5px solid red;}
</style>
</head>
<body>
</body>
</html>
Depending on what you want exactly even better might be to use something as YUI Layout Manager.
Write the following lines in your CSS:
body {
border-width: 5px; /* or what you want */
border-style: solid;
border-color: red; /* or what you want */
/* or use the short form: */
border: 5px solid red;
}
<body style="margin:0px;margin-right:2px;margin-bottom:2px">
<div style="width:100%;height:100%;border:1px solid red;margin-right:-2px;margin-bottom:-2px">
Stuff here
</div>
</body>
In my opinion it is better solution than elektronikLexikon's, because height is always 100%.
EDIT: Height is fine now.
EDIT2: I like jira's answer even more than mine ;)
PS. Request always the best answer, not that which meets only few requirements. I couldn't make it on time.

Categories

Resources