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/
Related
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
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.
using css how do I put a span on top of other spans.
I have several spans in the page and at the end of the page I have this
<span id="lastSpan" style=" margin-left:726px; margin-top:30px;"></span>
problem with that is that it never goes to 30px down from top. and stuck at same height.
any help will be appreciated
thanks
Span's are inline elements and don't adhere to margin on top and bottom. You need to set it to display: inline-block if you want margin to work.
spans are inline elements. you cant apply margins to them. use a div if you need a generic container with margins/height.
Inline elements can't be styled the same way as block elements. For one, they are (entirely?) unresponsive to margin and height commands. The solution is to add display: block; to your styling to force block styles.
span wont accept margin properies, cos it is inline element. You can change it to block element by display:block, float:left/right or position:absolute
This might be captain pædantry to the rescue, but that spans are inline-level has little to do with this. The fact that most (all) browser's house-style sheet implicitly sets the span's property on display:inline does unless the author or the user explicitly overrule this does though. As far as I know, the W3C does not define what the house style of browsers must be, but they do give some pointers for interoperability.
Of course, this might not be as relevant here, but there are actually some places where browsers don't pick their styles all the same. Notably Safari and Chrome do not place a dashed border under abbr by default while Firefox and IE do. Also, some browsers space paragraphs by using margin-top:1em; while others use margin-bttom:1em, in most cases this doesn't matter but there are some cases where defining explicitly which of the two you want in your site is in fact needed for a consistent look.
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.
http://www.wilwaldon.com/crossing/page3.html
If you look at the page in IE7 there is an ungodly amount of space between the top paragraph and the bottom spotlight area. It works fine in all other browsers.
If you know of any tricks or hacks to prevent this I'd greatly appreciate this :)
Thank you!
The reason you're getting all that space is because of all the top padding and margin you put on the #spotlight yourself. You seem to be adding all that space as a way of making enough room for the floats inside it. Don't do that. Make the div contain its floats by adding overflow: hidden to it. If that has unwanted side-effects, add the clearfix class to it, which is already in your CSS.
The reason you're seeing all that space in IE7 is because the #spotlight has a width, which is triggering layout. That causes it to contain its floats already, pushing all that top margin and padding up above it.
Oh, and don't use multiple id="spotlightbox". That's what classes are for. IDs must be unique. Use class="spotlightbox" instead.
if you set display:inline on your spotlight div it should render better in IE7...but that will break other browsers - so use the conditional css - or rewrite your style to be more compliant