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 >> >> Regards, >> >> Elli Vizcaino >> http://www.e7flux.com > > > 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. > > .re { > display: block; > /* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */ > text-align: right; > font-size: 32.25em; /* 516px/16px */ > letter-spacing: -17px; > } > .vamp, .ing { > clear: both; > display: block; > text-align: right; > } > .vamp { > font-size: 12.75em; /* 204px/16px */ > /* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */ > /* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */ > } > .ing { > font-size: 9em; /* 144px/16px */ > margin-bottom: 11.05072463768116%; /* 61px/552px */ > > } > > You have a missing </span> tag. > > > > Alan >
> Alan Gresley > http://css-3d.org/ > http://css-class.com/ 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 http://www.e7flux.com ______________________________________________________________________ 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/
