Wed, 2014-05-21 21:47
The site is using margin auto in order to have compatibility with different resolutions of screen
I have several divs nested in one central div. Those divs have images as links and they are not stuck properly to the left edje all. Here is a piece of code
<div style="width:800px; border-style:dashed; border-width: 3px; overflow:hidden; margin-left: auto; margin-right:auto;"> <!--<iframe width="100%" height="100%" scrolling="no" hspace="0" vspace="0" marginheight='0' frameborder='no' src="sa_footer.html"></iframe>--> <div style="border-width: 2px; background-color: #00CCFF; border-style: dotted;margin-left:60px; float:left;"> <div id="icon_mysp"><a class="social1" href="http://myspace.com"><img src="images/MySpace-icon.png" alt="myspace_icon" width="20px" height="20px" align="middle"/> на MySpace</a></div> <div id="icon_fb"><a class="social1" href="http://myspace.com"><img src="images/vk-icon.jpg" width="20px" height="20px" alt="VK_icon" align="middle"/>Ми на VK</a></div> </div> <div style="margin-left: 90px;background-color: #FFCC00;float:left;"> <div><a class="social2" href="http://myspace.com"><img src="images/facebook-icon.png" width="20px" height="20px" alt="FaceBook_icon_copy" align="middle"/>Ми на FaceBook</a></div> <div><a class="social2" href="http://myspace.com"><img src="images/topdj_icon.png" alt="TopDJ_icon" width="20px" height="20x" align="middle"/>Ми на TopDJ</a></div> </div> <div style="margin-left: 120px; background-color:#CC00FF; float:left;"> <div><a class="social3" href="http://myspace.com"><img src="images/icon_promodj_64_2.png" alt="PromoDJ_icon" width="20px" height="20px" align="middle"/>Ми на PromoDJ</a></div> <div><a class="social3" href="http://myspace.com"><img src="images/soundcloud-icon2.png" width="20px" height="20px" alt="SoundCloud_icon" align="middle"/>Ми на SoundCloud</a></div> </div> </div>
To describe the image i get - in each row of the div I have one image showed properly (stuck to the left) and one with a little shift. Not inline styles are here:
a.social1 {text-decoration:none; color:#FFCC00;} a.social2 {text-decoration:none; color:#00FFCC;} a.social3 {text-decoration:none; color:#FFCC00;}
Please suppose anything;
The image is on this site: Screenshot and has 3 boxes with images for code in the end of the page