SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    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,097
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    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,005
    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,097
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    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,097
    Mentioned
    448 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.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

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

    Quote Originally Posted by ralph.m View Post
    But there's no need anyway. You can set spans to display: block if you need them on separate lines.
    After carefully reading the documentation, I believe we are NOT allowed to have two headings of the same hierarchy on a header group.
    http://dev.w3.org/html5/markup/hgroup.html

    Quote Originally Posted by ralph.m View Post
    (hgroup is a silly idea anyway, IMHO. A subtitle is not a heading.)
    At the limit we can set spans everywhere and we don't even need h1 or p. We have h1 and p, because we understand that it would be important to preserve a difference because, we believe, those two things, try to accomplish, semantically, two different goals. One says: "hey, this is something important" the other says "hey, this is not that important as the first but perhaps, you may want to read it";

    You are telling me that a subtitle is not a heading. In the say way that a wheel is not a car.
    But we sure can conceive a subtitle as part of a heading or can't we ?

    "Plato's Republic Comprehension Book - A guide to better understand books IV and V"
    Code HTML4Strict:
    <hgroup>
    <h1>Plato's Republic Comprehension Book</h1>
    <h2>A guide to better understand books IV and V</h2>
    </hgroup>

    We can, of course, make all this a single h1, the same way we can make all with a span. But if we make that distinction here, and divide those on a hgroup with two different headings we are semantically saying more then just one heading.

    We are telling, of those important things, the h1 is important, and the h2 is less important. But they both are important.

    We don't get that semantic finesse by having all on a h1.
    And you don't have that finesse if we make:
    Code HTML4Strict:
    <h1>Plato's Republic Comprehension Book</h1>
    <p>A guide to better understand books IV and V</p>

    At the bottom line, we are trying to investigate a draft recommendation, that may even cease to exist on some time, but if one hgroup exists, I don't see why not.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    "Plato's Republic Comprehension Book - A guide to better understand books IV and V"
    Yes, I'd probably call that all part of the one heading, myself. I was thinking of something a bit more separate as a subtitle. One consideration would be—what is a blind person going to hear? They'll hear that quoted text as one long title, which is perfectly fine. So my inclination would still be to mark that up as a single heading, with a span for styling if I wanted some kind of visual effect. A separate heading should really be used to identify a subsection of the text following the main title.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    . 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
  •