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
Related
There is initial space before the list. And the list is scrollable.
The space from the beginning needs to be removed while scrolling. Is it possible to do so using css?
I initially added padding before the list. But the padding is always maintaining it's space.
JSX:
<div class="pt-filter-container">
<div
v-for="(item, index) in items"
:key="index"
class="item"
>
{{ item.label }}
</div>
</div>
CSS:
.filter-container {
display: flex;
width: 30em;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.item {
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
color: #5A6872;
margin-right: 8px;
padding: 8px 12px;
border: 1px solid #chip-grey;
border-radius: 4px;
background-color: #FAFAFA;
position: relative;
}
.active {
background-color: #red;
color: #white;
}
}
It's just i need to add margin before the 1st element instead of container that is containing it.
So the actual code will be -
.pt-filter-container {
display: flex;
width: 30em;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.pt-item {
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
color: #5A6872;
margin-right: 8px;
padding: 8px 12px;
border: 1px solid #pt-chip-grey;
border-radius: 4px;
background-color: #FAFAFA;
position: relative;
&:first-child {
margin-left: 18px;
}
}
.active {
background-color: #pt-red;
color: #pt-white;
}
}
I don't know the exact dom and css structure of your project. But can't you use something like this?
overflow-x: hidden
or
ul > li: first-child {
padding-left: 0;
}
Currently there are no options in the theme to align TABS centered. I tried to play with the CSS in the stylesheet (style.css), but with no luck.
how can I make the tabs center aligned?
/* tab */
.tab-set {
margin-bottom: 50px;
}
.tab-set ul.tabs-titles {
padding: 0;
height: 32px;
margin: 0;
clear: right;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
float: left;
list-style-type: none;
cursor: pointer;
}
.tab-set .tabs-titles li:last-child {
border-right: none;
}
.tab-set .tabs-titles li.current {
padding: 15px 35px;
position: relative;
top: 1px;
color: #575a5c;
background: #f6f6f6;
}
.tab-set .tab-content {
padding: 20px 20px 10px;
background-color: #f6f6f6;
clear: both;
}
.tab-content p {
padding: 0;
}
.tab-set.white .tabs-titles li {
border-right: 1px solid #fff;
}
.tab-set.white .tabs-titles li.current {
background: #fff;
}
.tab-set.white .tab-content {
background-color: #fff;
}
It's a bit hard to guess the issue since there's no html to make sure the structure is correct. For sake of cleaner code, I'd do this and update the following:
.tab-set ul.tabs-titles {
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
display: inline-block;
}
.tab-set .tabs-titles li.current {
color: #575a5c;
background: #f6f6f6;
}
Try not ever set a fixed height unless needed because that's how items can look all messy. Have the padding/line-height dictate the height. I also removed some duplicates. For example, applying the same padding to .current was just doing the same thing. Hope this helps.
EDIT:
Here's my codepen to see it in action: https://codepen.io/thecenteno/pen/LYYgMpv
I have created a responsive website about a year ago and took a Big Commerce theme and altered it to be my own. I have put a button next to a search bar in the header. To test responsiveness I zoom in and out to see what happens. When I do, the search bar and button seem to move around quite a bit and get bigger. I would like it to stay put like the header, bag button and phone number. Here is my code...
/* CSS */
#SearchForm2 {
position: absolute;
right: 0;
top: 3%;
z-index: 52;
width: 25%;
height: auto;
display: block;
}
#SearchForm2 form {
padding: 0;
margin: 0;
display: block;
}
#SearchForm2 label {
display: none;
}
#SearchForm2 input {
display: block;
height: auto;
width: auto;
font-weight: 400;
text-transform: uppercase;
padding: 2px 3px 2px 3px;
}
#SearchForm2 p {
display: none;
margin: 5px 0 0 0;
}
#SearchForm2 input.Textbox {
float: right;
font-size: 100%;
width: 59%;
height: auto;
display: block;
padding: .5em 1em;
text-transform: none;
line-height: 17px;
background-color: transparent;
border: 1px solid #000;
vertical-align: middle;
}
.searchbtn2 {
float: right;
width: 39%;
height: auto;
font-size: 100%;
display: block;
margin: 0px 3px 0 0;
cursor: pointer;
font-weight: 500;
text-transform:uppercase;
font-family: "Cabin", Arial, Sans-serif;
*display: inline;
*zoom:1;
text-align: center;
vertical-align: middle;
border: none;
padding: 5px 10px 4px 10px;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
background-color: #454545;
color: #fff;
border: 2px solid #454545;
}
.searchbtn2:hover {
background-color: #ffffff;
color: #000;
}
<!-- Header Search -->
<div id="SearchForm2">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form(this)">
<label for="search_query">%%LNG_Search%%</label>
<input type="text" name="search_query" id="search_query" class="Textbox autobox" value="%%LNG_Search%%" />
<button type="submit" class="searchbtn2" name="Search" title="Search">Search</button>
</form>
</div>
Here is a link to see it in action: https://www.luxuryeyesite.com/test3/
You are using a percentage for your font size. As inputs are zoomed into the percentages will also increase. If you don't want this to occur you'll need to stop using a percentage on #SearchForm2 input.Textbox and .searchbtn2
Also, this isn't the way I would recommend testing responsiveness. If you are using Chrome open the developer tools and select the 'toggle device toolbar' button to get a more accurate representation.
I'm trying to style range inputs on webkit. Everything works fine on Firefox but webkit display strange white dots around the track.
I read an article about this and took inspiration from it (link).
Now here is the demo. As you can see there are white dots I can't get rid off.
body {
padding: 30px;
background-color: black;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: black;
border: none;
border-radius: 3px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
<input type="range">
It must be very simple but I'm still struggling with this.
Thank you
The reason why you have four dots is input tag has default background color. i.e. background-color: white; from user agent stylesheet.
Try following CSS
input[type=range] {
-webkit-appearance: none;
border: 0px;
width: 300px;
background-color: transparent;
}
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.