Topic: Stumped

Hello,

I freely admit that my web development skills are a work in progress.  That said, I was hoping someone here could help me out with a problem I am having that involves the placement of a SWF.

If you go to my chuch's site on a PC you will notice the Flash masthead is offset to the right of the rest of the content (yet the static image below stays in place).  I have tinkered and toiled off and on for a few weeks and can't seem to get it fixed.  The fact that all I have access to are Macs does not help.

Any help is greatly appreciated.

You wanna get nuts?  Let's get nuts!

Re: Stumped

Hello Granata, not to worry our web development skills will always be a work in progress as we all continue to learn on a daily basis. Over time you will get better and better, just keep trying and don't hesistate to ask for help.

As for your problem. It seems that it is an Internet Explorer only problem, as it shows up perfectly fine in Firefox and Opera.

From looking at your code it could be a few things.

# padding: 0px 0px 10px 10px; - Not sure why you needed the last 10px padding in your flash-header since that is left-padding and would push it over a bit.
# You have the width of the flash-header set to 640px but the wrapper width for your content set to 600px.

Maybe try tinkering with those and see what happens.

By the way the site looks nice so far. Keep up the good work.

Exercise your faith!

Re: Stumped

try resetting the margin and padding on all elements within the flash-header div like so:

#flash-header * {margin: 0px; padding: 0px;}

and then remember IE's awful (yet logically correct) box model where the padding is contained within the width of an element, whereas in all other browsers, padding is _additional_ to width. If you don't want to remove the 10px padding on the left of the flash layer, add

padding: expression('0px');

right after the padding declaration in that of #flash-header. This will stop your code from validating, but a good browser will just ignore it.

If you want more help, do ask, and I will grab a copy of the site and do some work on it for you.

Josh Townson

Re: Stumped

Well, let me try my two cents.

Do you have a generic call to reset IE's margins? Looks like:

* { margin: 0; padding: 0; }

If you can set your image to fit in IE, but messes it up in other browsers, have two declarations in your CSS and hide one of them from IE like so:

html>body #flash-header {
}

That will be hidden from IE, and you can have another CSS markup:

#flash-header {
}

Make sure the one that can be seen by IE is called first, then the --html>body #flash-header-- after that.

Re: Stumped

Sweet action!  Thanks for all the help fellas.  I'm super excited about this site and what it means for the community.

I went with bfjosh's suggestion.  I can't tell if it worked or not (or even if I did it right for that matter) but the header still looks okay on my Mac.

If any of you get the chance to take a look at the site with IE on a PC, I'd appreciate knowing the results.

Thanks again!

You wanna get nuts?  Let's get nuts!

Re: Stumped

It still seems to be out of line on IE6 PC.

Exercise your faith!

Re: Stumped

Yannick is right, that solution didn't work. Here's one that does, not that its a correct solution (just a hack really).

#flash-header object {
    position: relative;
    left: expression('-30px');
}

Add that CSS declaration, and lo, the flash object moves 30 pixels to the left (where it should be). only works in IE, but breaks the validation. You could go:

* html #flash-header object {
    position: relative;
    left: -30px;
}

but I don't like doing that.

Also, as an aside, there are two body tags (one has onload code) - you should remove one of them! Sorry my first solution didn't work, but its largely trial and error. Good luck with the web development skills.

Josh

Josh Townson

Re: Stumped

Josh,

I added the declaration.  Thank you very much.  Now it won't be haunting me when I am trying to get other things done.  Thanks for pointing out the extra body tag.

-Eric

You wanna get nuts?  Let's get nuts!

Re: Stumped

That did the trick Granata. It works fine in IE 6 now.

In the Events section though, under Home Groups, your e-mail link just goes a tad bit over the edge of the layout. Might want to look into that one also.

Exercise your faith!