Div Padding issues among different browsers

  • Hello,

    I put a twitter announcement area on my blog as you can see here https://www.AliphAurMeem.com/blog.

    My only issue is that in some browsers the text appears almost in the middle of the balloon as opposed to the top left where it should be. It renders correctly in IE7 and pretty much messed up (in the middle; too low) in everything else including IE8 and FireFox. It seems like other browsers are adding an additional padding of 10px.

    Here is my css for it. 

    .twitterbar {
         display: block;
	width: 435px;
         height: 50px;
	padding-top:10px;
         padding-bottom:0px;
         padding-right:10px;
         padding-left:58px;
	/*width: 500px;
         height: 60px;
	padding-top:0px;
         padding-bottom:0px;
         padding-right:0px;
         padding-left:0px;   */
	font-size:10px;
	color:#fff; /* So Welcome! shows in white */
         background-image:url('https://aliphaurmeem.com/blog/wp-content/themes/tofurious-21/images/twitterbar.jpg')};
         background-repeat:no-repeat;
         background-position:top center;
}

.twitterbar .tweet {
         /* Not using this right now. Was using it for span tag before; now using p instead.
         display:block;
	padding-top:10px;
         padding-bottom:10px;
         padding-right:10px;
         padding-left:55px;
	font-size:10px;
	color:#E9E6DD;
         */
}

.twitterbar .tweet p {
         display:inline;
	padding-top:0px;
         padding-bottom:0px;
         padding-right:10px;
         padding-left:58px;
	font-size:10px;
	color:#E9E6DD; /* The tweet message shows in off-white (same color as blog entry background) */
}

.twitterbar a {
	font-size:10px;
	color:#E9E6DD; /* The tweet message shows in off-white (same color as blog entry background) */
}

    Here is my markup

    <div class="twitterbar"><p><?php twitter_messages("myusername"); ?></p></div>
Viewing 1 replies (of 1 total)

  • Hi asadikhan,

    first things first, it takes over three minutes to load your frontpage, due to the big number of heavy images several of them being more than 600kB each. You probably do’nt notice that because the files are stored in the temp files of your browser but first time visitors are in for a wait. Check it here: https://www.websiteoptimization.com/services/analyze/

    Next: Firefox picks up the 10px at the top from here:

    .twitterbar {
         display: block;
	width: 435px;
         height: 50px;
	padding-top:10px;
         padding-bottom:0px;
         padding-right:10px;
         padding-left:58px;

    Easy to see: You can try it out first: get Firefox and the the Firefox addon Firebug.
    You can then click anywhere in your site and see what piece of the css influences that piece of your site and you can even make changes but not save them, so it is safe to practice

Viewing 1 replies (of 1 total)
  • The topic ‘Div Padding issues among different browsers’ is closed to new replies.