SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie8 and ie9 em font issue and % interpretation issues ?

    Hello all,

    Please take a look at the following page:

    http://tinyurl.com/6qu3dyv

    By looking into good browsers and IE you will find two issues:


    1)
    The point was to have the background narrow then the line-height so, I've come up with this:

    Code CSS:
    article header hgroup h1 {
       display:inline-block;
       padding-top: 5px;
       margin-right:2px;
    }
     
    article header hgroup h1 span {
       display:inline-block;
       background: #d8e5e4;
       font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
       padding-left: 2%;
       line-height: .9;
       font-size: 2.6em; <-- ON IE 9 (at least) we get a HUGE font instead of the desired size like seen on good browsers;
    }

    ISSUE:
    The font size on hgroup h1 span is HUGE.
    The way I found to "fix" was to pass that font-size declaration to it's parent - is this ok ?




    2)
    article is taking 70% of something else, but not the intended container.
    As you can see, ALL article content is to narrow when compared with the same article rendered on good browsers.

    Haven't found any way to properly solve this.
    Any clue ?




    k. regards,
    mem

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by oikram View Post
    pass that font-size declaration to it's parent - is this ok ?
    That sounds OK. But why do you have two hgroups, and multiple h1s inside them? That's not how these elements are meant to be used.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That sounds OK. But why do you have two hgroups, and multiple h1s inside them? That's not how these elements are meant to be used.
    Actually I was in doubt there. I'm having two hgroups because, on that page, I actually could read them as two header groups I believe.
    Also, by doing that I would have two natural containers in order make them inline 2 by 2.
    At end, I notice I had no validation error throw regarding that, so, it seems ok to me.

    But what do you say?



    No clue about the second issue ?

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The issue 2 is solved. It was due to the fact that I was seeing the all thing on IE on a 1024 resolution, and I end up forgetting one rule.
    So, all ok.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by oikram View Post
    by doing that I would have two natural containers in order make them inline 2 by 2.
    Yes, but you are using elements in a way they are not designed to be used for presentational purposes only. A better way is to use CSS (and maybe a few small hooks) to style them. For example, in that instance all you need is a single <h1> with some spans to help you style the heading as you want.

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, but you are using elements in a way they are not designed to be used for presentational purposes only. A better way is to use CSS (and maybe a few small hooks) to style them. For example, in that instance all you need is a single <h1> with some spans to help you style the heading as you want.
    Let's investigate...

    True. We can consider that by doing that I'm grouping elements that, semantically, have no reason to be like that, so it's only a visual thing, hence, a non-semantic element should be used to group those 4 single words, 2 by 2.
    If, however, those words would make sense (semantically) to be grouped 2 by 2 (regardless the visual disposition), then I still believe two hgroups may have some sense.

    As you said, a span ( and a <br />) inside a h1 could do the job there.

    We would leave hgroups for "titles and subtitles" or even two titles of the same hierarchy if and only if, no outline get's offended ?

    Cheers,
    m.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by oikram View Post
    two titles of the same hierarchy if and only if, no outline get's offended
    But there's no need anyway. You can set spans to display: block if you need them on separate lines. You just have one heading there, so better to use one only and save on all those headings and hgroups. (hgroup is a silly idea anyway, IMHO. A subtitle is not a heading.)

  8. #8
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <h1>Heading <br> Heading</h1>
    perfectly valid.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •