Author Topic: 'Simple' aka dumb HTML formatting question  (Read 3366 times)

0 Members and 1 Guest are viewing this topic.

Offline TerraHertzTopic starter

  • Super Contributor
  • ***
  • Posts: 3958
  • Country: au
  • Why shouldn't we question everything?
    • It's not really a Blog
'Simple' aka dumb HTML formatting question
« on: December 30, 2016, 02:32:26 am »
This should probably be for Stackoverflow, but I'm afraid to ask there because the question is likely very stupid. But I can't see the solution and it's driving me nuts. Maybe there'll be less ridicule here. Maybe.

It's a very simple html format problem. Short example demo with all code in one file here:

http://everist.org/NobLog/20161230_html_floating_pain.htm    (Updated URL)

OK, shoot me. There's something I don't understand, and making that DIV align properly at the left surely just needs some slight fix. But what?

In unrelated news, I'm chuffed that last night I *finally* grokked html absolute and relative block positioning, to the point that I can now confidently write the stuff, instead of copying example code and crossing fingers. Took long enough.
« Last Edit: December 31, 2016, 01:23:48 pm by TerraHertz »
Collecting old scopes, logic analyzers, and unfinished projects. http://everist.org
 

Offline tautech

  • Super Contributor
  • ***
  • Posts: 28061
  • Country: nz
  • Taupaki Technologies Ltd. Siglent Distributor NZ.
    • Taupaki Technologies Ltd.
Re: 'Simple' aka dumb HTML formatting question
« Reply #1 on: December 30, 2016, 02:41:37 am »
Looks OK to me in Chrome, Version 55.0.2883.87 m (latest)

See attachment.
Avid Rabid Hobbyist
Siglent Youtube channel: https://www.youtube.com/@SiglentVideo/videos
 

Offline TerraHertzTopic starter

  • Super Contributor
  • ***
  • Posts: 3958
  • Country: au
  • Why shouldn't we question everything?
    • It's not really a Blog
Re: 'Simple' aka dumb HTML formatting question
« Reply #2 on: December 30, 2016, 02:47:16 am »
Looks OK to me in Chrome, Version 55.0.2883.87 m (latest)

See attachment.

Thanks, but no, your image shows the DIV doing the *wrong* thing. It's supposed to have a left border with radius corners, lined up vertically with the text above and below. The DIV is a container, _it's_ the thing that should align. Not the text inside it, which is what's happening. It... uh, I have an idea. Back in a minute.

Edit: OK, now I really think it's a bug. Your example makes 3 browsers.
Code: [Select]
.hilite-aside {
    background-color: #f5f5f5;
    border: 2px solid #e5e5e5;
    border-radius: 15pt;
    padding: 10pt 15pt 10pt 15pt;
    margin: 15pt 0 15pt 200px;         <--- changed the left margin to 200px. See attached pic of result.
  }
The pic is 200px wide also. Now the radius div edge appears, exactly on the pic edge. So... what's happening is that with a float:left image, a div is extending its left margin to the left edge of the viewport, NOT the right-hand edge of the image, as it should.

I just can't believe such a basic bug could still exist, in multiple browsers. Must be something I don't get, surely?
« Last Edit: December 30, 2016, 03:02:30 am by TerraHertz »
Collecting old scopes, logic analyzers, and unfinished projects. http://everist.org
 

Offline tautech

  • Super Contributor
  • ***
  • Posts: 28061
  • Country: nz
  • Taupaki Technologies Ltd. Siglent Distributor NZ.
    • Taupaki Technologies Ltd.
Re: 'Simple' aka dumb HTML formatting question
« Reply #3 on: December 30, 2016, 03:06:07 am »
I'm out, way outside my abilities.  :scared:

But had a good chat with a couple of members the other day and this sort of thing came up in conversation, think apelly might have the answers.
https://www.eevblog.com/forum/chat/auckland-beer-and-flux-xmas-get-together/
Avid Rabid Hobbyist
Siglent Youtube channel: https://www.youtube.com/@SiglentVideo/videos
 

Offline TerraHertzTopic starter

  • Super Contributor
  • ***
  • Posts: 3958
  • Country: au
  • Why shouldn't we question everything?
    • It's not really a Blog
Re: 'Simple' aka dumb HTML formatting question
« Reply #4 on: December 30, 2016, 04:00:26 am »
I improved the demo, by making the image semi-transparent so you can see the border of the DIV sitting behind it, and where it is. Early on I'd tried adjusting the left border position and got really confused when there was no visible change. Spent ages hunting a syntax error or something. 
Collecting old scopes, logic analyzers, and unfinished projects. http://everist.org
 

Offline TiN

  • Super Contributor
  • ***
  • Posts: 4543
  • Country: ua
    • xDevs.com
Re: 'Simple' aka dumb HTML formatting question
« Reply #5 on: December 30, 2016, 04:14:04 am »
Add
Code: [Select]
display: table; attribute to the dodgy div perhaps?  :)
I usually prefer bruteforce way by having tree of div's inside, so if you need to move whole block, you can adjust all related at once. Surely real web-designers will cringe though.  :blah:
« Last Edit: December 30, 2016, 04:15:35 am by TiN »
YouTube | Metrology IRC Chat room | Let's share T&M documentation? Upload! No upload limits for firmwares, photos, files.
 
The following users thanked this post: TerraHertz

Offline sleemanj

  • Super Contributor
  • ***
  • Posts: 3020
  • Country: nz
  • Professional tightwad.
    • The electronics hobby components I sell.
Re: 'Simple' aka dumb HTML formatting question
« Reply #6 on: December 30, 2016, 04:22:40 am »
The answer is, this is just how HTML (and CSS) works.

The floated image removes it from the natural flow, and allows for the text to flow around it.  However this does not affect backgrounds and borders.

https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/
~~~
EEVBlog Members - get yourself 10% discount off all my electronic components for sale just use the Buy Direct links and use Coupon Code "eevblog" during checkout.  Shipping from New Zealand, international orders welcome :-)
 
The following users thanked this post: TerraHertz

Offline TerraHertzTopic starter

  • Super Contributor
  • ***
  • Posts: 3958
  • Country: au
  • Why shouldn't we question everything?
    • It's not really a Blog
Re: 'Simple' aka dumb HTML formatting question
« Reply #7 on: December 30, 2016, 04:34:22 am »
Add
Code: [Select]
display: table; attribute to the dodgy div perhaps?  :)

Ah ha! Thanks.
Code: [Select]
.hilite-aside {
    background-color: #eee;
    border: 2px solid #aaa;
    border-radius: 15pt;
    padding: 10pt 15pt 10pt 15pt;
    margin: 15pt 0 15pt 100px;
    display: table;                       <--- added this.
  }

And it works, though now the 4th value in the margin: attribute does really weird things.
Now to go read up on _why_ it works.  I have never used 'display' before, don't know what it does. Curious to see if there's any 'explanation' for why the plain code fails without that.

Quote
I usually prefer bruteforce way by having tree of div's inside, so if you need to move whole block, you can adjust all related at once. Surely real web-designers will cringe though.  :blah:
Sometimes you have to. For instance if the stuff beside a floated image also contains more floats... time for lots of div's.

For my own site's html I don't much care if stuff breaks for a few browsers. But this thing is for a commercial product, and has to not break.
Collecting old scopes, logic analyzers, and unfinished projects. http://everist.org
 

Offline TiN

  • Super Contributor
  • ***
  • Posts: 4543
  • Country: ua
    • xDevs.com
Re: 'Simple' aka dumb HTML formatting question
« Reply #8 on: December 30, 2016, 04:42:07 am »
Quote
and has to not break.
Good luck on that :) Programmer stuff like to break even between two versions of same browser...  :rant:
That's why I always have three-four browsers on my PCs (FF, new Opera, old Opera, Chrome) as they all show different stuff.
YouTube | Metrology IRC Chat room | Let's share T&M documentation? Upload! No upload limits for firmwares, photos, files.
 

Offline TerraHertzTopic starter

  • Super Contributor
  • ***
  • Posts: 3958
  • Country: au
  • Why shouldn't we question everything?
    • It's not really a Blog
Re: 'Simple' aka dumb HTML formatting question
« Reply #9 on: December 30, 2016, 04:55:12 am »
The answer is, this is just how HTML (and CSS) works.

The floated image removes it from the natural flow, and allows for the text to flow around it.  However this does not affect backgrounds and borders.

https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/

Very useful article, thanks.

"However this does not affect backgrounds and borders."  Urrgh... but a div is a block element. You'd think... sigh. I'd better shut up till I read the 'display:table" stuff.


Quote
and has to not break.
Good luck on that :) Programmer stuff like to break even between two versions of same browser...  :rant:
Tell me about it. Thank God I am not involved in commercial web design. This is just an unusual one-off, and isn't really 'web design' either.

Quote
That's why I always have three-four browsers on my PCs (FF, new Opera, old Opera, Chrome) as they all show different stuff.
Yeah. My dilemma is that Chrome is on my 'do not trust, will not install on my working PCs' list. And new Opera is just Chrome with a wrapper.
I guess I'll have to install it on a sacrificial PC temporarily to check the final html thing.
« Last Edit: December 30, 2016, 05:02:04 am by TerraHertz »
Collecting old scopes, logic analyzers, and unfinished projects. http://everist.org
 

Offline cdev

  • Super Contributor
  • ***
  • !
  • Posts: 7350
  • Country: 00
Re: 'Simple' aka dumb HTML formatting question
« Reply #10 on: December 30, 2016, 05:18:25 am »
The "Web Developer" Firefox extension by Chris Pederick adds a bunch of capabilities to Firefox which are very useful for debugging CSS.

Also there is an extension "Tilt" that might be helpful.
« Last Edit: December 30, 2016, 05:44:47 am by cdev »
"What the large print giveth, the small print taketh away."
 

Offline SeanB

  • Super Contributor
  • ***
  • Posts: 16265
  • Country: za
Re: 'Simple' aka dumb HTML formatting question
« Reply #11 on: December 30, 2016, 07:08:30 pm »
Hate Chrome, download and install Chromium instead Guy. Same basic browser, just all the chocolate factory stuff stripped out and compiled from the source. Works a bit faster as well, and the only real thing you miss is the auto updating, which is a pain in the rear.
 

Offline alexanderbrevig

  • Frequent Contributor
  • **
  • Posts: 700
  • Country: no
  • Musician, developer and EE hobbyist
    • alexanderbrevig.com
Re: 'Simple' aka dumb HTML formatting question
« Reply #12 on: December 30, 2016, 07:27:27 pm »
Lave browser conformity to the big guys. Find a proven framework that suits your needs and do layout with that.
Zero, skeleton, bootstrap etc
 

Offline cdev

  • Super Contributor
  • ***
  • !
  • Posts: 7350
  • Country: 00
Re: 'Simple' aka dumb HTML formatting question
« Reply #13 on: December 30, 2016, 07:36:20 pm »
The Tilt 3D browser extension lets you visualize the HTML for the DOM of a web page in WebGL.

Check out the screen shot of this web page.

"What the large print giveth, the small print taketh away."
 

Offline TerraHertzTopic starter

  • Super Contributor
  • ***
  • Posts: 3958
  • Country: au
  • Why shouldn't we question everything?
    • It's not really a Blog
Re: 'Simple' aka dumb HTML formatting question
« Reply #14 on: December 31, 2016, 01:55:22 am »
The Tilt 3D browser extension lets you visualize the HTML for the DOM of a web page in WebGL.

Hmm, looks pretty, but..
https://developer.mozilla.org/en/docs/Tools/3D_View
From Firefox 47 onwards, 3D view is no longer available.
There is an add-on that offers the same functionality: Tilt 3D. However, note that just like the built-in version, the add-on does not work in multiprocess Firefox.

https://addons.mozilla.org/firefox/addon/tilt/
  Last Updated: December 23, 2011
  Works with Firefox 6.0 - 21.*
  Downloaded -->  tilt_3d-1.0.1-fx.xpi      456KB

I'm using Firefox 38.0.1.   What version are you using it with?

One of the things I like about old Opera, is the Dragonfly developer tool. See pic.

Lave browser conformity to the big guys. Find a proven framework that suits your needs and do layout with that.
Zero, skeleton, bootstrap etc
Uh... that's... hard to know where to begin explaining why 'no thanks'.
I suppose... in general I hate abstraction, and the tendency so many people have to abstract away all contact with underlying reality, into some artificial fantasy land of supposed perfection. Which always turns out to be a trap of overcomplexity, invisible conceptual restrictions, and sudden unexpected obsolescence.

I don't use any 'framework' for html/css. But I do know the kind of thing you mean, and avoid them like the plague. Just now did a quick google of 'web development framework Zero skeleton bootstrap' and the results confirm my instinctive revulsion.

My web development 'platform' is a plain text editor. It doesn't even have syntax highlighting, because I find that an irritating visual distraction. *Sometimes* that can save a bit of time, but overall it's a pain.
It all comes down to objectives. Mine are not to produce flashy looking commercial web pages for money. (If you've seen my own site, you know I don't care about tinsel.)

My real objectives are to learn html/css/js, not just to achieve what I want, but also as an exercise in identifying things I might be able to do to improve the technology, and ways in which web-tech interconnects with the wider area of Computer OS, UI design, and information coding systems in general. I have several development projects running along these lines, none of which are exposure-ready yet, but I find them interesting. One way to maintain life-motivation.

Using some complicated web-dev framework doesn't achieve any of that, it would only identify things I hated about the framework - which then becomes irrelevant when the product is superseded.
Also at my age, 'learning capacity' is a limited resource. Not to be wasted on stuff that irritates me.

Hate Chrome, download and install Chromium instead Guy. Same basic browser, just all the chocolate factory stuff stripped out and compiled from the source. Works a bit faster as well, and the only real thing you miss is the auto updating, which is a pain in the rear.

Huh, that's what I get for deciding a while ago that google has become as evil as MS, and so I just stopped paying attention. I'd thought people were using the terms Chrome and Chromium interchangeably. OK, so quick read-up and Chromium is not totally a google product. *Might* be trustable. I'll add it to the list of other browsers to try sometime, along with PaleMoon, Seamonkey and Vivaldi. But 'try' always means several days at least, just to work out if it's bearable or has to be deleted. Question #1 - is there are Portable App version? A: Yes there is. OK, one less barrier.

Wait, you _like_ auto updating?

« Last Edit: December 31, 2016, 02:55:20 am by TerraHertz »
Collecting old scopes, logic analyzers, and unfinished projects. http://everist.org
 

Offline cdev

  • Super Contributor
  • ***
  • !
  • Posts: 7350
  • Country: 00
Re: 'Simple' aka dumb HTML formatting question
« Reply #15 on: December 31, 2016, 04:41:19 am »
Terra Hertz, the older versions of Firefox often have it already built in as part of the Dom Inspector. I forget what the icon looks like, it may have been a little cube.
"What the large print giveth, the small print taketh away."
 

Offline alexanderbrevig

  • Frequent Contributor
  • **
  • Posts: 700
  • Country: no
  • Musician, developer and EE hobbyist
    • alexanderbrevig.com
Re: 'Simple' aka dumb HTML formatting question
« Reply #16 on: January 01, 2017, 12:18:12 am »
I avoid craftsmen who refuses to use tools that are right for the job. If you don't know css, write it as little as possible while getting paid for it. That's all I'm saying.
Figuring out the various intricacies of css and the various layout engines is a great way to learn though. Seeing how layouts fail and then implementing workarounds will keep your coffee pot in good use :)
Each to his own though.
 

Offline cdev

  • Super Contributor
  • ***
  • !
  • Posts: 7350
  • Country: 00
Re: 'Simple' aka dumb HTML formatting question
« Reply #17 on: January 01, 2017, 12:55:31 am »
Chromium has its issues too. But its not totally proprietary like Chrome is.

It also has a similar group of developer tools.
« Last Edit: January 01, 2017, 12:57:38 am by cdev »
"What the large print giveth, the small print taketh away."
 


Share me

Digg  Facebook  SlashDot  Delicious  Technorati  Twitter  Google  Yahoo
Smf