Quick question.
Does anyone know for a work-arround or fix for my problem:
The issue is that because of the line-height on the paragraph the start and bottom of the paragraph have some white space. In the example given above it's about 4px. But I do not want to edit my margins on other elements. For example, 40px margin would be 36px.
So does anyone know a good workarround for this?
I did find the css pseudoelement first-line: http://reference.sitepoint.com/css/pseudoelement-firstline
I would approach this problem differently thank looking for a last line pseudo element.
If you are going to have some more content after the paragraph you can style this to move upwards closer to the last line of text.
For an idea of what i mean please see here -> http://jsfiddle.net/Z9LG9/1/
In response to your comment saying "keeping your style sheets as clean as possible" should you not be looking at creating a functional style sheet over a nice looking one? You can always clean up the style sheet after the build phase.
You are going to need to use negative margin for this. There is no way around it that will be cross browser capable.
Related
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
I've given the elements a border so that you can see the inconsistent padding. The only thing I have added is a padding-left to each of the 3 elements. I'm trying to space the headlines vertically with even space between across different browsers. Can't figure it out.
Here is how it looks in Chrome:
http://postimage.org/image/ly5gzp0k5/
Here is how it looks in IE:
http://postimage.org/image/qa34t76al/
All padding top and bottom is set to zero. In fact, all css is reset to my knowledge and after hours of trying to figure it out, I decided to post on Stack Overflow hoping for any help someone could provide.
Thanks in advance.
You can use line-height to positioning your text vertically. Here is some example for how to use it.
Padding is handled differently in browsers due to different box models. You can use the css property "box-sizing" to set use one box model over another.
I'd suggest defining which box model to use in your css:
http://css-tricks.com/box-sizing/
I was just wondering if there was any disadvantages for having empty divs in place in order to have a layout that I desire. Is there any other way around having hidden divs because I know that it adds to messy code.
See images below for what I am trying to demonstrate:
As you can see, the bullet points on the left are level with the h2 element but when I add a h2 element before the bullet points, it lowers them to the level of the paragraph (which is how I want it). Obviously I can make this h2 element invisible and therefore achieve my desired effect but is there more of a professional way of doing this?
But why you want to do that? Whats margin-top property for?
I'll go lil brief here, you should first learn floats than go for positioning, also learn what block and inline elements are, you got a lot of CSS things out there, margins,paddings` etc, take a look at box-model too so that you don't pull your hair later
And if you want to stick to a dirty markup than empty div's and br are options for you, but you won't get a specific height from top using br so for that you need to use an empty div but DON'T USE THIS
Two suggestions which will provide a quick fix:
Margin-top on the bullet points element or.
Add an H2 with a non-breaking space inside it e.g.
<h2> </h2>
If you want to add extra space without CSS, you can use <br/>
tags - its definitely a much better than empty divs, which is messy and a bad practice.
CSS is really the best way, though.
Give the h2 a width so it takes up the entire rest of the row. The bullet list will then automatically drop to the same height as the left paragraphs.
Or, give the bullet list a margin-top or padding-top.
I suggest that you use either margin-top for the second div or margin-bottom for the first one.
Example: If the hidden div's height is 100px, you better write: <div style="margin-bottom:100px">...</div>
i'm making a new site where the headings have backgrounds around them and a little padding.
This is a responsive site, so in some states the headings will break into multiple lines, resulting in them losing the padding to the right on the first line, and to the left on the second line. I am using display:inline since the padding needs to be adjusted around each line.
Is there any way to keep the padding when breaking lines?
Example:
http://jsfiddle.net/gmW5X/
The padding is missing after introducing and before the ...
This does not need to scale down to old ie since the problem only appears at the mobile css targeted to primarely iphone. However, i'd very much like not to alter too much html :/
I don't see another solution but wrap each word in span... http://jsfiddle.net/gmW5X/4
display: inline-block;
do the trick.
jsFiddle
i'm trying to create a frame that will contain a dynamic amount of text.
it has rounded corners so a created 3 divs:top, body and bottom.
body will hold the content while top & bottom only display the respective images of the frame.
all this can be seen here:
http://www.m-challenge.com/nimrod/modular_frame.php
the problem:
there is a space those top and bottom divs and the middle one.
please take a look and any input would be highly appreciated.
have a nice day :-)
Your issue is that the p tag has some margin on top/bottom. Give it a margin of 0 to fix that. The same would apply if you put any h#, ul and similar tags in the box.
Also, can I recommend you not spend so much time making rounded courners this way and simply use CSS3's border-radius? I know, it's not fully supported yet but you have support from most browsers apart from IE, and IE users simply get a gracefull fall back to a square box. Just a suggestion
I think you should first reset margins and paddings:
http://meyerweb.com/eric/tools/css/reset/
then apply the proper values, depending on the effect you want to achieve.