Simple CSS i can't figure...

[jpolo9]

hello! I am new to CSS and have two problems atm,
http://norcaldesigns.sytes.net/norcal/norcal

in IE there are these annoying gaps between the image headers and the right borders inside the content div.
http://www.norcaldesigns.com/jesse/gap.gif


In Firefox the footer background aligns itself under the header for some reason, while the footer text is in the right place.

Any ideas? thanks,
-Jesse

[_Aerospace_Eng_]

the gaps are cause by the margins of the paragraph tags you are using. You can set them to 0px and that might fix the gaps, in the footer, add clear:both; to the CSS for it. That should fixe it in FF.

[jpolo9]

Ahh thank you!! fixed the footer problem perfectly! But for gap problem, i only use paragraph tags in the footer, and i have the margins set to 0 for the body and content, and there is still a gap for some reason. Thanks again,
-J

[_Aerospace_Eng_]

okay its the IE6 whitespace bug, you have to have your images butted up against ur tags, so for example, this
<div id="first">
<img src="template/images/theCompany.gif" width="485" height="18" border="0" alt="" />
<div class="borderLine">
NorCal Designs is a Web Development firm committed to solving problems with innovative
web-based applications. Our team specializes in web design, flash, hosting, and search
engine placement.<br /><br />

While the capacity for practical use of web-based solutions is limited only by imagination
our team continues to push the limits, providing answers for our clients that balance
aesthetic appeal and direct functionality.<br /><br />
</div>
should be this
<div id="first"><img src="template/images/theCompany.gif" width="485" height="18" border="0" alt="" /><div class="borderLine">
NorCal Designs is a Web Development firm committed to solving problems with innovative
web-based applications. Our team specializes in web design, flash, hosting, and search
engine placement.<br /><br />

While the capacity for practical use of web-based solutions is limited only by imagination
our team continues to push the limits, providing answers for our clients that balance
aesthetic appeal and direct functionality.<br /><br />
</div>

[jpolo9]

ARRGGHH im such an idiot. I figured this out months ago for someone else and meant to remember it :|

Doh! I thought for sure that would work but just tried it and no change :(

Stupid IE.

[_Aerospace_Eng_]

okay got it this time, add this to your images that have the gaps under them
style="display:block;"
so one of the images like this one
<img src="template/images/theCompany.gif" width="485" height="18" border="0" alt="" />
should look like this
<img src="template/images/theCompany.gif" width="485" height="18" border="0" alt="" style="display:block;" />
guess you could create a class for these images and put display:block; in their css

[jpolo9]

lol IEIEIEIEO IE. That worked great! for all of them except the one on the right :| Any more ideas? I can't figure it out, its exactly like the other one :S(IE is insane)

Also for some reason the header is moved to the right by 1px:
http://www.norcaldesigns.com/jesse/off.gif

though that might be a mistake in the flash file. Thanks again for all your help!
-Jesse

[_Aerospace_Eng_]

I say lose the borders on the images all together, then use css borders on the divs under them, and I also advise that you run your page through the validator, your better off using an html loose doctype, you have many tags and html that isn't even xhtml http://validator.w3.org/ you are going to need to add a meta content type tag for the validator to work.

[jpolo9]

argh and we were so close too. Stupid borders.

Not sure what you meant by, better off using an html loose doctype.

I tried the validator but it said "No Character Encoding Found", is that what i need the meta content tag for? What should i put for that?

[_Aerospace_Eng_]

o boy, so you dont even know what a doctype is? Why are you even trying to code in XHTML then? Add this in between your head tags, then try to validate your page
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
you can only use an id one time, and you can use classes more than once.

[jpolo9]

oh i knew what a doctype was just been using the same one over and over again (not sure why i was confused last night). Everything validates now except the embed tag for the flash movie, not sure how to get this to be compliant.

[_Aerospace_Eng_]

read this article (http://www.alistapart.com/articles/flashsatay/) its about how to make flash code standards compliant. My suggestion about the images still stand. I would go with text and CSS, for better Search Engine Optimization.

[jpolo9]

sweet thanks for the link, on a side note i got rid of the last remaining gap :)

Any idea why the header is moved over to the right?

thanks,
-J

[_Aerospace_Eng_]

You mean that one pixel shift? That seems like thats in the flash file.

[jpolo9]

Yea it was in the flash file, thanks again :) I started a new thread about another Ie problem if you got any ideas, http://www.codingforums.com/showthread.php?p=298669#post298669

The worst part is even when IE 7 comes out and it does support this it still won't be supported in IE 6 so can't use the png's any time soon :(

[]|V|[agnus]

That Flash satay method requires a stub movie to preload in IE. Seems like an annoying step for every Flash movie you have to embed.

I've used Hixie's method on a few sites with no hiccups:
http://ln.hixie.ch/?start=1081798064&count=1

Supposedly, Hixie's method has issues[1], but I've never had problems. For embedding simple movies, I'd think Hixie's method is ideal. Clean and simple.

Here's a JavaScript based approach:
http://blog.deconcept.com/2005/03/31/proper-flash-embedding-flashobject-best-practices/

[1] http://www.noscope.com/journal/2004/10/truly-w3c-valid-flash

[_Aerospace_Eng_]

If you wanted to preload it sure, but I see no hiccups using the flash satay method, you dont necessarily have to preload it.