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:
Last time I made a website I just used flash. Then all I needed was a handy peice of HTML to put the flash in the middle of the screen. It was one awsome peice of flash too. I still can not beleive I lost it :sigh: :((
My current favourite word is: Nipple!
-SK Genius
-
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:
That's why I drink to excess, so all the pages I design are blurry to the point that everything looks good.. I call it iGoggles. Just put a disclaimer on your page, "best viewed while intoxicated or blind". :-)
- S 50 cups of coffee and you know it's on! A post a day, keeps the white coats away!
-
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:
Get Firefox and Firebug and open your site in Firefox, then hit F12 and go to the layout on the right of firefox. It will show you what your layout is made up of. When I was learning CSS I messed about with simple pages for a while to see the effect of different CSS on layout. A quick search for something like "CSS layout" should give you about 50 million web pages to read with your beer.
-
Phew! You just gave me a heart attack. My client uses IE, and I hadn't even checked this on IE yet. :~ Luckily it all seems OK - it's very simple with bog standard ASP.NET server controls. :-D
Brady Kelly wrote:
My client uses IE, and I hadn't even checked this on IE yet
That will be playing with fire. Just as these developpers developping with admin rights and realizing two days before release that the clients do not have admin rights on their machine...
-
Brady Kelly wrote:
My client uses IE, and I hadn't even checked this on IE yet
That will be playing with fire. Just as these developpers developping with admin rights and realizing two days before release that the clients do not have admin rights on their machine...
Fortunately, just this once, I can tell them to use Firefox, then they'll be happy long enough for me to fix it for IE. ;P
-
I think you mean that you hate CSS. Who doesn't ? What a nightmare that stuff is.
Christian Graus No longer a Microsoft MVP, but still happy to answer your questions.
Christian Graus wrote:
I think you mean that you hate CSS. Who doesn't ? What a nightmare that stuff is.
I have to agree.. I've spent many a wasted hour using CSS trying to get the correct line-up on an HTML element... :sigh:
Billy. MCPD Windows Developer "Duct tape is like the force, it has a light side, a dark side and it holds the universe together!" - Anonymous my holding page..more coming soon!
-
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