Easy Spolier Plugin - Spoiler title

[JK]

Yes! The second suggestion worked out great! Thank you!!

Did you get a chance to read my note regarding browser compatibility? I am afraid this is vital to the project and must work for me to be able to use the plugin.

J

[doug@dyerware.com]

No worries. I have the fix.  Ill attach an update in a bit.

Nice overall effect btw.  Unique.   Good job

[JK]

Thank you!!

And thank you for the support -- I can´t say it enough

[doug@dyerware.com]

Ok for me this update works on your site in both firefox 6 and safari (mac tested only).

Let me know how it works.

[JK]

OK, downloaded but still works only on Safari in my mac (I have mac book pro, 10.5.7).

I have also tested in Adobe Browser lab and found both Firefox and IE breaking up the title.

[doug@dyerware.com]

Yeah.  The root cause is your DIVS add up to be wider than the page.  Its not really the plugin wrapping your divs around, its the layout of DIVS rule in the browsers.  I have been trying to accommodate it but this will work if you want:

The margin-right and margin-left CSS rules require 10 pixels each.  The DIVS are getting doubled up (10 on left,  220 in middle, and 10 on right for each one: 10 220 10 10 220 10 ...) and they end up combined to be too long to fit.  I don't think you meant to do that anyway.  I suspect you wanted and calculated for: 10 220 10 220 ...

Safari lets you stop this by paying attention to white-space, but firefox is a bit infamous for this very issue as it always wants to roll DIVS down to the next line if they did not fit. 

If you reduce the .grid_3 width attribute to 210 all is good in the universe.

i.e. your theme has this in its style.css:
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

and this:

.container_12 .grid_3 {
    width: 220px;   <== Can you make this 210 for me?  Commenting out margin-right above also works.
}


Or if you wish, just do this new rule just for us and use it for each of your divs.
.intro {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    width: 210px
}

title="<div class='intro'>ADDRESS</div>"


Is that feasible?

[JK]

That makes a lot of sense to me now.

I added your suggested:

.container_12 .grid_3 {
    width: 210px; 
}

and it works in Firefox, Safari and IE.

Thank You.
Really... thank you!

[doug@dyerware.com]

You are most welcome!  Good luck with your project.