3 replies [Last post]
rev_shabbazz
Offline
Regular
Last seen: 15 years 32 weeks ago
Joined: 2005-04-22
Posts: 23
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 22 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

--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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rev_shabbazz
Offline
Regular
Last seen: 15 years 32 weeks ago
Joined: 2005-04-22
Posts: 23
Points: 0

--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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 22 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

--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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.