'Simple' aka dumb HTML formatting question - Page 1
Forum section: electronics / general

author: TerraHertz
author_rank: Super Contributor
timestamp: December 30, 2016, 02:32:26 am
content: 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.

author: tautech
author_rank: Super Contributor
timestamp: December 30, 2016, 02:41:37 am
content: Looks OK to me in Chrome, Version 55.0.2883.87 m (latest)See attachment.

author: TerraHertz
author_rank: Super Contributor
timestamp: December 30, 2016, 02:47:16 am
content: Quote from: tautech on December 30, 2016, 02:41:37 amThanks, 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:.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?

author: tautech
author_rank: Super Contributor
timestamp: December 30, 2016, 03:06:07 am
content: I'm out, way outside my abilities.But had a good chat with a couple of members the other day and this sort of thing came up in conversation, thinkapellymight have the answers.https://www.eevblog.com/forum/chat/auckland-beer-and-flux-xmas-get-together/

author: TerraHertz
author_rank: Super Contributor
timestamp: December 30, 2016, 04:00:26 am
content: 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.

author: TiN
author_rank: Super Contributor
timestamp: December 30, 2016, 04:14:04 am
content: AddCode: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.

author: sleemanj
author_rank: Super Contributor
timestamp: December 30, 2016, 04:22:40 am
content: 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/

author: TerraHertz
author_rank: Super Contributor
timestamp: December 30, 2016, 04:34:22 am
content: Quote from: TiN on December 30, 2016, 04:14:04 amAh ha! Thanks.Code:.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.QuoteSometimes 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.

author: TiN
author_rank: Super Contributor
timestamp: December 30, 2016, 04:42:07 am
content: QuoteGood luck on thatProgrammer stuff like to break even between two versions of same browser...That's why I always have three-four browsers on my PCs (FF, new Opera, old Opera, Chrome) as they all show different stuff.

author: TerraHertz
author_rank: Super Contributor
timestamp: December 30, 2016, 04:55:12 am
content: Quote from: sleemanj on December 30, 2016, 04:22:40 amVery 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 from: TiN on December 30, 2016, 04:42:07 amTell 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.QuoteYeah. 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.

author: cdev
author_rank: Super Contributor
timestamp: December 30, 2016, 05:18:25 am
content: 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.

author: SeanB
author_rank: Super Contributor
timestamp: December 30, 2016, 07:08:30 pm
content: 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.

author: alexanderbrevig
author_rank: Frequent Contributor
timestamp: December 30, 2016, 07:27:27 pm
content: Lave browser conformity to the big guys. Find a proven framework that suits your needs and do layout with that.Zero, skeleton, bootstrap etc

author: cdev
author_rank: Super Contributor
timestamp: December 30, 2016, 07:36:20 pm
content: 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.

author: TerraHertz
author_rank: Super Contributor
timestamp: December 31, 2016, 01:55:22 am
content: Quote from: cdev on December 30, 2016, 07:36:20 pmHmm, looks pretty, but..https://developer.mozilla.org/en/docs/Tools/3D_ViewFrom 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, 2011Works with Firefox 6.0 - 21.*Downloaded --> tilt_3d-1.0.1-fx.xpi 456KBI'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.Quote from: alexanderbrevig on December 30, 2016, 07:27:27 pmUh... 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.Quote from: SeanB on December 30, 2016, 07:08:30 pmHuh, 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?

author: cdev
author_rank: Super Contributor
timestamp: December 31, 2016, 04:41:19 am
content: 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.

author: alexanderbrevig
author_rank: Frequent Contributor
timestamp: January 01, 2017, 12:18:12 am
content: 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 useEach to his own though.

author: cdev
author_rank: Super Contributor
timestamp: January 01, 2017, 12:55:31 am
content: Chromium has its issues too. But its nottotallyproprietary like Chrome is.It also has a similar group of developer tools.