http://www.shakedownstreet.com/testing/index.php
Looks great in Firefox.
In IE, the Flash object is pushed half-way down the page -- below the Secondary div object.
I've tried tinkering with everything I can think of and, thus far nothing has worked -- margins, padding, display, clear, float.
I'm (hopefully) sure that it's a quick easy fix.
Anyone lend a hand? These IE\Firefox gap issues are killing me!!
(BTW -- I pulled most of the CSS into a seperate file and left the CSS which relates to the problem in the main file. The remaining css can be found here if needed :: http://www.shakedownstreet.com/testing/shakedown.css
--NEVERMIND-- Removed the trouble spot...
You've likely fallen victim to IE's 3 pixel jog bug. Your exact fit doesn't take into account that IE thinks there should be a phantom 3px extra margin on the content side. Give (in IE-Win only) a -3px margin to the float element.
/* hide from IE-Mac \*/ * html #secondary { margin-right: -3px; } /* */
To counter the doubled margin bug, simply do {display: inline;}.
Also, there rarely any reason to cascade ids.
#main #content #flash {margin: 0; padding: 0;} is redundant. #flash is #flash no matter who its daddy is.
You should validate your code. Fix the comments. UAs are forgiving, but in the future, the xml in xhtml will barf on them.
<embed> is not a part of html. See ALA article for getting right with the gods of html.
cheers,
gary
--NEVERMIND-- Removed the trouble spot...
KK, thanks for your reply and the info on the Embed tag.
I pulled the <embed> tag out as described in the article. I fixed my comments, pulled redundant css names and validated against the validator.
Current problems ::
1) The validator keeps throwing an error about my form -- specifically, my inputs
The code ::
<form id="search" action="#">
<input type="text" name="search_text" id="search_text" value="Search Shakedown" />
<input type="submit" name="GO" id="submit" value="GO" />
</form>
The validator error ::
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
2) The Flash file is in place, but I still have gaps in both IE and Firefox. IE gives me a ~3px gap to the left and FireFox gives me a ~3px gap at the bottom.
Any ideas on these? (NOTE -- Display inline on the flash object didn't work at all)
Again -- thanks everyone for all your input thus far. It has certainly been a major help in my development!
I am soooo close to being off and running, but these gaps keep getting in my way!
--NEVERMIND-- Removed the trouble spot...
Put the hack on the float element;
/* \*/ * html #secondary { margin-right: -3px; } /* */Add that *exactly* to the stylesheet after the #secondary styles.
Remove '_margin-left:15px;' from #secondary and replace with 'display: inline;'
None of that belongs on #flash.
cheers,
gary