WordPress.com

1. rapreece
   Member
   Mar 19, 2012, 1:11 AM

   Hi there! We're making a website/blog for our flatmate using the Bueno theme.
   Trouble is the buttons we've made using text widgets and some basic html display differently depending on whether you're viewing them on Firefox or Google Chrome. We haven't even seen if it's right on IE! The Twitter and Linkedin buttons basically display higher up on Chrome than on Firefox.
   Does anybody know why this might be?

   Here is the css we're using to position the text widget that the images are in:

   .two {
   border-right:none;
   position:relative;
   top:-1540px;
   left:-330px;
   float:left;
   list-style-type:none;
   margin:0 9px 0 0;
   }

   (We've moved one of the footers to the top of the page to hold the twitter and linkedin buttons)

   Any help's appreciated!

   From Lesley and Mike :)

   The blog I need help with is rpreece.com.

2. rapreece
   Member
   Mar 19, 2012, 1:12 AM

   P.s This is the blog's url: http://www.rpreece.com

3. timethief
   Member
   Mar 19, 2012, 1:14 AM

   I'm sorry but only Staff provide CSS editing support these days and they aren't available until tomorrow.

4. rapreece
   Member
   Mar 19, 2012, 1:16 AM

   That's ok! Thanks for letting us know. We'll check back tomorrow. Cheers again.

5. timethief
   Member
   Mar 19, 2012, 1:18 AM

   Cheers

6. rapreece
   Member
   Mar 19, 2012, 11:20 PM

   We solved the issue! (With google chrome and firefox displaying our images differently).

   We found out that the HTML changes we made only affected how the images looked in chrome. So we used the "relative positioning" available in the table tags to move the image. That was chrome sorted.

   Then we just positioned the images using CSS for firefox. We used absolute positioning.

   Bit messy, but effective!

   Changed the html for chrome, changed the css for firefox.

   Hope this helps anyone with similar issues!

   Here's the code:

   <table>
   <tr>
   <td style="z-index:3000;position:relative;left:0;top:-25px;" height="-150">
   <img src="http://www.haloreacharound.com/wp-content/uploads/2010/07/twitter-bird3-webtreatsetc-300x300.png" width="64" height="64" /></td>
   <td style="z-index:3000;position:relative;left:0;top:-25px;" height="-150">
   <img src="http://www.canfieldnotes.com/wp-content/uploads/2010/10/linkedin-logo-webtreatsetc-300x300.png" width="64" height="64" /></td>
   </tr>
   </table>

   So if anyone wants two nice twitter and linkedin buttons to add to their blogs, feel free to use. Just copy your own twitter page and linkedin page links into the code above, and then copy and paste the whole lot into a text widget, which you can add by going to appearance>widgets>and dragging a text widget to your footer on the right.

Topic Closed

This topic has been closed to new replies.