Weird misalignment in some PC's only - javascript

I'm working on a website and the client wanted exactly the mockup. The problem is, the headers and some other divs that I've been using with a background are giving me some problems. And for the first time in my experience, it's not a browser-specific problem.
This is how my sister (I asked her to send me screenshots from another PC...) and I see it:
But, in every Mac, every mobile device, and the PC at my office, I see it like this:
As you can see, only in SOME Windows PCs, there's extra padding in top of the text. If I get rid of the padding-top of the titles, it comes back to "normal", only a pair of pixels thinner.
Here's the html for the title:
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
And this, is the css of that part of the html:
.contentHeader{
line-height: 38px;
padding-top: 6.5px;
padding-left: 11px;
background-color: white;
/*padding: 3px 8px;*/ /*In fact, if I uncomment this line, I'll see it centered, but not in the other ones...*/
font-size: 20px;
letter-spacing: 1px;
}
.square{
font-size:20px;
background-color: black;
line-height: 15px;
min-height: 19px;
min-width: 19px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
font-family: "Arial";
}
I'm open to any solutions... I already use jQuery for some things in this site, so it could be a fix if it really works.
I made sure that the cache is not the problem. And I tested it in my PC in Chrome, Firefox and Edge... everywhere's the same. As I said, I only saw that in my PC and my sister's. Both of us use Windows 10, and in my office I have Windows 10 too. Any ideas of the cause?

Your top have padding and your bottom don't. I made both with the same padding:
.contentHeader{
height: 38px;
line-height: 38px;
padding-left: 11px;
font-size: 20px;
letter-spacing: 1px;
background: skyblue;
padding-top: 10px;
padding-bottom: 10px;
}
.square{
font-size:19px;
background-color: black;
line-height: 19px;
min-height: 19px;
min-width: 19px;
display: inline-block;
vertical-align: text-bottom;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
}
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>

First, don't use <b>. If you mean to bold the text, use font-weight:bold in CSS.
Putting block-level elements in inline elements (a <div> in a <b>) will cause unexpected positioning. This is probably what's causing this, but we can't say for sure.
Don't alter line-height for positioning purposes. That's solely for text spacing.
Lastly, surround the text in a <span> and use display:inline-block on it (so it obeys vertical paddings). That way, you can position both the square and the text with paddings as well as target it for font-weight:bold.
Try just this and work your way with just paddings and dimensions.
<div class="contentHeader">
<div class="square"></div>
<span class="promotion-text">IN PROMOTION</span>
</div>

toss in some javascript code to read the info, and let it be placed in very bottom footer or some such. it might give details of what is pushing what.
chrome / firefox both have built in or third party apps to install to "right click" and choose inspect. you might find something, some place within the "dom" tree.
=================
honestly not sure what you are talking about... the images you linked to. both show "scrolling" left/right and up/down or at least that is what it seems like. good chance you are going out past "width" and/or "height" of the screen and causing scroll bars to happen per say.

Related

Can I clip mask text over a div in CSS (with or without the help of JS)?

I would like to make a fancy looking button in CSS, where it displays a text overlay for a number on the left (see image below).
Is it possible in CSS (with or without the help of JS) to mask overlay text onto an element, similar to that of the Photoshop 'Clipping Mask'?
EDIT: As always you guys want to know I did some testing, which I did, but did not manage to position the number correctly where the button was on the page, using abosolute and relative position, so I asked here not only so that I could get help, but so that I could archive the answer in a format that can be easily found through Google. I have tried this. I want the definitive answer, so that I don't just use a way that 'works', but a way that works well.
I would try something like this
html:
<div class="number">1</div>
css:
.number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}

Raw HTML styling differently from jQuery generated HTML with same structure

I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle

kendoSlider increase/decrease button size

I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.

Adding line breaks to absolutely positioned text blocks over images to create strips of text

I have an image that when rolled over reveals some lines of text, white on a red background. I would like there to be a break in the strips for each break in the line of text, like the image linked below.
http://imgur.com/ElmaEom
However, all I've gotten to so far, is making the text appear in one single large red block. I would like the text to know where to break if it's too big for 80% of the image, and appear on a new line with a new red strip behind it.
Here's a fiddle of what I have so far.
http://jsfiddle.net/mAU3d/
.thumb {
position: relative;
float: left;
}
.text, .text-js {
font-family: 'Montserrat', sans-serif;
font-size: 1.6em;
line-height: 1.6em;
display: none;
position: absolute;
top: 15px !important;
left: 0px;
text-align: left;
background: #999;
background-color: #F63146;
width:80%;
padding: 1%;
display: inline;
color: #FFF;
text-transform: uppercase;
}
Sorry if the explanation is unclear, thanks in advance for any help.
However, all I've gotten to so far, is making the text appear in one single large red block.
That’s how block elements are rendered. (Your try to use display:inline is hindered by the use of absolute positioning, which automatically makes an element block.)
But you have an h2 element inside the div – so make that inline. Sadly, you can not get padding on all sides of broken lines in an inline element – but if you just want a background-color for effect, you can fake that using a box-shadow.
.text-js h2 {
display:inline;
background: #F63146;
box-shadow:-5px 0 #F63146, 5px 0 #F63146;
}
http://jsfiddle.net/mAU3d/5/
The easiest way to achieve this is to set the h2 display to inline. Then remove the background from the .text-js and add it to the h2. I also increased line-height to add some space between lines.
.text-js h2 {
display: inline;
background: #F63146;
line-height: 1.4em;
}
Here's the updated fiddle: http://jsfiddle.net/mAU3d/10/
I don't think it is necessary to use any fake box-shadow (EDIT: box-shadow is actually useful, see the comments), you just need to style the text itself (i.e. using a span) rather than the block containing it (which is the h2):
http://jsfiddle.net/mastazi/M6APy/
<h2 class="text"><span class="break">Text should break in to new strips</span></h2>
.break{
background-color: #F63146;
line-height: 1.6em;
}

Is there a way to prevent website text from being searchable?

When searching with Ctrl + F in a website I'd like to exclude some text. Is there a way to solve this?
Apparently
Some quick testing shows that text content added via a pseudo-element will not be found. See this fiddle (search "Google" as an example) which uses the following example code (HTML5). I realize you may want to use a tags or something else, and may need to use javascript for functionality, but the point is, you can make small amounts of text, as you seem to require, that is invisible to searching.
HTML
<ul class="hideText">
<li data-cB="Google" data-cA="https://www.google.se"></li>
<li data-cB="GitHub" data-cA="https://github.com"></li>
</ul>
CSS
.hideText {list-style: none}
.hideText li {
width: 200px;
height: 50px;
padding: 2px;
background-color: #ddd;
border: 1px solid #bbb;
border-top-color: #eee;
border-left-color: #eee;
}
.hideText li:before {
content: attr(data-cB);
display: block;
font-size: 1.2em;
font-weight: bold;
}
.hideText li:after{
content: attr(data-cA);
font-size: .8em;
}
I have a feeling this is a little out of the scope of this question but there is a forum post on Mozillazine discussing how Google had overridden the Cmd-F. The post is here
forums.mozillazine.org/viewtopic.php?f=12&t=2011073
And here is a bug report discussing how websites should never be allowed to capture command shortcuts
https://bugzilla.mozilla.org/show_bug.cgi?id=459744
I would suggest that you use images or canvas for the text you don't want people to Cmd-F, as this will get your desired result.

Categories

Resources