Галерея упрямо съезжает в лево

css и lightbox

#1 9 февраля 2011 в 15:18
Уже замотался в попытках поправить css у lightbox, именно галерея на сайте упрямо съезжает в лево. Вот пример:
http://slavyanskaya-kultura.ru/photos/1042

Может, кто хорошо разбирается с лайтбоксом и каскадными помогите?

Думаю что проблема в этом фаиле /includes/jquery/lightbox/css/jquery.lightbox.css
Я там ничего не менял, вполне может быть, что и у других кто на версии 1.6.2 имеют ту же проблему.

Пример фаила jquery.lightbox.css:
  1. /*
  2.  * jQuery Lightbox Plugin (balupton edition) - Lightboxes for jQuery
  3.  * Copyright (C) 2008 Benjamin Arthur Lupton
  4.  * http://jquery.com/plugins/project/jquerylightbox_bal
  5.  *
  6.  * This file is part of jQuery Lightbox (balupton edition).
  7.  *
  8.  * jQuery Lightbox (balupton edition) is free software: you can redistribute it and/or modify
  9.  * it under the terms of the GNU Affero General Public License as
  10.  * published by the Free Software Foundation, either version 3 of the
  11.  * License, or (at your option) any later version.
  12.  *
  13.  * jQuery Lightbox (balupton edition) is distributed in the hope that it will be useful,
  14.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  15.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16.  * GNU Affero General Public License for more details.
  17.  *
  18.  * You should have received a copy of the GNU Affero General Public License
  19.  * along with jQuery Lightbox (balupton edition). If not, see <http://www.gnu.org/licenses/>.
  20.  *
  21.  * @name jquery_lightbox: jquery.lightbox.css
  22.  * @package jQuery Lightbox Plugin (balupton edition)
  23.  * @version 1.1.1-final
  24.  * @date April 07, 2008
  25.  * @category jQuery plugin
  26.  * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
  27.  * @copyright (c) 2008 Benjamin Arthur Lupton {@link http://www.balupton.com}
  28.  * @license GNU Affero General Public License - {@link http://www.gnu.org/licenses/agpl.html}
  29.  * @example Visit {@link http://jquery.com/plugins/project/jquerylightbox_bal} for more information.
  30.  */
  31.  
  32. html, body { margin: 0; padding: 0; height: 100%;}
  33.  
  34. #lightbox, #lightbox-overlay {
  35. position: absolute;
  36. top: 0px;
  37. left: 0px;
  38. bottom:auto;
  39. right:auto;
  40.  
  41. z-index:100;
  42. width:100%;
  43. height:auto;
  44.  
  45. text-align:center;
  46. color:#333333;
  47.  
  48. /* stop stupid conflicts */
  49. margin:0px;
  50. padding:0px;
  51. border:none;
  52. outline:none;
  53. line-height:0;
  54.  
  55. /* general conflict stopper */
  56. text-decoration:none;
  57. background:none;
  58. word-spacing:normal;
  59. letter-spacing:normal;
  60. float:none;
  61. clear:none;
  62. display:block;
  63. }
  64.  
  65. #lightbox-overlay {
  66. z-index: 90;
  67. background-color:#000000;
  68. height: 100%;
  69. position:fixed;
  70. }
  71. #lightbox-overlay-text {
  72. text-align: right;
  73. margin-right: 20px;
  74. margin-top: 20px;
  75. color: white;
  76. font-size: 12px;
  77. cursor: default;
  78. line-height:normal;
  79. }
  80. #lightbox-overlay-text a, #lightbox-overlay-text a:hover, #lightbox-overlay-text a:visited, #lightbox-overlay-text a:link {
  81. text-decoration:underline;
  82. color:white;
  83. }
  84. #lightbox-overlay-text span {
  85. padding-left:5px;
  86. padding-right:5px;
  87. }
  88.  
  89. #lightbox img, #lightbox a img, #lightbox a { border:none; outline:none; }
  90.  
  91. #lightbox-imageBox {
  92. position:relative;
  93. border:1px solid black;;
  94. background-color:white;
  95. width:400px;
  96. height:400px;
  97. margin:0 auto;
  98. }
  99.  
  100. #lightbox-imageContainer {
  101. padding:1px;
  102. }
  103.  
  104. #lightbox-loading {
  105. position:absolute;
  106. top:40%;
  107. left:0%;
  108. height:25%;
  109. width:100%;
  110. text-align:center;
  111. line-height:0;
  112. }
  113.  
  114. #lightbox-nav {
  115. position:absolute;
  116. top:0;
  117. left:0;
  118. height:100%;
  119. width:100%;
  120. z-index:10;
  121. }
  122. /* #lightbox-imageBox > #lightbox-nav { left: 0; }
  123. #lightbox-nav a { outline: none; }*/
  124.  
  125.  
  126. #lightbox-nav-btnPrev, #lightbox-nav-btnNext {
  127. display:block;
  128. width:49%;
  129. height: 100%;
  130. background:transparent url(../../jquery_lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
  131. /* cursor:pointer; */
  132. zoom:1; /* who knows why? */
  133.  
  134. padding:0px;
  135. margin:0px;
  136. }
  137. #lightbox-nav-btnPrev {
  138. left:0;
  139. right:auto;
  140. float:left;
  141. }
  142. #lightbox-nav-btnNext {
  143. left:auto;
  144. right:0;
  145. float:right;
  146. }
  147. /*
  148. .preload_largeLink, #prevLink:hover, #prevLink:visited:hover {
  149. background:url("../images/prev.gif") left 45% no-repeat;
  150. }
  151. .preload_nextLink, #nextLink:hover, #nextLink:visited:hover {
  152. background:url("../images/next.gif") right 45% no-repeat;
  153. }
  154. */
  155.  
  156. #lightbox-infoBox {
  157. font:10px Verdana, Helvetica, sans-serif;
  158. background-color:#FFFFFF;
  159. margin:0 auto;
  160. padding:0px;
  161.  
  162. /* width: 100%;
  163. padding: 0 10px 0; */
  164. }
  165.  
  166. #lightbox-infoContainer {
  167. padding-left:10px;
  168. padding-right:10px;
  169. padding-top:5px;
  170. padding-bottom:5px;
  171. color:#666;
  172.  
  173. line-height:normal;
  174. /* height:30px; */
  175. }
  176. #lightbox-infoHeader {
  177. width:100%;
  178. text-align:center;
  179. }
  180. #lightbox-caption {
  181. text-align:justify;
  182. }
  183. #lightbox-caption-title {
  184. font-weight:bold;
  185. }
  186. #lightbox-caption-description {
  187. font-weight:normal;
  188. }
  189.  
  190. #lightbox-infoFooter {
  191. margin-top:3px;
  192. color:#999999;
  193. }
  194. #lightbox-currentNumber {
  195. display:block;
  196. width:49%;
  197. float:left;
  198. text-align:left;
  199. }
  200. #lightbox-close {
  201. display:block;
  202. width:45%;
  203. float:right;
  204. text-align:right;
  205. }
  206. #lightbox-close-button{
  207. padding-left:30%;
  208. }
  209. #lightbox-close-button, #lightbox-close-button:link, #lightbox-close-button:visited, #lightbox-close-button:hover {
  210. text-decoration:underline;
  211. color:#999999;
  212. }
  213. #lightbox-close-button:hover {
  214. color:#666666;
  215. }
  216.  
  217. #lightbox-infoContainer-clear {
  218. clear:both;
  219. visibility:hidden;
  220. }
#2 9 февраля 2011 в 15:25
Александр, у вас на этой странице добавляется в стили margin и padding = 0
  1.  
  2. html, body {
  3. height: 100%;
  4. margin: 0;
  5. padding: 0;
  6.  
а на главной нет…
#3 9 февраля 2011 в 16:20
Вот черт как так можно облажаться, не заметил
Спасибо большое Madmax уже поправил
#4 17 июня 2012 в 03:07
Что интересно уже прошло столько времени а данная, еле заметная проблемка так и осталась. Сегодня ставил на 1.9 одному из клиентов сайт и заметил что в альбомах галереи весь дизайн сбиваеться в лево, т.е. лишние margin и padding = 0 так и остались в системе.

Если у кого бывает такая же проблема идем сюда
/includes/jquery/lightbox/css/jquery.lightbox.min.css
И прям в самом верху стираем
margin:0;padding:0;

Ну и самое странное что бага возникает не каждый раз. В любом случае решаеться просто
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.