Намерете елемент, който разтяга уеб страница?

Работя малко за http://digitaleditor.com/ и попаднах на нещо малко объркващо.

Уеб страницата има хоризонтална лента за превъртане в долната част, но не можах да разбера защо. С помощта на инструментите за разработчици на Google Chrome открих, че има само 3 елемента на цялата страница, които надвишават 960 пиксела. Първите две са html и body, втората е #hpages, но втората е широка само 970 пиксела (html и body са широки по 1263 пиксела). Освен това има много очевидно CSS правило, което разтяга #hpages до 970 пиксела:

#hpages ul {   width:970px; float:right; }

Не мога да намеря такова правило за разтягане на html или body елементи. Опитах да стартирам следния скрипт, за да видя дали има елементи, които просто пренебрегвах и които може да разтягат страницата:

javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);

Това върна #hpages, което означава, че никой елемент не е с ширина над 970 пиксела в тялото (въпреки че тялото е разтегнато до 1263 пиксела).

Няма CSS правила, засягащи ширината на елемента body или ширината на елемента html.

Честно казано, просто съм на загуба какво разтяга страницата и не знам как да разбера. На този етап моята последна мярка е систематичното премахване на елементи от страницата, докато проблемът не бъде разрешен. Чудех се дали някой знае по-добър вариант.


html css width stretch
person stevendesu    schedule 31.10.2011    source източник
comment
Примерна ли е началната страница на сайта, към който свързвате? Тъй като в момента не превърта хоризонтално за мен, с прозорец за изглед от 1000px, на Chrome/Mac.   -  person millimoose    schedule 01.11.2011
comment
Не получавайте хоризонтална лента за превъртане в Chrome (най-новата версия).   -  person deviousdodo    schedule 01.11.2011
comment
Аз съм в Chrome 14.0.835.202, а собственикът на сайта използва FireFox 7.0.1 и двамата виждаме хоризонталната лента за превъртане. Моят браузър е максимизиран и резолюцията ми е 1280x1024. Тестването в Internet Explorer 9 и Safari 5 също ми даде хоризонтална лента за превъртане. Може ли да е нещо от Windows, ако не се показва на Mac?   -  person stevendesu    schedule 01.11.2011
comment
Има ли други CSS правила, засягащи #hpages? Някакви подложки/полета?   -  person Furbeenator    schedule 01.11.2011
comment
@Furbeenator: Абсолютно нищо. Погледнах и има 0 полета, 0 подложки, 0 граници.   -  person stevendesu    schedule 01.11.2011

Отговори (3)


arrow_upward
5
arrow_downward

Това е ширината на iframe в .wrapper>#page>#content>#sidebar.rightSidebar.left>center>div>#fb-root>div>div>iframe#f1c73bf2defcb8

Има вграден стил width: 575px;, който е препълнен. Или коригирайте ширината, или добавете overflow: hidden; към този div <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">

person Steve Robbins    schedule 31.10.2011
comment
Нямам абсолютно никаква представа как го разбрахте, но изглежда законно. Ще го сменя и ще видя какво ще стане - person stevendesu; 01.11.2011
comment
Вградената рамка се създава от javascript, съхраняван на сървърите на Facebook, въпреки че добавих overflow:hidden към съдържащия div обект, върху който имам контрол, и проблемът все още не беше разрешен. РЕДАКТИРАНЕ – въпреки че пълното премахване на бутона „Харесва ми“ във Facebook реши проблема с превъртането, така че сте посочили правилния елемент. Всичко, от което се нуждая сега, е решение. И за предпочитане разбиране за това как сте го разбрали. - person stevendesu; 01.11.2011
comment
@steven_desu не съдържащият div, а този, съдържащ това, с абсолютното позициониране върху него. Ако това не работи, можете да му дадете left: -575px; и това трябва да има същия ефект. Разбрах го с помощта на елемента inspect на Opera. - person Steve Robbins; 01.11.2011

arrow_upward
0
arrow_downward

В страницата имате връзка към:

<link rel="stylesheet" href="http://digitaleditor.com/wp-content/themes/couponpress/template_couponpress/styles.css" type="text/css" media="screen" />

В тази страница има:

/* ===================== _HEADER STYLES ======================== */ 
#hpages ul {   width:970px; float:right; }
#hpages ul li { float: right; padding-right: 10px; margin-right: 10px; border-right: 1px solid #333; }

Не съм сигурен, но може би наличието на margin-right върху li може да ги кара да препълват. Може да искате да презапишете този стил с CSS на вашата страница. Не съм сигурен дали имате достъп за това, но това може да е опция.

person Furbeenator    schedule 31.10.2011
comment
Това е добра уловка, но полето отдясно се прилага за елементите li, които имат само ширина от около 60-100 пиксела всеки. А те са само две. Тези li елементи далеч не препълват страницата. - person stevendesu; 01.11.2011
comment
Но ако те са плаващи надясно и имат марж, те могат да прехвърлят дясната граница на своя родителски елемент. - person Furbeenator; 01.11.2011

arrow_upward
-1
arrow_downward

Премахване на position:relative; от .wrapper

person Maverick    schedule 31.10.2011
comment
Премахване на позиция: относителна; е невъзможно, тъй като има много абсолютно позиционирани елементи на страницата, зависещи от него. - person stevendesu; 01.11.2011