The following code has styling issue. It works well in IE10 but not in mozilla firefox version 22.0 does not support width of 20px. How could it be standardized for both browsers?
html{
font: 10pt 'Segoe UI';
color: #505050;
-moz-outline:none;
outline:none;
}
#ta{
width: 20px;
height: 385px;
float: left;
overflow: hidden;
padding: 0 0 0 1px;
border: none;
background: transparent;color: #2e2e2e;
font-family: 'Courier New';
font-weight: 100;
font-size: 20px;
letter-spacing: 3px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-khtml-user-select: none;
}
Related
As you can see on the screenshot below, my pink button is not fully responsive: below a certain width it gets cut instead of resizing to remain within the viewport width.
What is the issue?
Many thanks
.btn {
background-color: #ff00bf;
border: 0 none;
border-radius: 25px;
box-shadow: 0 11px 22px rgba(34, 34, 34, 0.2);
color: #fff;
display: inline-block;
font-size: 1rem;
letter-spacing: 0.025em;
padding: 1.1em 2.28em 1em;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}
The white-space: nowrap makes line-breaking impossible. Just remove it. Also I would set the max-width to 100%.
.btn {
background-color: #ff00bf;
border: 0 none;
border-radius: 25px;
box-shadow: 0 11px 22px rgba(34, 34, 34, 0.2);
color: #fff;
display: inline-block;
font-size: 1rem;
letter-spacing: 0.025em;
padding: 1.1em 2.28em 1em;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
max-width: 100%;
}
I am using this file uploader http://blueimp.github.io/jQuery-File-Upload/index.html
But due to some reason Add Files button also show the file upload. I want to hide them like a link. Current look
https://www.dropbox.com/s/41uc6v1b00287lc/screen.PNG
I copied the same css which they use
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
.fileinput-button {
position: relative;
overflow: hidden;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type="file"] {
display: block;
}
Try with : visibility: hidden ;)
you are missing some css. check out this fiddle its just missing the icon but works how you want it
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
input[type=file] {
display: block;
}
I'm using Pygments to syntax some HTML created by the user.
Here's what I have, notice the random padding to the left.
The random space is also selectable
I'm using Ruby to render the code block with
= raw Pygments.highlight(block.content, lexer: 'html', :options => {:lineanchors => "line", :lineos => true})
And here's the styling...
pre {
counter-reset: line-numbering;
border: solid 1px #d9d9d9;
border-radius: 0;
padding: 0;
line-height: 23px;
margin-bottom: 30px;
white-space: pre;
word-break: inherit;
word-wrap: inherit;
width: inherit;
overflow: scroll;
}
pre a::before {
content: counter(line-numbering);
counter-increment: line-numbering;
padding-right: 1em; /* space after numbers */
width: 25px;
text-align: right;
opacity: 0.7;
display: inline-block;
color: #aaa;
background: #eee;
margin-right: 16px;
padding: 2px 10px;
font-size: 13px;
border-right: 1px solid #dedede;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
pre a:first-of-type::before {
padding-top: 10px;
#include box-shadow(rgba(255, 255, 255, 0.9) 0px 1px 1px inset);
}
pre a:last-of-type::before {
padding-bottom: 10px;
}
pre a:only-of-type::before {
padding: 10px;
}
That's on top of a Pygments theme, I'm using Autumn, see here https://github.com/richleland/pygments-css
Bit baffled as to what's causing this mysterious white space but if anyone might know or has experienced this problem before it'd be greatly appreciated.
Thanks
I had the same problem using redcarpet. The problem origins in Haml and solved adding this line in the initalizers.
Haml::Template.options[:ugly] = true
This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working.
If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What?
<button type="submit" class="flat-button">Submit</button>
<style>
.flat-button {
float: left;
position: relative;
border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border: none;
padding: 0 12px;
margin: 0 3px 3px 0;
outline: none;
cursor: pointer;
color: white;
font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: none;
border-collapse: separate;
height: 26px;
line-height: 26px;
background: #5191cd;
}
.flat-button:hover {
background: #1c3f95;
}
.flat-button:after {
position: absolute;
content: ' ';
height: 0;
width: 0;
left: 100%;
border: 13px solid transparent;
border-left-color: #5191cd;
}
.flat-button:hover:after {
border-left-color: #1c3f95;
}
</style>
After playing around for a while, I found a simple fix for IE9.
http://jsfiddle.net/thirtydot/BWC9q/10/
All you have to is add overflow: visible to .flat-button.
I'm new to css, I have a top nav but I couldn't set its width. It seems different when I test with Dreamweaver, ie9, ie6, Firefox and Opera. Here's my code:
#charset "utf-8";
/* CSS Document */
html {
background: url(images/light-tile.gif) repeat;
}
body {
overflow: auto;
width: 54.35em;
margin: 0 auto;
background-color: #fff;
padding-left: 0.25em;
padding-right: 0.4em;
border: 0.07em solid #97b4e0;
overflow: visible;
}
#main {
background-color: #fff;
}
ul#top-nav {
list-style: none;
margin: .9em .9em .9em 0;
padding: 0;
width: 110%;
}
ul#top-nav li {
display: inline;
}
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
ul#top-nav li a:hover {
color: #000;
font-weight: bolder;
background: #D7EBFF;
border-bottom: 0.2em solid #e9e9e9;
}
...
<body>
<div id="main">
<div id="top-info">Kumcuğaz Köyü İlköğretim Okulu</div>
<img id="top-image" src="../images/top_image.png" alt="üst resim" width="869" height="159" />
<ul id="top-nav">
<li>ANASAYFA</li>
<li>GALERİ</li>
<li>PERSONEL</li>
<li>İLETİŞİM</li>
<li>ZİYARETÇİ DEFTERİ</li>
</ul>
<div class="clear"></div>
<div id="faux">
...
If it isn't possible it to view same on all browsers, I'll have to use a table. Thanks for helping.
Sincerely
What's the reason for making it 110% wide? That's wider than the window. Also, you have 5 menu items each set to 18.5% wide... that adds up to only 90.5% total.
What happens when you make it 100% wide and each of the 5 items is 20% wide?
http://jsfiddle.net/u78Ks/2/
It looks like this might be the issue
width: 18.5%; /* for 5 items */
in here
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
Browsers could be interpreting this differently based on the font sizes, window sizes, etc.
Try setting this to a static width in pixels.