|
Your donations keep RPGWatch running!
Maddening IE issue @ DIVs
April 14th, 2009, 07:37
I'm taking a web development course, and I keep noticing a problem when testing my work in Internet Explorer. Quite frankly, I'm ready to tear my fur out over this one, it just keeps happening to my pages.
I put a <div> on a page, then I put either
A. a header inside or
B. an image inside
Firefox is fine. IE7, however, puts like some 15px or so of space between the top of the div and the image or header. It throws everything off. It's making me crazy.
Now Ive zeroed out every concievable margin and padding on header, image, in the div, etx. It's not in <p> tags, no <h>, there is no <br> or anything. Nothing is containing the image or is inbetween the image and the top of the div. Ive made the image display: block. Ive done border:none, line-height:none (things suggested online which didnt seem relevant but what the hell).
No results, I get a big chunk of space between the top of my div and the content. This even happens w/ the pre-made html templates in DW, I fired one of them up and displayed it and my jaw dropped. Is nobody else having this problem? I'm at my wit's end w/ this. I get a page working fine, all except for this, time and time again.
Please look at the examples, and tell me any solution that you know of, like I said - Ive zeroed EVERYTHING relating to the div as far as padding/margin and that "launch pad" image inside the div.
the first one is the page as displayed in firefox - the "launch pad" image, white jpg w/ black lettering, displayed correctly at the top of the div. Just like it should be.
The second one is the problem child in IE - w/ space inbetween top of the div and the image. Help?? Workaround?? Please? ='.'=
I put a <div> on a page, then I put either
A. a header inside or
B. an image inside
Firefox is fine. IE7, however, puts like some 15px or so of space between the top of the div and the image or header. It throws everything off. It's making me crazy.
Now Ive zeroed out every concievable margin and padding on header, image, in the div, etx. It's not in <p> tags, no <h>, there is no <br> or anything. Nothing is containing the image or is inbetween the image and the top of the div. Ive made the image display: block. Ive done border:none, line-height:none (things suggested online which didnt seem relevant but what the hell).
No results, I get a big chunk of space between the top of my div and the content. This even happens w/ the pre-made html templates in DW, I fired one of them up and displayed it and my jaw dropped. Is nobody else having this problem? I'm at my wit's end w/ this. I get a page working fine, all except for this, time and time again.
Please look at the examples, and tell me any solution that you know of, like I said - Ive zeroed EVERYTHING relating to the div as far as padding/margin and that "launch pad" image inside the div.
the first one is the page as displayed in firefox - the "launch pad" image, white jpg w/ black lettering, displayed correctly at the top of the div. Just like it should be.
The second one is the problem child in IE - w/ space inbetween top of the div and the image. Help?? Workaround?? Please? ='.'=
Last edited by xSamhainx; April 14th, 2009 at 07:49.
April 14th, 2009, 08:48
IE is a VIRUS, had you forgotten that!!
--
If God said it, then that settles it!!
Editor@RPGWatch
If God said it, then that settles it!!
Editor@RPGWatch
April 14th, 2009, 09:14
IE7 and before does not follow standards, and you often have to put in code written specifically for IE for things like this. That code does not necessarily work for other browsers, so you may have to test for the browser used.
My advice would be to first of all write standard code and test it with Firefox or Opera, and then if you have the time put in code necessary for IE.
IE8 is supposed to be more compatible with standards.
My advice would be to first of all write standard code and test it with Firefox or Opera, and then if you have the time put in code necessary for IE.
IE8 is supposed to be more compatible with standards.
Guest
April 14th, 2009, 11:57
I think it should follow the standards for such a simple things as a div ?? are you sure you correctly closed the div tag ??
April 14th, 2009, 17:13
I found out the problem, and it's kinda funny because it's one of the rare instances that I use the dreamweaver pre-config thing and it messes up. Basically, I used the dreamweaver "2 columns fixed layout" thing, and it throws the whole thing together, you fill in the blanks w/ your content and style the whole thing appropriately. I dont like doing that, I like coding it from the ground up usually, but I was last-minute w/ this assignment (damn spellforce!) and just used it.
Here's what happened - IE read and displayed the /*commenting*/ that DW has filled in by default for padding options and stuff down at the bottom of the css. No kidding! I deleted it, and it went away. That's why even my attempt to use the global reset "*{padding0, margin0}" type thing didnt work, the commenting was at the very bottom of the css thus took precedence.
So it basically was adding 30px of padding on my sidebar, not to mention about 3 other random things to other areas of my page. Come on, who'd have thought that commenting would display, the whole purpose of commenting is making it unreadable to the browser. GRR!
Here's what happened - IE read and displayed the /*commenting*/ that DW has filled in by default for padding options and stuff down at the bottom of the css. No kidding! I deleted it, and it went away. That's why even my attempt to use the global reset "*{padding0, margin0}" type thing didnt work, the commenting was at the very bottom of the css thus took precedence.
So it basically was adding 30px of padding on my sidebar, not to mention about 3 other random things to other areas of my page. Come on, who'd have thought that commenting would display, the whole purpose of commenting is making it unreadable to the browser. GRR!
April 29th, 2009, 09:12
Regarding compliance with standards. There are test sites, where you can see how your browser complieds with web standards. One of them is Acid2, which among other things tests postitioning, behaviour in boxes and such. Wikipedia has an article about it today (april 29th), here's the link: http://en.wikipedia.org/wiki/Acid2.
And here's the link to the test site: http://acid2.acidtests.org/
Of the browsers I have installed (all on windows):
- IE 7: horrible
- Firefox 3.10: fairly good, but minor errors
- Safari don't-remeber-version: Perfect
- IE 8: Perfect
I'll power up my SuSE Linux machine later today to see how the browsers there fit.
And here's the link to the test site: http://acid2.acidtests.org/
Of the browsers I have installed (all on windows):
- IE 7: horrible
- Firefox 3.10: fairly good, but minor errors
- Safari don't-remeber-version: Perfect
- IE 8: Perfect
I'll power up my SuSE Linux machine later today to see how the browsers there fit.
Guest
May 8th, 2009, 11:02
There's a newer and more stringent one too: http://acid3.acidtests.org/ .
If you think things are tricky now, you have no IDEA how they were around 2000-2001.
(Seriously, IE7 isn't all that bad to develop for; the biggest problem with it for rich web interfaces is that the rendering engine is on the slow side. The biggest handicap is that the dev tools aren't as good -- there's nothing nearly as good as Firebug and Web Developer Toolbar for it, which makes debugging much more annoying.)
If you think things are tricky now, you have no IDEA how they were around 2000-2001.

(Seriously, IE7 isn't all that bad to develop for; the biggest problem with it for rich web interfaces is that the rendering engine is on the slow side. The biggest handicap is that the dev tools aren't as good -- there's nothing nearly as good as Firebug and Web Developer Toolbar for it, which makes debugging much more annoying.)
RPGCodex' Little BRO
|
|
All times are GMT +2. The time now is 10:09.

