IE Style Troubleshooting

Ok, I am working on a new platform - SocialGO - to implement design elements to mirror another site. I’ve gotten most of the way there - but there is a gap between the page elements on IE only. YOu can see it here - just above the gold bar in the footer:

Click in IE to see problem - displays properly EVERYwhere else…/

I have fiddled with Firebug until I am blue in the face on this one - any ideas from any IE experts??:confused:

Warm regards - and thanks to any suggestions!

Best, Kari

Ray - adding the ID for the style “do-nothing-form” removed the gap in IE. But - how did you find it? I NEVER saw the ID on Firebug at all - but then again, I do not know of a good tool to use in IE. What did you use or how did you find it? IT also could be my looking at it for the last few weeks.

Glad to know it’s confusing to someone better skilled at CSS than I am. I am pretty handy with designing websites on hosted app platforms - but this one was a booger - the styles and divs were COLOSSAL and NESTED beyond anything I’d seen before. I really had to pick things apart with this one - glad to know it’s not just me. CERTAINLY that frame page was NOT mine - it was a part of the SocialGo app markup I think - it’s not something I would have access to or know where/how to access. Which was same for most of the markup - but we did have full control over the CSS - which is great - and your fix worked!

Thank you so much for your support,


But - how did you find it? I NEVER saw the ID on Firebug at all - but then again, I do not know of a good tool to use in IE. What did you use or how did you find it?
I was not able to use Firebug since the gap did not happen in FF. As Ryan said most of IE Dev tools are not much help either so I don’t use them for live edits.

Here is what I do when I need to make a live edit for IE only and I don’t have a clue where to look for the problem. Well it’s not really a live edit but it’s the easiest way I have found.

What I do is select “Save Page As” in FF, then select “Webpage,complete” in the save as type options. FF will make a root folder for the page and save all the related files with it. It changes up the file paths in the HTML to match the new root folder it created but as long as you are aware of that then you have something you can open in IE. From there you are able to make edits in your text editor just as if you were building the page.

After doing that I just started cutting out sections of code in the HTML that were near the problem area. I knew it was close to the footer so that is where I was looking.

Doing all that is usually my last resort but as you see it can be effective for troubleshooting IE. :wink:

If no styles are set on an ID then nothing will appear on the CSS portion of firebug. However Ray was probably just looking for an element where he could use as a fix, and since the form already had an ID it would be as simple as you adding a line in your CSS file

I personally don’t use IE debugger tools (they are too hard / weird to understand for me) so I just use firebug and if I see something quirky I test out my guess and I find it quite effective :slight_smile:

Hi Kari,

The problem is the form on line 567 of the frame page you are linking to.

I don’t know if that is your page, if not you probably won’t have any control over it. I never have messed around with frames very much, but I don’t think you can style anything on the page.

That form on line 567 has an ID of #do-nothing-form on it.
If it is your page you can set position:absolute; on that ID to remove it from the page flow.
Testing with inline styles as shown below it got rid of the gap in IE.

<form [COLOR=Red]id="do-nothing-form"[/COLOR][B] style="position:absolute"[/B]>
<input type="hidden" id="userid" value="-1" />
<input type="hidden" id="static-media-server" value="" />

It is a very confusing page in general.
Best of luck with it :wink: