Line-height causes gaps between images and other elements but changing its value to 0 makes any text impossible to read, is there any easy fix for that?
Imagine some repeatable DOM element like a shadow, how would you erase gap between this element and anything that is above (may be an image, div, span, button, form)?
Setting class for this .shadow and giving it line-height of 0 of course doesn't work as line-height works a bit differently.
I made 3 images, the first one shows what I'm talking about, the second one fixes it, the third one shows how the second one in fact destroyed the whole layout:
http://jsfiddle.net/J5PLf/
I'm thinking about something like:
body {
line-height: 0;
}
p {
line-height: 1.2em;
}
But I guess it's a bit risky, what if there will be some free text not within tags?
Don't mess with the line-height propety, and set display:block at the images.
Fiddle: http://jsfiddle.net/J5PLf/1/
#example1, #example2, #example3 {
width: 200px;
float: left;
}
img {
display:block;
}
Related
Even after reseting margin and padding the h1 tag still has mysterious unwanted gaps before and after its content
see code pen
Adding
line-height:0.7em;
rule approximately resolve the problem, however
it looks unclean
there are still few unwanted pixels
not sure that this will not cause issues with different font size or units.
Is there a clean and universal solution, maybe using sass/less mixin with math operations?
HTML:
<h1>Some text</h1>
CSS
* { margin:0;padding:0; }
h1 { font-size:25em; }
the h1 tag by default has line-heigth property you can adjust it like
h1 {
font-size: 25em;
line-height: 0.7em;
}
updated example
* {
margin:0;
padding:0;
}
h1 {
font-size:25em;
line-height:0.7em;
}
<h1>Some text</h1>
<p>lorem ispum</p>
Since the h1 is a block level element, it has whitespace on the sides by default. You can add display: inline to get rid of it, but it's positioning will be affected.
Be sure, that your css rules of margin: 0; padding: 0; is on. Make it !important just for test.
line-height: 1; should fix the problem (or line-height: 0).
You can set height for h1 element
h1 {
font-size:25em;
background-color:pink;
line-height:0.8;
}
What you can do is just add line-height
h1.demo {
padding: 0 !important;
margin: 0 !important;
line-height: 40px;
font-size: 40px;
}
<h1 class="demo">Some Text</h1>
In my case, the solution I had found was that, I had set a global line-height value which was messing with everything else. And even apart from that, I realized that just like margin and padding, there's even default line-height values to elements.
So one thing you could do is, set their "line-height: normal" or "line-height: initial" to individual elements or even just globally (latter might yield better results).
If that doesn't work, just manually enter any line-height values that seem to work for you although that's not the most optimal solution. It generally means somewhere you have a line-height setting that's overriding the same for other elements or is just messing with the spacing of other nearby elements, that share a border with it.
I'm fairly new to CSS / HTML, but usually can figure something out. Not with this issue though... I've spent 2 days trying to fix it with no joy
Using WP 3.9.1 and WooThemes Mystile which comes with a custom css to make changes in; no child theme needed. When I place images with captions on a page using left align, some will and others vigorously refuse. In older WP, it was always align all images left to create rows, but not with 3.9.1 it seems. I've tried everything I can think of, but those images that are supposed to be aligned left are actually right of center.
Using Firebug or Safari Inspector, I've tried to align them left and even using a negative margin-left will not place the image where it belongs. It's almost like there's some kind of page break, for lack of a better term, that is making it set right of center. Like it thinks that position is left.
I am not using any gallery or plugin, just adding images to the pages with captions in the text box, not visual. Most of my Galleries under Store are a mess. :(
Here's an example of one: Tuscany Gallery Most of the Galleries I want 2 landscape in a row or 3 verticals. Sometimes with an odd number of images I might center 1 - 3 images, but most are left align.
Any help would be very appreciated! Thanks!
Re: the Body css code
I have a few color changes and more div#attachmet_number (didn't think you needed all them), but this is about it.
:active, :focus {
outline-style: none !important;
-moz-outline-style:none !important;
}
a {
outline-style: none;
-moz-outline-style: none;
}
a:before {
outline: none !important;
}
a:imag {
outline: 0px none;
}
#sidebar .post-46 {
display: none !important;
}
article.post-46 img.alignleft {
margin: 0 1.618em 1em 16px;
}
.post .alignleft, .type-page .alignleft {
margin-bottom: 50px;
}
.post-282 .wp-caption img, .type-page .wp-caption img {
margin: 0 0 0 0.4em;
}
div#attachment_283 {
margin-left: 42px;
}
div#attachment_286 {
margin-left: 42px;
}
div#attachment_291 {
margin-left: 42px;
}
I'm not quite sure if that's what you need or not. The div#attachment_number is the image within a box with caption (title) below it.
HTML of images with caption
[caption id="attachment_516" align="alignleft" width="407"] Duomo di Pisa[/caption]
Following your comments above on your question, your fourth photo (Autumn Drive) specifically is getting pushed to the right by the bottom edge of your second photo (Duomo di Pisa).
It appears that you've added a specific width to each div in your HTML. If you were to add there also a specific, equal height to each div, then they would align and allow the divs below to float to the left.
A greater ideal might be to declare a class for your landscape-oriented divs in your CSS, define a uniform width and height there, and assign that class to all landscape-oriented divs. That way, you could easily change that width and height in one place, and it would apply to all divs with that class assigned (and multiple classes can be assigned to a single div; just separate them by spaces, like class="landscape framed dark" for example).
div contains single line texts as li elements
div width is determined by widest item width.
If mouse is over some item, its font style changes to bold.
If mouse is placed hover wide items, bold font causes width increase and this causes div width also
to increase.
This looks very ugly if mouse is moved in list.
How to disable this increase without using hard-coded width?
I tried overflow: hidden style as shown in code below but div width still increases.
html:
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product2</li>
...
css:
.site-leftpane {
background-color: #FBFBFB;
clear: left;
color: Black;
float: left;
margin: 0;
overflow: hidden;
padding-top: 1em;
}
.tree {
line-height: 1.6em;
list-style: none outside none;
margin: 0;
padding: 0;
}
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
.tree li:first-child {
font-weight: bold;
}
.tree li a:hover {
color: #E47911 !important;
font-weight: bold;
}
Update
I chaged style according to proposed answer to
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
But problem persists. Web page can used in different screen resolutions. Texts are created by customer at runtime. Right side of contains other div which automatically uses remaining space.
I do'nt knwo how to use hard-coded max-width in this case. max-width specifies maximum allowd div width. Usually in this case div width is smaller, hover causes its increase and thus max-width does not solve the issue.
I had a similar problem and found one way to fix it was by using some jQuery, simple and works:
$('.menu-item').each(function() {
$(this).css( 'width', $(this).width()+'px' );
});
Basically you have jQuery "hard-code"/set the initial width of each of your class elements that was calculated by the browser based on text length and font settings, so that when you hover over each element which say changes the font-weight of the text, then the width won't change, it will remain the same as it was initially.
Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)
Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product It's a product, yes.</li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>
And in the CSS I added this to the end:
.tree li.pad {
line-height: 0;
font-weight: bold;
visibility: hidden;
}
What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.
However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).
Try adding padding:0px and margin:0px to your :hover, also you could add a max width to your div to keep your width at a single size. This in my opinion would fix your problem.
I don't think you can be certain of the actual pixel width when your server builds your page.
The users browser does all of those calculations, and it doesn't really expose them (though client-side scripting languages & toolsets like jQuery can see the end results).
Honestly, your best bet is to either assign a fixed-width to the items, calculated well ahead of time, and accept that long text might line break. If this doesn't work for you, the other option you have is to change the hover behavior. Perhaps instead of making the text bold you could change the text/background color? This would be an alternate way to indicate the currently hovered item and it won't change the character size or spacing.
I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.
I have tried a method I found through my searches but this does not seem to work... here is my CSS:
tr {
height: 1px;
}
td {
height:100%;
}
label {
background-color: #DCDCDC;
display: block;
font-weight:bold;
vertical-align:top;
text-align:right;
padding: 8px 5px 8px 8px;
margin: 1px 3px 1px 0px;
min-width: 120px;
min-height:100%;
height:auto !important;
height:100%;
}
Any help with this would be gratefully appreciated
From the given CSS it looks like there may be browser default padding on the table cells.
td {padding: 0;}
label {display: block; padding: 1em;}
seems to do the trick for me : http://jsfiddle.net/Fb7bS/
But a more complex table and/or inherited styles from elsewhere may add complications.
Hy,
I came over this problem long time ago. It seems that some sort of webbrowsers add a standard padding and margin to tables. How much they add, always depends on the webbrowser. But to overcome this problem you should consider the method of css reseting. What's that ? You simply add a .css file you include in your HTML Page which setts all margins/paddings and other formations done by default to zero. With this you avoid such problems.
There goes the link for CSS Reset: http://meyerweb.com/eric/tools/css/reset/
Well, in older browsers, a label cannot be set as a block level element. You could try placing a div within the label and transferring the label's styles to the div, and see if that fixes your issue.
Though also for height: 100% to work, the element must be absolutely positioned, and the parent element relatively positioned, but in some browsers table elements like td can't be relatively positioned, either. Also unless the td is meant to fill the entire length of the screen vertically, the height: 100% on both elements is unnecessary anyway.
I removed some of the "unnecessary" code and changed your format a bit here, though I'm not sure exactly what you wanted, so it might turn out to not be so unnecessary and that something else was just missing: http://jsfiddle.net/mGykJ/1/
Could you see if that's more like what you had in mind? Though if you could post your HTML, that would be helpful.
The only thing I've found has been;
.hang {
text-indent: -3em;
margin-left: 3em;
}
The only way for this to work is putting text in a paragraph, which causes those horribly unsightly extra lines. I'd much rather just have them in a <span class="hang"></span> type of thing.
I'm also looking for a way to further indent than just a single-level of hanging. Using paragraphs to stack the indentions doesn't work.
<span> is an inline element. The term hanging indent is meaningless unless you're talking about a paragraph (which generally means a block element). You can, of course, change the margins on <p> or <div> or any other block element to get rid of extra vertical space between paragraphs.
You may want something like display: run-in, where the tag will become either block or inline depending on context... sadly, this is not yet universally supported by browsers.
Found a cool way to do just that, minus the nasty span.
p {
padding-left: 20px;
}
p:first-letter {
margin-left: -20px;
}
Nice and simple :D
If the newlines are bothering you in p blocks, you can add
p {
margin-top: 0px;
margin-bottom: 0px;
}
JSFiddle Example
ysth's answer is best with one debatable exception; the unit of measure should correspond to the size of the font.
p {
text-indent: -2en;
padding-left: 2en;
}
"3" would also work adequately well; "em" is not recommended as it is wider than the average character in an alphabetic set. "px" should only be used if you intended to align hangs of text blocks with differing font sizes.