CSS help

[Bandit]

Hi,

Apologies if I've posted this in the wrong forum but I thought people reading this would know more about css than in the General forum...

Not sure whether anything can be done to sort this problem out but I have a problem with the Bulletproof template & different rendering between IE & FF. I stress this isn't the fault of the template but some third party code that gets imported in via a javascript.

Let me explain. If you have a look at www.nigelbooker.com in FF all is well and the signup sidebar done with an html nugget looks fine. But in IE the text input boxes look right justified (in fact they are centered). The form code gets inserted in from Aweber.com so I have no control over that code. The problem is that their code is circled by a center /center tag which makes the form render completely differently between IE & FF.

Any ideas how this can be sorted?

I do note that the Syndicate & Archive sidebar components are left justified in FF & centered in IE... Is that right?

Thanks.

[Niclas]

Hmm....the cause could be different CSS tags for IE and FF.
Both browsers understand most of CSS but in certain cases you have to enter additional tags extra for IE.

There could be problems with inheriting the centre alignment or with a "justify" for alignment.
IE and FF interpret this different.
In some cases "display:inline" can be helpful.

[sonichouse]

You can try removing the following

Code: Select all

.serendipitySideBarContent INPUT {WIDTH: 95%;}
.serendipitySideBarContent SELECT {WIDTH: 95%;}

Not sure what else this might affect, but worth a try.

[garvinhicking]

Hi!

Definitely there's a problem because IE interprets the center and div and table tags differenty that come from your javascript.

You can bypass the javascript alltogether, though.

simply put this into your nugget:

Code: Select all

<form method="post" action="http://www.aweber.com/scripts/addlead.pl">
<input type="hidden" name="meta_web_form_id" value="1704653152" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="unit" value="nigelbookerblog" />
<input type="hidden" name="redirect" value="http://www.aweber.com/form/thankyou_vo.html" id="redirect_d8f97629d68896b7bf0459601d733a8f" />
<input type="hidden" name="meta_redirect_onlist" value="" />
<input type="hidden" name="meta_adtracking" value="" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="from" />
<input type="hidden" name="meta_forward_vars" value="0" />
<p>Add your name to receive an email each time a new blog entry is made</p>
Name: <input type="text" name="name" value="" style="display: inline; width: auto" />
Email: <input type="text" name="from" value="" style="display: inline; width: auto" />
<input type="submit" name="submit" value="I'm in" />
</form>

<img src="http://forms.aweber.com/form/displays.htm?id=jOwMLGyszIysTA==" />

This is actually the HTML output that your javascript would generate, so it should be the same -- minus the HTML layout where I removed tables and added "inline" input fields, like Niclas also suggested.

Regardsin,
Garvin

[Bandit]

You can try removing the following

Code: Select all

.serendipitySideBarContent INPUT {WIDTH: 95%;}
.serendipitySideBarContent SELECT {WIDTH: 95%;}

Not sure what else this might affect, but worth a try.

That's along the right lines & worth me exploring a bit further. Thanks


Thanks for your suggestion garvinhicking - yes, I could do that & perhaps that's the only thing I can do but Aweber use the javascript for some additional tracking info. Without the javascript I loose out on that info.

[yellowled]

I do note that the Syndicate & Archive sidebar components are left justified in FF & centered in IE... Is that right?

It most definitely is not. You should disable (i.e. set to "hidden") the HTML nugget holding that signup form temporarily and see if that still happens, but I'm pretty sure it won't then.

This signup form apparently is a pain in the ass. Pardon my French, but I would seriously consider using a different service for this. This form uses deprecated HTML code.

YL

[garvinhicking]

Hi!

Thanks for your suggestion garvinhicking - yes, I could do that & perhaps that's the only thing I can do but Aweber use the javascript for some additional tracking info. Without the javascript I loose out on that info.

the JS uses an img for tracking, this is still contained in my HTML code!

Regards,
Garvin

[Bandit]

Hi!
the JS uses an img for tracking, this is still contained in my HTML code!

Regards,
Garvin

Ah... hadn't noticed that. Great, that's probably the way to go then.

[Bandit]

You should disable (i.e. set to "hidden") the HTML nugget holding that signup form temporarily

No, that makes no difference. In fact the syndicate & archives aren't centered but they appear much further to the right in IE than in FF.

You're right I think the Aweber code is rubbish but they are meant to be the best at what they do - so I think I'll have to stick with them...

[yellowled]

[In fact the syndicate & archives aren't centered but they appear much further to the right in IE than in FF.

Hm. This is the first time I'm hearing this in any Bulletproof-powered blog.

Which s9y version are you using? Is this the latest Bulletproof?

YL

[Bandit]

Which s9y version are you using? Is this the latest Bulletproof?
YL

This is 1.4 beta. Actually I think before I upgraded from 1.3 the display of syndicate & archive sidebars were ok - fully left justified in IE... I may be wrong there but I certainly didn't notice anything.

The sign up form wasn't right in IE with 1.3 or 1.4 however.

[yellowled]

Which s9y version are you using? Is this the latest Bulletproof?
YL

This is 1.4 beta. Actually I think before I upgraded from 1.3 the display of syndicate & archive sidebars were ok - fully left justified in IE... I may be wrong there but I certainly didn't notice anything.

It may very well be true.

I think I've noticed some changes you have made to BP, but I'm assuming you've made these using the theme options, right? You haven't edited any of the BP "core" files, i.e. the ones which are originally part of BP?

This seems to be the latest BP, so maybe the changes to the CSS for the edited core plugins don't work in IE. I'll have to check that. It's gonna take some time, though, I'm in the middle of something here

YL

[yellowled]

This seems to be the latest BP, so maybe the changes to the CSS for the edited core plugins don't work in IE. I'll have to check that.

Yes, that's it.

There have been some code changes for the core plugins in s9y 1.4 which required some CSS changes to make the output of the plugins just like before. Seems like they don't work the way they're supposed to in IE 6 and 7.

I'll address this asap, which probably means "tonight".

YL

[Bandit]

You haven't edited any of the BP "core" files, i.e. the ones which are originally part of BP?
YL

There the original template files I think....