On 7/3/14, 9:36, Alan Gresley wrote:
On 4/07/2014 1:58 AM, Elli Vizcaino wrote:
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley <a...@css-class.com> wrote:
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/2222.html
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is to
help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.
[code removed]
You have a missing </span> tag.
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/2222.html
Elli Vizcaino
Hello Elli,
I believe I know what is happening but I don't know what style is causing it.
Please see this screenshot.
http://css-class.com/test/temp/italic.jpg
It's this font-family.
h1, h1 a.logo {
font-family: "Calluna Sans","Arial","Helvetica","sans-serif";
}
To get that 'Arial italic' fallback when I remove the reset CSS.
http://www.e7flux.com/e7flux2014/css/reset.css
I don't understand why the fallback is Arial italic instead of Arial but I
suspect the italic aspect is the thing that causing the space.
I think you may be looking at the normal letter spacing that occurs between
letters. If you increase the font-size of your test text, you will notice small
gaps there as well.
As this spacing varies by letter and font, I’m sorry I have no good solution.
Playing with the CSS letter-spacing value did not give a useful result. YMMV.
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
