• Locked
2 replies [Last post]
Wed, 2015-04-15 12:08
Nono
Nono's picture
Offline
Regular
Iasi, Romania
Last seen: 5 years 31 weeks ago
Iasi, Romania
Timezone: GMT+3
Joined: 2011-03-10
Posts: 23
Points: 42

Hi,
My goal is to make centered and responsive 3 elements in a div. I did in Firefox, Chrome, IE, Opera but not in Safari.
This is the link:
http://baliweddingblog.com/test/
This is the html:

<div class="socials">
				<p>If you found this article useful please share it</p>
				<div class="insocials">
					<span class="fb-share-button" data-layout="button"></span>
					<span class="sharegoogle"><div class="g-plus" data-action="share" data-annotation="none"></div></span>
					<span class="pinit"><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-color="white">
						<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
						<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
					</span>
				</div>
			</div>

This is the css:
.pinit {
top:7px;
position:relative;
}
.sharegoogle {
top:7px;
margin-left: 20px;
margin-right:20px;
position:relative;
}
.socialfb{
position:relative;
}
.insocials {
position:relative;
width:280px;
margin-top:10px;
text-align: center;
display:inline;
}
.socials {
background-color: #2fbac1;
width:100%;
height:85px;
position:relative;
padding:25px 0 0 0;
text-align: center;
}
.socials p{
font-size:22px;
text-align: center;
color:black;
clear:both;
}

I try different solutions that I found on the internet but somehow one of them mess other browser.

Thank you for your time.

Top
  • view bestreply
Tags:
Wed, 2015-04-15 17:28
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Fatal syntax errors

Not even the W3C validator was able to recover from your syntax errors. Fix the html first. You may find your problem disappears. If not, then we have valid markup to debug.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Wed, 2015-04-15 20:50
#2
Nono
Nono's picture
Offline
Regular
Iasi, Romania
Last seen: 5 years 31 weeks ago
Iasi, Romania
Timezone: GMT+3
Joined: 2011-03-10
Posts: 23
Points: 42

Those errors come from DIVI

Smile
Those errors come from DIVI theme. Without the code I put, those errors will be there anyway.
The solution

.pinit1 {
top:6px;
position:absolute;
right:0;
}
.socialfb{
top:0px;
left:0;
position:absolute;
}
.g1-plus {
       top: 6px !important; 
       position: relative !important; 
       right: -8px ; 
} 
.insocials {
position:relative;
width:220px;
text-align: center;
display:inline-block;
margin-top:10px;
}
.socials {
background-color: #2fbac1;
width:100%;
height:85px;
position:relative;
padding:25px 0 0 0;
text-align: center;
}
.socials p{
font-size:22px;
text-align: center;
color:black;
clear:both;
}

The HTML
<div class="socials">
				<p>If you found this article useful please share it</p>
				<div class="insocials">
					<div class="socialfb"><span class="fb-share-button" data-layout="button"></span></div>
<span class="g1-plus"><div class="g-plus" data-action="share" data-annotation="none"></div></span>
					<span class="pinit1"><a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="white"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
 
					</span>
					</div>
				</div>

If you bang your head over and over again something will come out, it might be something stupid or not.
Topic close.
Thank you for your time.

Top
  • Locked