I hate HTML
-
So, I have a heading div, and below it a text div. Between the two a mysterious white gap, that can't be traced to any attribute anywhere. In my innocent ignorance, I set specific widths for the two so their right edges align with the right edge of the page heading, and all is good, except the text in the text div is rudely touching the sides of the div, looking very untidy. So, I set a padding of 20px on the text div, and suddenly the mysterious white gap is gone, yay, but the freaking text div is 40px wider. I really misunderstand padding to mean that an elements content is pushed inward from its border. That is how I've read all the diagrams explaining this, so why the hell must setting padding make an element bigger? :mad:
-
Brady Kelly wrote:
why the hell must setting padding make an element bigger? Mad
I'd say it's because of this: Internet Explorer box model bug [Wikipedia][^]. But you say you haven't tried it on IE? That's weird...
It's very likely because I somewhere read about the IE box model, and remembered that as correct.
-
here's 3 lines that'll solve your initial problems: * { padding: 0px; margin: 0px; } any rules that come after this will override it, so put it at the top... you probably know by now, but padding is actually a shortcut for padding: ; so if you just put one number, it copies it to the rest of them.. i'm not sure what happens when you put 2 or 3 numbers. That's why 20px turned into 40px; DOWNLoAD and USE Firebug!!!!! It couldn't be simpler. and w3schools.com
-
So, I have a heading div, and below it a text div. Between the two a mysterious white gap, that can't be traced to any attribute anywhere. In my innocent ignorance, I set specific widths for the two so their right edges align with the right edge of the page heading, and all is good, except the text in the text div is rudely touching the sides of the div, looking very untidy. So, I set a padding of 20px on the text div, and suddenly the mysterious white gap is gone, yay, but the freaking text div is 40px wider. I really misunderstand padding to mean that an elements content is pushed inward from its border. That is how I've read all the diagrams explaining this, so why the hell must setting padding make an element bigger? :mad:
I wonder if the people who wrote the spec for css, really knew how complicated it all sounds, i find it easier to program in c than to script in html, with css, with javascript, for separate browsers, So now if I "FEEL" like making web pages......I keep it simple I only check for IE and Firefox, with nothing to fancy in the web page. If you need to ask I use an editor for html, css and javascript. Then throw in a HUGE company that likes to break the box with there browser, and wham mo!, please download the latest web browser to remove this annoying message, Did that and the site still complains, I really should get a new email address but hey, HOTMAIL's free. Ive just taken my bed before pill's, If it make sense ..... I must be asleep!
-
So, I have a heading div, and below it a text div. Between the two a mysterious white gap, that can't be traced to any attribute anywhere. In my innocent ignorance, I set specific widths for the two so their right edges align with the right edge of the page heading, and all is good, except the text in the text div is rudely touching the sides of the div, looking very untidy. So, I set a padding of 20px on the text div, and suddenly the mysterious white gap is gone, yay, but the freaking text div is 40px wider. I really misunderstand padding to mean that an elements content is pushed inward from its border. That is how I've read all the diagrams explaining this, so why the hell must setting padding make an element bigger? :mad:
-
Try using something like Blueprint CSS[^], it's a CSS framework and I've found it makes life a hell of a lot easier, especially using the grid test as you can quite clearly see how everything lines up. Paul.
Thanks, I'll check it out on the weekend.
-
So, I have a heading div, and below it a text div. Between the two a mysterious white gap, that can't be traced to any attribute anywhere. In my innocent ignorance, I set specific widths for the two so their right edges align with the right edge of the page heading, and all is good, except the text in the text div is rudely touching the sides of the div, looking very untidy. So, I set a padding of 20px on the text div, and suddenly the mysterious white gap is gone, yay, but the freaking text div is 40px wider. I really misunderstand padding to mean that an elements content is pushed inward from its border. That is how I've read all the diagrams explaining this, so why the hell must setting padding make an element bigger? :mad:
There's got to be a better way. Most of us have spent hours trying to get HTML elements to position correctly. One of the things I hate about HTML is that it's non-hierarchical: It forces you to do everything in one long HTML "function", like a beginning programmer. For a long web page, it's a mess, and it makes finding the elements that generate particular output difficult. I'd like to propose HHTML: Hierarchical HTML. This is HTML with macros/functions that act like markup subroutines. The advantages: 1. A outline of the WHOLE PAGE could fit on one screen, e.g. a table with each element an HTML "function". 2. An HTML "function" can be called from multiple places, eliminating the need for duplicating the same HTML over and over and over. 3. HTML "functions" will facilitate reuse, in effect giving you bigger building blocks to construct your web page. 4. Parameters on HTML "functions" would give even more flexibility, and more reusability. HHTML could be implemented as a preprocessor that expands it to plain vanilla HTML, sort of like how a compiler translates source code to object code. You heard it here first! Alan
-
There's got to be a better way. Most of us have spent hours trying to get HTML elements to position correctly. One of the things I hate about HTML is that it's non-hierarchical: It forces you to do everything in one long HTML "function", like a beginning programmer. For a long web page, it's a mess, and it makes finding the elements that generate particular output difficult. I'd like to propose HHTML: Hierarchical HTML. This is HTML with macros/functions that act like markup subroutines. The advantages: 1. A outline of the WHOLE PAGE could fit on one screen, e.g. a table with each element an HTML "function". 2. An HTML "function" can be called from multiple places, eliminating the need for duplicating the same HTML over and over and over. 3. HTML "functions" will facilitate reuse, in effect giving you bigger building blocks to construct your web page. 4. Parameters on HTML "functions" would give even more flexibility, and more reusability. HHTML could be implemented as a preprocessor that expands it to plain vanilla HTML, sort of like how a compiler translates source code to object code. You heard it here first! Alan
Alan Balkany wrote:
HHTML could be implemented as a preprocessor that expands it to plain vanilla HTML
Isn't that what ColdFusion, PHP, ASP.NET etc. do, or do you mean 100% client side?
-
Alan Balkany wrote:
HHTML could be implemented as a preprocessor that expands it to plain vanilla HTML
Isn't that what ColdFusion, PHP, ASP.NET etc. do, or do you mean 100% client side?
I don't know ColdFusion, but the others are programming languages which introduce a lot more complexity. I was thinking of a solution that makes HTML easier while minimizing the added complexity. Some people who write HTML can't program, so couldn't use ASP.NET or PHP.
-
I don't know ColdFusion, but the others are programming languages which introduce a lot more complexity. I was thinking of a solution that makes HTML easier while minimizing the added complexity. Some people who write HTML can't program, so couldn't use ASP.NET or PHP.
I don't much at all of know CF either, but I do know that it provides enhanced tags, which it expands into standard HTML server side.
-
Brady Kelly wrote:
why the hell must setting padding make an element bigger? Mad
I'd say it's because of this: Internet Explorer box model bug [Wikipedia][^]. But you say you haven't tried it on IE? That's weird...
The box model bug as stated on that page does not affect IE 6 and later if you use the correct DOCTYPE. I was going to say 'it amazes me that such bad information continues to circulate seven years after it was fixed', but given most web developers' attitude to Microsoft software...
"Multithreading is just one damn thing after, before, or simultaneous with another." - Andrei Alexandrescu
-
So, I have a heading div, and below it a text div. Between the two a mysterious white gap, that can't be traced to any attribute anywhere. In my innocent ignorance, I set specific widths for the two so their right edges align with the right edge of the page heading, and all is good, except the text in the text div is rudely touching the sides of the div, looking very untidy. So, I set a padding of 20px on the text div, and suddenly the mysterious white gap is gone, yay, but the freaking text div is 40px wider. I really misunderstand padding to mean that an elements content is pushed inward from its border. That is how I've read all the diagrams explaining this, so why the hell must setting padding make an element bigger? :mad:
Sheyah Dude! Cross browser support is the biggest headache any web programmer has. Try doing a simple two-column, 100% width, 100% height layout using just CSS and divs. After you've spent your day getting that to work cross-browser, then throw in some ASP.Net UpdatePanels and WebPartZones and see how quickly it goes ito the surreal!
-
So, I have a heading div, and below it a text div. Between the two a mysterious white gap, that can't be traced to any attribute anywhere. In my innocent ignorance, I set specific widths for the two so their right edges align with the right edge of the page heading, and all is good, except the text in the text div is rudely touching the sides of the div, looking very untidy. So, I set a padding of 20px on the text div, and suddenly the mysterious white gap is gone, yay, but the freaking text div is 40px wider. I really misunderstand padding to mean that an elements content is pushed inward from its border. That is how I've read all the diagrams explaining this, so why the hell must setting padding make an element bigger? :mad:
-
here's 3 lines that'll solve your initial problems: * { padding: 0px; margin: 0px; } any rules that come after this will override it, so put it at the top... you probably know by now, but padding is actually a shortcut for padding: ; so if you just put one number, it copies it to the rest of them.. i'm not sure what happens when you put 2 or 3 numbers. That's why 20px turned into 40px; DOWNLoAD and USE Firebug!!!!! It couldn't be simpler. and w3schools.com
I second that. CSS is not easy and the cross-browser thing is the biggest pain in the neck ever, but Firebug beats them all. CSSBlueprint also has some well-thought-out styles in it which will help normalise your site and remove some inconsistencies. But nothing can compare to Firebug. The fact of being able to see which styles are overriding which has done wonders for my understanding of how the whole thing fits together. I'm now pretty comfortable with creating totally CSS-based layouts, and my client code looks a lot prettier. I've managed to remove a lot of clutter and it pleases me. Use a combination of firebug, cssblueprint, and jquery, and you can get some very impressive stuff done without having to stay up all night doing battle with the browser. I still wish somebody would outlaw IE though. Maybe Chrome will beat both Firefox and IE into a cocked hat and we can all spend less time dealing with bugs and more time creating web apps, with less pain all round. I don;t care how good the browser is that wins. I just want there to be ONE, that supports THE STANDARDS. I mean, how hard can it be? it is totally shocking that IE is still not compliant. With all the money that's been poured into it over the years. Joel Spolsky wrote a good post there a while ago that went some way to explaining the continuing inconsistencies, but I still think it's unacceptable. it just doesn't seem to be a priority for Microsoft.
Smokie, this is not 'Nam. This is bowling. There are rules. www.geticeberg.com
-
And now imagine trying to create a page which caters for all the different browsers out there, each doing their own "thing" when encountering the same markup... and then somebody tells you tables are bad for layout so you endeavour to use CSS only to find yourself up at 3:30 in the morning wondering why your page isn't displaying correctly. The whole field of web layout is crap to the max. An exercise in frustration, annoyance and eventually defeat. I'm surprised anyone has the patience to do anything non-trivial on the web - I'd prefer to stick needles in my legs. A few months ago, when I was interested enough, I'm sure I found a better way to do layout on the web. It ditched the idea of CSS positioning, and instead used javascript to perform all the layout. Or maybe I just dreamt it after a prolonged nightmare of forever struggling to get seemingly simple layouts just to bloody well work.
martin_hughes wrote:
... and then somebody tells you tables are bad for layout so you endeavour to use CSS..
The impact of this statement is easily lost in the cross-eyed simplicity of it. "Tables are bad for layout". The simple 2D grid, the absolute lynchpin of 2D design, was so badly handled (and this was persisted in a large enough way) that we can't use it. That probably infuriates more people daily than Chris Eubank ever managed to irk in his whole life so far. But here's my current "favourite" programming turd : In Java, when you substring() or otherwise index a range, you pass 2 integer args. The first is a zero-based index, the second isn't. Nor is it the length of the range you want, no, it's a 1-based index. Once again, the true impact of this is hard to convey without actually punching anyone. Can we extend this kind of mentality to other professions, please? Let's have farmers ploughing fields with chopsticks made from frozen urine, for example.
I'm peculiar to myself, therefore I am.