Maddening IE issue @ DIVs

xSamhainx

Paws of Doom
Original Sin Donor
Joined
October 18, 2006
Messages
5,228
Location
San Diego, Ca
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? ='.'=
 

Attachments

  • problem1.jpg
    problem1.jpg
    80.5 KB · Views: 37
  • problem2.jpg
    problem2.jpg
    90.7 KB · Views: 36
Last edited:
Joined
Oct 18, 2006
Messages
5,228
Location
San Diego, Ca
IE is a VIRUS, had you forgotten that!! :)
 
Joined
Aug 31, 2006
Messages
12,806
Location
Australia
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.
 
I think it should follow the standards for such a simple things as a div ?? are you sure you correctly closed the div tag ??
 
Joined
Oct 25, 2006
Messages
6,292
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!
 
Joined
Oct 18, 2006
Messages
5,228
Location
San Diego, Ca
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.
 
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.)
 
Joined
Oct 19, 2006
Messages
8,540
Back
Top Bottom