Where is that title gone ?

Discussion in 'HTML' started by Gloops, Jan 6, 2014.

  1. Gloops

    Gloops Guest

    Hello everybody,

    When reading that page :
    http://www.businessinsider.com/wsj-microsoft-ceo-search-2014-1

    I saw that the most part of the H4 titles, at the beginning of them, was
    invisible because of, virtually, a negative margin.

    For instance, for the first one, I read : "oft CEO Thing... Probably
    Not Happening!"

    I saved the page locally, as well as the stylesheet :
    http://static6.businessinsider.com/assets/css/min-1.css

    that way I could replace "overflow:hidden" by "overflow:visible", at
    least for style media-body, and in fact for most styles but as I saw
    this one should have been the good one.

    I can read a larger part of the title, but the beginning of it is still
    not visible (except of course in the source of the page).

    It appears like that as well in Firefox (with NoScript extension) as in
    Internet Explorer. Is that only on my machine ?

    It seems authorizing the scripts does not solve the problem.

    I tried putting "float:left" instead of "float:none" (before going to
    see what that means) in style pull-left, with no visible results.

    I did not find how they did that, can anyone help me to understand ?
    I thought to a table with fixed width, in fact there is only one table,
    with style xignite-indices, there is no width set in it, is there ?
     
    Gloops, Jan 6, 2014
    #1
    1. Advertising

  2. On 6.1.2014 11:57, Gloops wrote:
    > http://www.businessinsider.com/wsj-microsoft-ceo-search-2014-1
    >
    > I saw that the most part of the H4 titles, at the beginning of them, was
    > invisible because of, virtually, a negative margin.


    Can't see a negative margin being set.

    > For instance, for the first one, I read : "oft CEO Thing... Probably
    > Not Happening!"


    The H4 headers are completely visible here.

    > It appears like that as well in Firefox (with NoScript extension) as in
    > Internet Explorer. Is that only on my machine ?


    I checked with Waterfox, IE9 and Chrome, no problem.

    > It seems authorizing the scripts does not solve the problem.


    Authorizing scripts did some change to the font, but the text was still
    all there.

    > I did not find how they did that, can anyone help me to understand ?


    I don't think that they meant to hide them headers. The page contains
    some markup errors and over 900 CSS errors, so all bets are off.

    --
    Best wishes, Osmo
     
    Osmo Saarikumpu, Jan 6, 2014
    #2
    1. Advertising

  3. Gloops

    Gloops Guest

    Le 06/01/2014 12:59, Osmo Saarikumpu a écrit :
    > On 6.1.2014 11:57, Gloops wrote:
    >> http://www.businessinsider.com/wsj-microsoft-ceo-search-2014-1
    >>
    >> I saw that the most part of the H4 titles, at the beginning of them, was
    >> invisible because of, virtually, a negative margin.

    >
    > Can't see a negative margin being set.
    >
    >> For instance, for the first one, I read : "oft CEO Thing... Probably
    >> Not Happening!"

    >
    > The H4 headers are completely visible here.



    Oh, you mean the problem is specific to my machine :
    http://cjoint.com/data3/3AgtoDr6JTR_buisinessinsider.jpg

    Any idea where that can come from ?
    It appears the same way in Firefox and IE8 ...

    The system is Windows XP Home SP3, protected by Online Armor and
    Microsoft Security Essentials.

    > I don't think that they meant to hide them headers. The page contains
    > some markup errors and over 900 CSS errors, so all bets are off.
    >


    Oh, seems to be something to learn, there :)

    Thank you ...
     
    Gloops, Jan 6, 2014
    #3
  4. Gloops

    dorayme Guest

    In article <lae5rq$6ts$>,
    Osmo Saarikumpu <> wrote:

    > On 6.1.2014 11:57, Gloops wrote:
    > > http://www.businessinsider.com/wsj-microsoft-ceo-search-2014-1
    > >
    > > I saw that the most part of the H4 titles, at the beginning of them, was
    > > invisible because of, virtually, a negative margin.

    >
    > Can't see a negative margin being set.
    >
    > > For instance, for the first one, I read : "oft CEO Thing... Probably
    > > Not Happening!"

    >
    > The H4 headers are completely visible here.
    >
    > > It appears like that as well in Firefox (with NoScript extension) as in
    > > Internet Explorer. Is that only on my machine ?

    >
    > I checked with Waterfox, IE9 and Chrome, no problem.
    >
    > > It seems authorizing the scripts does not solve the problem.

    >
    > Authorizing scripts did some change to the font, but the text was still
    > all there.
    >
    > > I did not find how they did that, can anyone help me to understand ?

    >
    > I don't think that they meant to hide them headers. The page contains
    > some markup errors and over 900 CSS errors, so all bets are off.


    It appears as if all styles are off in my Safari, in some browsers,
    very little appears (about 5 menu type links), in FF it looks fine,
    there all sorts of odd things but not as OP describes. It is the sort
    of page that that should be run away from in great haste, it has
    probably not been tested properly by the author(s), it veers off the
    path of best practice so far that you are right: all bets are off!

    --
    dorayme
     
    dorayme, Jan 6, 2014
    #4
  5. Gloops wrote:
    > Le 06/01/2014 12:59, Osmo Saarikumpu a écrit :
    >> On 6.1.2014 11:57, Gloops wrote:
    >>> http://www.businessinsider.com/wsj-microsoft-ceo-search-2014-1
    >>>
    >>> I saw that the most part of the H4 titles, at the beginning of them, was
    >>> invisible because of, virtually, a negative margin.

    >>
    >> Can't see a negative margin being set.
    >>
    >>> For instance, for the first one, I read : "oft CEO Thing... Probably
    >>> Not Happening!"

    >>
    >> The H4 headers are completely visible here.

    >
    >
    > Oh, you mean the problem is specific to my machine :
    > http://cjoint.com/data3/3AgtoDr6JTR_buisinessinsider.jpg
    >
    > Any idea where that can come from ?
    > It appears the same way in Firefox and IE8 ...
    >
    > The system is Windows XP Home SP3, protected by Online Armor and
    > Microsoft Security Essentials.
    >
    >> I don't think that they meant to hide them headers. The page contains
    >> some markup errors and over 900 CSS errors, so all bets are off.
    >>

    >
    > Oh, seems to be something to learn, there :)
    >


    It has to do with the width of your browser window. If you have a
    widescreen monitor set browser >= 1080 it looks fine. Start narrowing
    the windows and the images jump in size and left margin cuts off. I'd
    say 'deziner' tried to some something fancy various view port and did an
    epic fail.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 6, 2014
    #5
  6. Gloops

    dorayme Guest

    In article <lafk4k$u0p$>,
    "Beauregard T. Shagnasty" <> wrote:

    > Jonathan N. Little wrote:
    >
    > > It has to do with the width of your browser window. If you have a
    > > widescreen monitor set browser >= 1080 it looks fine. Start narrowing
    > > the windows and the images jump in size and left margin cuts off. I'd
    > > say 'deziner' tried to some something fancy various view port and did an
    > > epic fail.

    >
    > Oh wow. You're right, except your 1080 should be somewhere north of 1200
    > for it to work correctly (and I use *that* term loosely!).


    In my Mac Safari with a browser window several *miles* wide, there are
    no obvious author styles, with my Mac FF, at very narrow indeed, it
    behaves well. Perhaps there is a mess of browser sniffing in it.

    --
    dorayme
     
    dorayme, Jan 7, 2014
    #6
  7. dorayme wrote:
    > In article <lafk4k$u0p$>,
    > "Beauregard T. Shagnasty" <> wrote:
    >
    >> Jonathan N. Little wrote:
    >>
    >>> It has to do with the width of your browser window. If you have a
    >>> widescreen monitor set browser >= 1080 it looks fine. Start narrowing
    >>> the windows and the images jump in size and left margin cuts off. I'd
    >>> say 'deziner' tried to some something fancy various view port and did an
    >>> epic fail.

    >>
    >> Oh wow. You're right, except your 1080 should be somewhere north of 1200
    >> for it to work correctly (and I use *that* term loosely!).

    >
    > In my Mac Safari with a browser window several *miles* wide, there are
    > no obvious author styles, with my Mac FF, at very narrow indeed, it
    > behaves well. Perhaps there is a mess of browser sniffing in it.
    >


    Well "behaves well" is not what I would say, but with 760 KB of
    stylesheets and 2922 KB of JavaScript I'm not debugging it.

    See wide:

    <http://www.littleworksstudio,com/temp/usenet/wide>

    Not so wide, but by no means narrow!
    <http://www.littleworksstudio,com/temp/usenet/notsowide>

    Well my "miles" was only 3840px.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 7, 2014
    #7
  8. Beauregard T. Shagnasty wrote:
    > Jonathan N. Little wrote:
    >
    >> See wide:
    >> <http://www.littleworksstudio,com/temp/usenet/wide>
    >>
    >> Not so wide, but by no means narrow!
    >> <http://www.littleworksstudio,com/temp/usenet/notsowide>

    >
    > The links have commas instead of dots before the 'com' if anyone tries and
    > fails. ;-)
    >


    damn fat fingers!
    See wide:
    <http://www.littleworksstudio.com/temp/usenet/wide>

    Not so wide, but by no means narrow!
    <http://www.littleworksstudio.com/temp/usenet/notsowide>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 7, 2014
    #8
  9. Gloops

    dorayme Guest

    In article <laft6n$a87$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > > In article <lafk4k$u0p$>,
    > > "Beauregard T. Shagnasty" <> wrote:
    > >
    > >> Jonathan N. Little wrote:
    > >>
    > >>> It has to do with the width of your browser window. If you have a
    > >>> widescreen monitor set browser >= 1080 it looks fine. Start narrowing
    > >>> the windows and the images jump in size and left margin cuts off. I'd
    > >>> say 'deziner' tried to some something fancy various view port and did an
    > >>> epic fail.
    > >>
    > >> Oh wow. You're right, except your 1080 should be somewhere north of 1200
    > >> for it to work correctly (and I use *that* term loosely!).

    > >
    > > In my Mac Safari with a browser window several *miles* wide, there are
    > > no obvious author styles, with my Mac FF, at very narrow indeed, it
    > > behaves well. Perhaps there is a mess of browser sniffing in it.
    > >

    >
    > Well "behaves well" is not what I would say


    You might tend to say this if you saw it in my FF. It adapts well to
    width, mostly to changes in text size (the extremes break it *a bit*).
    In my Safari, it is very acceptable, if you like (as I do) no styles
    (I have no idea why it presents so different in different browsers,
    you should see it in Mac IE 5!)

    --
    dorayme
     
    dorayme, Jan 7, 2014
    #9
  10. dorayme wrote:
    > In article <laft6n$a87$>,
    > "Jonathan N. Little" <> wrote:


    >> Well "behaves well" is not what I would say

    >
    > You might tend to say this if you saw it in my FF. It adapts well to
    > width, mostly to changes in text size (the extremes break it *a bit*).
    > In my Safari, it is very acceptable, if you like (as I do) no styles
    > (I have no idea why it presents so different in different browsers,
    > you should see it in Mac IE 5!)
    >


    If you scroll below look at the "See Also" section and the viewport is
    less than 1280 the left margin clips content. It looks the same in FF in
    Linux. Disable CCS and get a surprise, the image of Ballmer and Gates is
    monstrous!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 7, 2014
    #10
  11. Gloops

    Gloops Guest

    Le 07/01/2014 00:28, Jonathan N. Little a écrit :
    > It has to do with the width of your browser window. If you have a
    > widescreen monitor set browser >= 1080 it looks fine. Start narrowing
    > the windows and the images jump in size and left margin cuts off. I'd
    > say 'deziner' tried to some something fancy various view port and did an
    > epic fail.
    >
    >


    I use what in French we call "ultra-portable", it holds in a cover less
    than 30 cm of outside length.

    The screen diagonal measures somewhat 25 cm, its maximum resolution is
    1024x600.
     
    Gloops, Jan 7, 2014
    #11
  12. Gloops

    Gloops Guest

    Le 06/01/2014 21:51, Beauregard T. Shagnasty a écrit :
    > No, I see the same problem just as your screenshot .. in Firefox 16,
    > SeaMonkey, other Geckos, and in Opera, but not in Chromium. Chromium shows
    > the H4s as one would expect, with thumbnails at the left.


    Well, I feel less alone :)
     
    Gloops, Jan 7, 2014
    #12
  13. Gloops

    Gloops Guest

    Le 06/01/2014 20:03, Ed Mullen wrote :
    > A quick test is to run FF in Safe Mode with all add-ons turned off.
    >
    > From a command prompt:
    >
    > "x:\Program Files\Mozilla Firefox\firefox.exe" -safe-mode
    >
    > where "x" is the appropriate drive.
    >
    > As to what on your system might be causing the same error in both a
    > Mozilla browser AND IE, I'm at a loss.
    >
    > If FF in Safe Mode works properly then try running Windows in Safe Mode
    > and see if that clears up both FF and IE.
    >
    >
    >


    By curiosity I shall have a look this afternoon, but I do not fear too
    much that my Firefox extensions trouble the display in Internet Explorer.

    The topic of the screen size that has appeared in the thread seems
    somewhat coherent. If the page is displayed in a table, the navigation
    pane stays on the side, and if the styles do not allow the title to
    appear on more than one line, it can give the results I showed. I
    noticed that no width was given in the table style, but ... it can be
    limited by the screen size, this is what I did not think to.

    I presume this is the reason why many sites prefer HTTP div to HTTP
    table ...

    Thank you everybody.
     
    Gloops, Jan 7, 2014
    #13
  14. Gloops

    dorayme Guest

    In article <lag1fm$rqo$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > > In article <laft6n$a87$>,
    > > "Jonathan N. Little" <> wrote:

    >
    > >> Well "behaves well" is not what I would say

    > >
    > > You might tend to say this if you saw it in my FF. It adapts well to
    > > width, mostly to changes in text size (the extremes break it *a bit*).
    > > In my Safari, it is very acceptable, if you like (as I do) no styles
    > > (I have no idea why it presents so different in different browsers,
    > > you should see it in Mac IE 5!)
    > >

    >
    > If you scroll below look at the "See Also" section and the viewport is
    > less than 1280 the left margin clips content. It looks the same in FF in
    > Linux. Disable CCS and get a surprise, the image of Ballmer and Gates is
    > monstrous!


    In Mac Safari, no special settings by me, author styles *not* turned
    off by me:

    <http://dorayme.netweaver.com.au/justPics/Mac_Safari.png>

    In Mac FF:

    <http://dorayme.netweaver.com.au/justPics/Mac_FF_AsWideAsItGets.png>

    (reduced in size by 25%)

    In Mac FF :

    <http://dorayme.netweaver.com.au/justPics/Mac_FF_AsNarrowAsItGets.png>

    In Mac IE5

    <http://dorayme.netweaver.com.au/justPics/Mac_IE5.png> !

    --
    dorayme
     
    dorayme, Jan 7, 2014
    #14
  15. dorayme wrote:
    > In article <lag1fm$rqo$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> dorayme wrote:
    >>> In article <laft6n$a87$>,
    >>> "Jonathan N. Little" <> wrote:

    >>
    >>>> Well "behaves well" is not what I would say
    >>>
    >>> You might tend to say this if you saw it in my FF. It adapts well to
    >>> width, mostly to changes in text size (the extremes break it *a bit*).
    >>> In my Safari, it is very acceptable, if you like (as I do) no styles
    >>> (I have no idea why it presents so different in different browsers,
    >>> you should see it in Mac IE 5!)
    >>>

    >>
    >> If you scroll below look at the "See Also" section and the viewport is
    >> less than 1280 the left margin clips content. It looks the same in FF in
    >> Linux. Disable CCS and get a surprise, the image of Ballmer and Gates is
    >> monstrous!

    >
    > In Mac Safari, no special settings by me, author styles *not* turned
    > off by me:
    >
    > <http://dorayme.netweaver.com.au/justPics/Mac_Safari.png>
    >
    > In Mac FF:
    >
    > <http://dorayme.netweaver.com.au/justPics/Mac_FF_AsWideAsItGets.png>
    >
    > (reduced in size by 25%)
    >
    > In Mac FF :
    >
    > <http://dorayme.netweaver.com.au/justPics/Mac_FF_AsNarrowAsItGets.png>
    >
    > In Mac IE5
    >
    > <http://dorayme.netweaver.com.au/justPics/Mac_IE5.png> !
    >


    Strange. I noticed that in your narrow version that there was no
    horizontal scrollbar. In both Windows and Linux if the viewport <1280
    there is a horizontal scrollbar suggesting a min-width rule which should
    not be OS dependent. I don't think it is JaavScript because the problem
    occurred when JavaScript was disabled.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 7, 2014
    #15
  16. Gloops

    dorayme Guest

    In article <lagu0t$25h$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > > In article <lag1fm$rqo$>,
    > > "Jonathan N. Little" <> wrote:
    > >
    > >> dorayme wrote:
    > >>> In article <laft6n$a87$>,
    > >>> "Jonathan N. Little" <> wrote:
    > >>
    > >>>> Well "behaves well" is not what I would say
    > >>>
    > >>> You might tend to say this if you saw it in my FF. It adapts well to
    > >>> width, mostly to changes in text size (the extremes break it *a bit*).
    > >>> In my Safari, it is very acceptable, if you like (as I do) no styles
    > >>> (I have no idea why it presents so different in different browsers,
    > >>> you should see it in Mac IE 5!)
    > >>>
    > >>
    > >> If you scroll below look at the "See Also" section and the viewport is
    > >> less than 1280 the left margin clips content. It looks the same in FF in
    > >> Linux. Disable CCS and get a surprise, the image of Ballmer and Gates is
    > >> monstrous!

    > >
    > > In Mac Safari, no special settings by me, author styles *not* turned
    > > off by me:
    > >
    > > <http://dorayme.netweaver.com.au/justPics/Mac_Safari.png>
    > >
    > > In Mac FF:
    > >
    > > <http://dorayme.netweaver.com.au/justPics/Mac_FF_AsWideAsItGets.png>
    > >
    > > (reduced in size by 25%)
    > >
    > > In Mac FF :
    > >
    > > <http://dorayme.netweaver.com.au/justPics/Mac_FF_AsNarrowAsItGets.png>
    > >
    > > In Mac IE5
    > >
    > > <http://dorayme.netweaver.com.au/justPics/Mac_IE5.png> !
    > >

    >
    > Strange. I noticed that in your narrow version that there was no
    > horizontal scrollbar. In both Windows and Linux if the viewport <1280
    > there is a horizontal scrollbar suggesting a min-width rule which should
    > not be OS dependent. I don't think it is JaavScript because the problem
    > occurred when JavaScript was disabled.


    Well, let's put it this way: A really good thing in a website design,
    if it can be achieved, is to have it fluidly flow, to wrap and fit in
    a viewport and be easily usable. This appeared to me to happen with
    this site in my FF, that it had no scrollbars is a testament to it, it
    is what I meant by behaving well (which you doubted).

    I really have not gone in to it, it looks like an abortion that
    somehow behaves itself in my FF, like a drunk actor that is given a
    shot of vitamin B12 and goes on stage and pulls off a performance on
    one occasion. (I do admit that I heard it collapse with exhaustion
    after I closed my FF down... I am sure I heard a sound like "Phew!
    Made it!")

    The scrollbar, btw, appears in the Safari (el basico style), so I am
    sure there are width specs or other things pushing the minimum out.
    Here is something I have no familiarity with:

    "<meta name="viewport" content="width=device-width, initial-scale=1,
    maximum-scale=1" />

    I should, but can't be bothered to investigate all this! Perhaps the
    author developed it for FF somehow and everything he did he made sure
    worked in FF, maybe even Mac FF, then hacked his way to get the same
    in other browsers and screwed up badly, I don't know!

    I am sure many of us could mark up far simpler and better to make the
    site work well in all browsers.

    --
    dorayme
     
    dorayme, Jan 7, 2014
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andreas Klemt
    Replies:
    1
    Views:
    474
    Steve C. Orr, MCSD
    Aug 10, 2003
  2. Replies:
    0
    Views:
    551
  3. Replies:
    1
    Views:
    569
    David
    Apr 24, 2007
  4. soonic
    Replies:
    11
    Views:
    1,804
    soonic
    Jul 27, 2011
  5. Russell
    Replies:
    2
    Views:
    303
    Russell
    Sep 13, 2004
Loading...

Share This Page