Having some trouble with the CSS alignment of text generated with #font-face. For some reason, there is a ton of extra space visible at the bottom of each letter, stretching the text's containing box too far downward.
If you inspect the text on this sample page, you can see what I mean.
Have googled and inspected a bunch of other pages, but this one's got me stumped. Any chance someone could help?
Thanks!
For starters, the computed line-height is 65px, so you could always define it to be 60px if you wanted.
However, most of that space is actually just required by the font you chose. Though you've converted it to uppercase with your CSS, the font still needs room to render characters that draw below the text's baseline. Try adding a comma to that header's text, and you'll see it's actually pretty huge and should fill up most of the empty space.
You are using <h2> tag there.
for the h tags use the CSS style's margin and padding to remove those extra spaces.
<style>
h2 {
margin:0;
padding:0;
}
</style>
Related
Slowly losing my sanity... I've tried every search term I can think of, but can't find anything about what would seem to be exceedingly simple.
All I want is for the size, aka viewport, of my SVG to fit the containing elements.
I specifically don't want it to scale, crop, meet, slice, zoom or anything else. I just want it to behave like a default div.
The SVG will then be placed inside a div with a max-height and overflow:auto. When the SVG expands beyond the max-height of the containing div I will be able to scroll the div to see the whole of the SVG.
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
I'd like to figure out how I can get my text to move along with the browser. Right now my site looks like this: http://simplysweet.shukuya.com/test/. The divs are absolute, but I've tried relative, static, etc... and can't seem to get the text to move along with the image/layout.
To have your text scroll with the rest of the page you simply need for your divs to be relatively positioned (the default.)
Setting the width of your div to 100% will make it occupy all of the available space in the layout just outside that item, (and so-on up to the root of the document.)
If you want to maintain a "centered" block that is left aligned, use:
margin: auto
on whatever div is just beneath the root of the document.
Use min-width property along with positioning for both div
I'm currently working on a website. One of the things it will do is allow the admin to post news. all my news divs are fixed in height and width. PHP queries the database for the text and cuts it at 500 characters lenght, so the text doesn´t exit my div.
Of course this is not the best approach since if I use all caps, 500 caps characters take more space than 500 normal ones.... If I also use the /br/ tag to change lines, that is also a problem, since php ->(i think) won't count that as empty spaces...
As the title suggests... I would like to know if there is any way of limiting the ammount of text in my div by using it's height....
Thanks in advance!
Have a look at http://www.w3schools.com/css/pr_pos_overflow.asp.
I thinks the best way is to use css in combination with a php function that limits/cuts the string and removes any html tags and tabs.
The css:
min-height: 100px;
And a php function you could use is:
http://php.net/manual/en/function.strip-tags.php and http://php.net/manual/en/function.substr.php
I am trying to send data to a specific MergeField. The data are sent correctly. Each line of the data has for specific characters. For example the data to the field may be:
12345 FIRST\nABCDE.F SECOND
(it cannot get the newline so i just so it through character \n)
Now in the printed document each character has its one width, '1' is smaller than 'E' for example. So the data are not alligned within the field. I tried the following fonts: Arial, Tahoma, Courier New. Nothing helped.
Any ideas? Thanks in advance.
Ps the data are sent through an executable built by Visual C++ 5.0!!
You should probably use a tab-stop based layout. Set your tab-stops every, say, centimetre or so (i.e. just big than the widest character in your font) and add a tab before each element that needs to be aligned.
With this you shouldn't need to find a fixed width font and can use something more attractive.
Edit: Out of interest, I wonder why you have no luck with Courier New which is fixed width.
Maybe you could post a screenshot somewhere so we can have a look at your problem in more detail.
Try Courier - it does not have kerning (kerning = variable character width)
Also in the Font window there is a check box that allows you to apply kerning to fonts of a certain size or above - setting this value to a large font size may remove kerning.