IE7 and <object>

@FerretMar 07.2008

~~[url]~~http://www.josiahkiehl.com/drexel/Great%20Works%20Symposia/symposia/index.html[/url]

I need help making this particular page work the same in Fx and IE7. Any thoughts? I’m not the most experienced coder, so any tips would be most appreciated. ?

The issue I’m most concerned with is the [Archives] link in the top right corner of the page. The <object> tag displays massively different in IE7, and I don’t know how to get it to work like it does in Fx.

Thanks so much for your time. I’m supposed to have this done by Monday, and will be working on it over the weekend.

There are other less pressing issues, like if you notice I hashed a display:none for the tacks that appear in Fx so IE7 wouldn’t display them… they don’t work so well.

Also along the left, the borders of the divs don’t line up properly, and the header image is out of alignment with the background and the dragon logo.

My plan of action is always to design for Fx first, then for IE, but this time IE is being a much bigger hassle than usual.

to post a comment

HTML

7 Comments(s) _↴

@WebJoelMar 08.2008 — #A quick inspection of your CSS reveals some interesting oddities:.tackBottom{display: table-row; [B]margin-top: -40px;[/B] [COLOR=Red]#display[/COLOR]: none; }[/quote] -A 'negative margin' can be a tricky thing for IE. It might work, but for 'positioning', it is dunsel and kluge. It would be better to either let the layout 'flow' naturally, or to "position it" with position selector ( position:relative; or position:absolute; ).

Also, the use of "#" above and below, in declaration, in not correct.
#poster1{position:absolute; top: 30%;[B] [COLOR=Red]#top:40%;[/COLOR] [/B]left:20%; z-index:11;}

#poster2{position:absolute;top: 20%;[B] [COLOR=Red]#top: 30%;[/COLOR] [/B]left:40%; z-index:9;}

#poster3{position:absolute;top: 40%;[B] [COLOR=Red]#top: 50%;[/COLOR][/B] left:60%; z-index:10;}[/quote]

@FerretauthorMar 09.2008 — #Those # are IE hacks... firefox skips those lines, IE reads them as normal. I used those just to get some semblance of acceptability in IE7 while I searched for a more permanent fix.

I will adjust the margin to position: relative. Looking at the code, I'm not sure why I did it that way to begin with. Thanks for pointing that out.

@WebJoelMar 09.2008 — #I've been reading some interesting articles about the use of 'negative margins'. -Apparently, "margin" is one of the few Selectors that can take a 'negative' declaration:value. What it does though, is 'pull the element below it, up over itself'.

I've seen some IE pages that seemed to do this to the detriment of the page's intended layout and have been decrying the method as 'weak', but I've been shown that it works, and can have a positive effect. I still have my doubt however about a, for instance, "margin-bottom:-600px;" having an place on a web page...Those # are IE hacks... firefox skips those lines, IE reads them as normal...[/QUOTE] Kewl. I don't 'do hacks' myself. Well, very few.

-Can you shown me a tute on where this is taught, what it does, etc? It's such an uncommon 'hack' I'd like to know what it does.

@FerretauthorMar 09.2008 — #I still have my doubt however about a, for instance, "margin-bottom:-600px;" having an place on a web page... Kewl. I don't 'do hacks' myself. Well, very few. [/QUOTE]

I'm not entirely sure what the difference between saying: margin-top: -40px; and position: relative; top: -40px; is.

-Can you shown me a tute on where this is taught, what it does, etc? It's such an uncommon 'hack' I'd like to know what it does.[/QUOTE]

I picked the trick up from a tutorial about making vertical centering work in IE6: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.

The hack continues to work in IE7.

@WebJoelMar 10.2008 — #I'm not entirely sure what the difference between saying: margin-top: -40px; and position: relative; top: -40px; is...[/quote]
"position:relative;" changes the [I]visual[/I] offset only: a negative margin "pulls the element below it, [U]up over itself[/U] by this amount" and does so in a manner more consistant with absolute-positioning in conjunction with a z-index:+1....

And because a "margin" is not a "[I]position[/I]", it is like an '[I]external padding[/I]', if you will. But oddly enough, [I]this seems to work[/I] and seems to be valid. ? I'm still a bit taken with this anomolus unfamiliar behaviour.

It at [I]first take[/I] seems to be like trying to say:

border:[B][SIZE=4][COLOR=Red]-[/COLOR][/SIZE][/B]10px solid black; and expecting the "10px wide border" to appear "[I][U]inside of the container, ten pixels wide[/U][/I]", more like a "padding" would... "Borders" by their very nature, exist "outside" of an element and seemingly should not accept a "negative" value...

That I have seen what appears (or appeared??) to have been a problem involving IE and the use of "[I]negative[/I] margins" seems to have borne this out for me, but from what I've been reading in recent days, [I]no[/I], not so. Therefore, the problem (with the layout I was testing) came not from the use of negative-margins, but from something other...

@FerretauthorMar 10.2008 — #Margin is supposed to be external padding? I always used it like I was saying "grab the margin and drag it x number of px." I [I]think[/I] the difference is in how it affects a container div. ie: position: relative; top: 10px moves the element irrespective of containing divs. margin-top: 10px makes the container div stretch to fit the new position of the element.

@WebJoelMar 11.2008 — #Since I don't use negative margins, I am not sure of this. If 'grabbing an element by the margin and dragging it' is something needed, "positon:absolute;" works for me. Having an element 'grab-able' by some invisible 'fatness' outside of it's visual parameters seems counter-intuitive for me. It's like, "click within 20px of the "X" to close this window"... I should think that this could become untenable in a graphics-or-anchor-rich environment whereby there are many 'clickables', like, a photo-gallery of thumbnails, etc....

Take for instance, the "Smilies" to the right of this text-box... if positioned with "negative margins", clicking ":p" ("stick out tongue")

might trip ":o" ("embarassment") instead...

Also in #HTML _↴

div blows right through other div Start of <body>Drop down box with number value

Success!

Help @Ferret spread the word by sharing this article on Twitter...

Tweet This

IE7 and <object>

7 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

IE7 and <object>

7 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #HTML _↴