supersized Jquery causes site to be over 100% wide

Question

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!

Answer 1

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; eg 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