Where is that title gone ?


G

Gloops

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 ?
 
Ad

Advertisements

O

Osmo Saarikumpu

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.
 
G

Gloops

Le 06/01/2014 12:59, Osmo Saarikumpu a écrit :
Can't see a negative margin being set.


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 ...
 
D

dorayme

Osmo Saarikumpu said:
Can't see a negative margin being set.


The H4 headers are completely visible here.


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


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


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!
 
J

Jonathan N. Little

Gloops said:
Le 06/01/2014 12:59, Osmo Saarikumpu a écrit :


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.


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.
 
D

dorayme

Beauregard T. Shagnasty said:
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.
 
Ad

Advertisements

J

Jonathan N. Little

dorayme said:
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.
 
D

dorayme

Jonathan N. Little said:
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!)
 
J

Jonathan N. Little

dorayme said:
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!
 
G

Gloops

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.
 
Ad

Advertisements

G

Gloops

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 :)
 
G

Gloops

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.
 
D

dorayme

Jonathan N. Little said:
dorayme said:
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> !
 
J

Jonathan N. Little

dorayme said:
Jonathan N. Little said:

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.
 
Ad

Advertisements

D

dorayme

Jonathan N. Little said:
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.
 
Ad

Advertisements


Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top