CSS masters please help me tame the slider border…
Page hosted on - http://stevanbarry.com/dan-morris-template/index.html
The offending item appears to be the
div class="bx-wrapper"
yet I’m finding there is a conflict within the bootstrap css file on line 881
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
I’m completely at a loss as to what is causing the left border to appear 20px wider…
As far as I’m able to tell, the 20px is from that rule that you just displayed. However it’s not showing hte right side border due to the fact that the images / borders etc are too wide and since you have overflow:hidden set, it’s not showing that extra border.
Reset the left padding of the ul to zero.
Try to add this :
.bxslider{
padding: 0;
}
.bx-wrapper img{
max-width: auto;
width: 100%;
}
I agree. Lists have a padding-left of 40px applied by the browser. Older IE applies margin-left instead.
But I notice most images are 900px wide at my browser size, while something (JavaScript?) applies an inline style rule of 917px, leaving an extra wide “border” on the right. 
Actually the default is about 1em of padding, or ~16px (not 40px)
Apply:
left: 0;
as a rule to the li’s and they’ll stick to the left of the absolutely positioning
Hey there,
This is actually a pretty simple fix, but very annoying if you are looking in the wrong place. If you have developer tools on Google Chrome (they are really good for real time css changes before using the editor) you can easily pinpoint the mistake. The ul class bxslider has padding-left of 40px, change this to 10px and you will solve your problem.
.bxslider{
padding-left: 10px;
}
HI, @RyanReese. You may find this interesting.
In the example below, the top list is a default “ul”, The padding-left is 40px. This can be verified using a screen measuring utility such as “Screen Calipers”.
The bottom list changes the padding-left to 2.5em.
For the sake of this example, assume 16px = 1em. 2.5em would equal 40px.
So, assuming a user default font of 16px or equivalent, we start the exercise with both lists looking the same (presumably).
If you have Firefox, you can zoom text-only and simulate a change in the font size. If the default padding left were ems, it would change with the user’s font size setting. This example shows that the default padding-left remains fixed at all font-sizes whereas if the padding-left is expressed in ems, it will change with the size of the font.
My conclusion is that the default padding left is in fact 40px in FF, Chrome and Opera. You can change it to ems, but the default is px.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
<style type="text/css">
.outer {
width:500px;
font-size:100%; /* If not using Firefox, change font size here to simulate user's font size. */
margin:0 auto;
}
ul {
border:1px solid #f00;
margin-top:.25em; /* if truly default, there will be no margin-top change */
}
li {
border:1px solid #0f0;
}
.ems {
padding-left:2.5em
}
pre {
font-family:"courier new",monospace;
margin-bottom:.25em;
white-space:pre-wrap;
}
</style>
</head>
<body>
<div class="outer">
<pre>Default Unordered List</pre>
<ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
<pre>ul {padding-left:2.5em}</pre>
<ul class="ems">
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
<pre>Change the browser's font size and see what happens.</pre>
</div>
</body>
</html>
I would think that lists would self-adjust that padding to accommodate Roman numerals, but they don’t.
Ah I never really bothered to look into it. I knew it was around 16px padding that was set (which I sorta just equated to 1em since most users are defaulted to that unless they zoom or have different settings).
That’s pretty neat Ron. Thank you.
Firstly apologies on not repling to the solutions - the transfer to the new forum was a slight ‘issue’ for me : (
Anyhow thanks to all I’ll try each solution and report back - THANK you all again.
This works well except the original heights of the images are changed but a good hack.
Thanks to everyone for the help. I’ve activated an adaptive height option on the bx.slider but for some reason some of the images are cropped - if anyone has any ideas Id be much appreciated.
The parent simply isn’t expanding to encompass the full image. The 20px border on the container is causing 20px to be cut off. The easiest way would be to give the parent a min-height so it at LEAST meets the minimum.
.bx-wrapper .bx-viewport
{
min-height:591px;
}
Thanks for that yet I want the height to be responsive
$('.bxslider').bxSlider({
adaptiveHeight: true,
adaptiveHeightSpeed: 600,
auto: true,
autoControls: true,
touchEnabled: true,
oneToOneTouch: true,
slideWidth: 870
});
: (
The mimimum height of the border and the image is 591px. All of your images are at LEAST 591px. My method doesn’t set the height, it sets the minimum as established by your imagse and borders. It allows for growth for bigger images.
stephen_,
The bx-slider was not written with box-sizing:border-box in mind. Therefore, you will have to set the bx-slider components back to :content-box and change the inline style on .bx-wrapper back to match the width of your images, 830px.
.bx-wrapper {
max-width:830px;
}
.bx-wrapper * {
box-sizing:content-box;
}With the application of these two styles, all image display their correct width and height and maintain their aspect ratio as the width of the window changes.
Hi Ronpat I added in code to the jquery.bxslider.css but no joy. Its still cascading up to the bootstrap.css ‘border-box’
The code I added was;
.bx-wrapper {
max-width:830px;
box-sizing:content-box;
}
I’m also now finding when the browser is re-sized below 768px (mobile menu kicks in) that the menu hides behind the slider : (
The images are still being cropped.
.bx-wrapper {max-width:830px;} is doing nothing because it is being overridden by the inline style {max-wdith:870px;}. I believe 870px is being added by JS. It should change when the following corrections are made.
.bx-wrapper {box-sizing:content-box;} likewise is of no value because .bx-wrapper does not need that property.
Please enter the following new style exactly as I typed it… with the star . It is intended to target all of the containers inside of .bx-wrapper.
.bx-wrapper * {
box-sizing:content-box;
}Perhaps I should just do as I’m told 
Thanks so much this works a treat. Yes the js was adding the 870px. Any ideas why the menu is behind the slider on mobile width of browser (z-index issue?)
sorry to keep asking…