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:
-
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:
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.
-
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:
so why the hell must setting padding make an element bigger
Because it does? I believe padding is added to an element's base size not "pushed inward". That mysterious white gap is probably a border, margin or padding. Try this http://meyerweb.com/eric/tools/css/reset/[^] to start off with. If you don't want your element to grow by 40px then try setting padding-left or padding-right as needed. The real fun starts when you try to get png's working on older versions of IE. Or find that the design company that did your companies website used a 3rd party menu that doesn't support or have any plans to support safari or chrome and is buggy under firefox and opera (huh!?).
Todd Smith
modified on Thursday, September 18, 2008 3:41 PM
-
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.
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
-
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:
Put the divs in two rows in a table which has a cellspacing and cellpading of 0 (you can specify this in the
<table>tag) - that's what I do when positioning two divs, even if their position is set to static, as it tends to be more reliable :) Regards, --PerspxDon't trust a computer you can't throw out a window
-- Steve Wozniak
-
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 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.
-
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
I hate it all. I'm using straight tables for a lot of stuff, and even there is anyone's guess half the time. But, I have, at 23h20, completed the second revision of my draft site and will sleep happy.
-
Christian Graus wrote:
I think you mean that you hate CSS
I hate it all. I'm using straight tables for a lot of stuff, and even there is anyone's guess half the time. But, I have, at 23h20, completed the second revision of my draft site and will sleep happy.
You need beer. Lots and lots of it.
Deja View - the feeling that you've seen this post before.
-
You need beer. Lots and lots of it.
Deja View - the feeling that you've seen this post before.
Pete O'Hanlon wrote:
need beer. Lots and lots of it.
That'll be later this evening :)
"The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon "Not only do you continue to babble nonsense, you can't even correctly remember the nonsense you babbled just minutes ago." - Rob Graham
-
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
-
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!