css conflict with my new page

[Bhujang]

Hello

Was hoping someone can help me, I have a basic form for mail chimp. I have added it to a fragment in a brochure page. Here http://www.brilliantgems.co.uk/acata...ling-list.html

The alignment is meant to be left. its in the middle but that's ok, what is bugging me is the subscribe button is half missing and I really can work out why by the css.

This is already a much simpler version I had a more complicated version that came with its own css, this looked way better and works perfectly as a stand alone, but I couldn't integrate it to the sellerdeck css with out issues... css can be really tricky!

Any help much appreciated

[peblaco]

The button missing the right side background is because SellerDeck default layouts the input buttons are surrounded by code which applies background to the left and right side. A quick fix is to find the input button and surround it with the SellerDeck code:
<span class="button-wrapper"><input value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" type="submit"></span>

[Bhujang]

Thank you that worked great

[Bhujang]

So with the success of this basic form, I have now decided to push the boat out and add a more complex idea. This one has its own css. and wondered if it would be possible to add it to my existing css without any problems. Its still for a mail chimp mailing list subscription but has a much more professional look due to the css of its own page...

I have attached my own css file as well as the html page of the mailing form that I wish to attach. I have successfully changed the colours to match my website but get into trouble again with the .button functions. This mail form as a lovely mouse over effect that my site doesn't but when I try to add this only part of the button has the effect. Probably due to the wrapper command from the actinic css.

So all im asking really is it possible to join the css files from the html attachment to my actinic css without any conflicts? Or would it be a whole rebuild needed?

Sincerely

Bhu

Just seen that the attachments wont work as its for images. Here is a link to the html I wish to use in a fragment and take the css from it to add to my css file.

http://brilliantgems.us6.list-manage...&id=650cdb274a

[Bhujang]

Hi Peblaco

Thanks for your reply. Im currently working on it on my site and will show a upgraded link soon. Main issues so far are a grade back ground on the form page which should be easy to fix,
just cant find the hex code! And the buttons again, Im trying to keep the roll over effect of the mouse as I like it but that's causing major conflict.

I will repost a link soon

Best wishes

Bhu

[Bhujang]

Ok I have got so far and now im a bit stuck...

Here is the upgraded version.

http://www.brilliantgems.co.uk/acata...ling-list.html

Its a much better look than the previous basic attempt. Id love to incorporate the mouse over affect which is just on that page for now.

So to get it to look like this I have left a lot of the css in the fragment that holds the html for the form. When I added this to the main css I lost the complete look of the website.

I also deleted this section:

select{
width:300px;
margin:5px;

Which was wedged in between these 2...

ul.interestgroup_field label,div.interestgroup_field label{
display:table;
padding:0 0 0 3px;
font-weight:normal;
}
select{
width:300px;
margin:5px;
}
ul.unsub-options{
display:block;

I found with that code in my main pages lost the page control with 2 products in to columns. The second column would push out into the right side bar. With that code gone this doesn't happen. But not sure if I really need it as it didn't affect the form page as far as I could see. On pages that had just a single column no bad effect could be seen.

So the button is a real pain, I did use the <Span class code you gave me earlier and it fixes it to some degree but you can see from the page linked above extra code is getting in there.

Also the background is greyed out... I know its coming from the part of the css within the fragment but cant see the hex code for the grey... I will keep looking just wanted to get this up for some inspiration and help

Best wishes

Bhu

[Bhujang]

Well I've been working on it for hours now and managed to get the button in line at least. Still cant get it to have the full roll over only part of the roll over works...

Also cant find anywhere the grey hex code for the back ground that's on this fragment page. Has to be in the fragment code page somewhere some how unless its pulling it from the css I added to the main css...

Any help much appreciated

Cheers

Bhu

EDIT

Also the flashing cursor appears in the search bar instead of the start of the input form. The search bar just normally reads Quick Search but now the cursor is always there... Must be due to added css in the main part I guess.

[peblaco]

For the fields showing as white, the CSS from your first link has grey: .field-group {background-color: #EEEEEE;} However your page has that code as white: background-color:#ffffff; The roll over only partly works because SellerDeck overwrites styles and you've now also messed up your quick search button because it has a conflict of two styles applied. You included <html> tags in the fragment which are already in the layout and should not be repeated. The cursor in the search field is by default, to change it requires a change to Javascript. Changes are possible but require an understanding of coding.

[Bhujang]

Is it not possible to integrate the .button code from both CSS? Especially as I actually prefer the roll over effect to the blank button effect of the sellerdeck CSS.

[Bhujang]

I do like the roll over on the buttons it makes them look more active. I'm not too clued up on CSS so this is a real challenge for me. I did wonder if replacing the .button sellerdeck CSS with the CSS .button from the subscription page and just see what happens.

As for the body and head tags in the fragment I will try to take those out.

I'm not sure what the <html dir="ltr" does or if it can be left out. There looks to be a lot of the CSS that can be left out so maybe that can too...

Thanks for the advice so far I will have a further look at it today.

If I can't get it working right I will just go back to the basic one that I had running before as it was usable this seems to be usable but just has bugs like the grey background which I still can't find lol

[Bhujang]

Its weird as I still cant find the field-group set to #EEEEEE I have changed them all to either #ffffff or #ff8000 even when I do a search for #EEEEEE it doesn't show up yet in the fragment page preview its grey back ground I will search some more!

[Bhujang]

Ok well changed the #ffffff back to #EEEEEE and its still grey back ground in preview...

[Bhujang]

All that does is make the form input field light grey.

Im talking about the main back ground to the website which is a deep orange on the main pages and on the fragment page is a deep grey...

[Bhujang]

im thinking that I might just go back to the boring looking form or even just have a hyper link to the mail chimp form as that would be much easier for me to handle... Its starting to do my head in ha ha

[Bhujang]

Ok its back to the basic form now, it looks slightly better than just an active link taking them off site to a mailchimp form, http://www.brilliantgems.co.uk/acata...ling-list.html this will have to do for now.

At least there are no conflicts from this code to my website css as I didn't add any css just the form code