Search code examples
jquerysupersized

supersized Jquery causes site to be over 100% wide

file in question; http://channel5.co.nz/testing/ excuse the long load, the jpegs havent been fully optimized yet.

I am having an issue with the way the supersized slider is adding an element to the DOM, firebug is telling me its the problematic element is the a tag that wraps the img tag inside of the ul supersized loads.

I can't seem to alter the css in a way to get this to go away.

Any insight would be greatly appreciated!

Solution

  • Try changing the #supersized css to this: 

    #supersized {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
position: absolute; 
left:0; top:0; 
margin:0px; 
overflow:hidden; 
z-index:-999; 
height:650px; 

width: 100%; }

    (This uses the box-model CSS3 declaration)
    The default box-model adds any padding or margin to the containers computed width; e.g. in this example you have the following rule declared:

    ul, ol { margin: 1em 0; padding: 0 0 0 40px; }

    Which makes the computed width 100% + 40px.

    You might also have been targeting the #supersized ul unintentionally with this rule. Then you only need to add padding: 0; to the #supersized rule.

    For an explanation on how the box-model works, and why it is set to content-box as the default, check http://www.quirksmode.org/css/box.html