Unwanted white space in header - css

Preview:
How can I remove this white space from the header? I didn't play with the paddings of the header.
I have a section for Header and Footer. Also, I have a section for the whole thing including Header, Body, Footer. What is causing this white space in the header and how can I remove it?
my CSS code:
*{
font-family: sans-serif;
}
h2.header_headings{
font-size: 45px;
text-indent: 10px;
line-height: 1px;
}
h3.header_headings{
font-size: 20px;
text-indent: 25px;
line-height: 1px;
}
h1.body_headings{
font-size: 27px;
}
h1.body_headings:first-letter{
font-size: 200%;
}
img{
float: left;
}
p{
font-family: tahoma;
}
ul
{
font-weight: bold;
font-size: 18px;
}
a
{
color: orange;
}
a:hover
{
color: green;
}
li
{
margin: 5px;
}
footer{
font-size: 15px;
text-align: center;
}
#copyright{
vertical-align: middle;
}
#body{
width: 800px;
background-color: white;
border-width: thick;
border-color: black;
border-style: solid;
margin: auto;
box-shadow: 0 0 30px #000000;
}
body{
background-image: url("../images/bats.gif");
background-repeat: repeat;
}
#header{
border-bottom: 2px solid black;
background: orange; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, white, orange 75%, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, white, orange 75%, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, white, orange 75%, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, white, orange 75%, black); /* Standard syntax */
}
#footer{
height: 50px;
border-top: 2px solid black;
background: orange; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, black, orange, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, black, orange, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, black , orange, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, black, orange, white); /* Standard syntax */
}
My HTML5:
<!DOCTYPE html>
<html lang="en">
<section id="body">
<section id="header">
<head>
<title>Halloween Store</title>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="stylesheet" type="text/css" href="styles/normalize.css"/>
<img src="images/pumpkin.gif" alt="Pumpkin Picture">
<h2 class="header_headings">The Halloween Store</h2>
<h3 class="header_headings">For the little Goblin in all of us!</h3>
</head>
</section>
<body>
<h1 class="body_headings">Welcome to my site. Please come in and stay awhile.</h1>
<p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
<h2 class="body_headings">Product categories</h2>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h2 class="body_headings">My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b></p>
</body>
<section id="footer">
<footer>
<p id="copyright">© 2016 Ben Murach</p>
</footer>
</section>
</section>
</html>


That was because of the <h2>, which had a margin-top of 20px. The following should work!
* {
font-family: sans-serif;
}
h2.header_headings {
font-size: 45px;
text-indent: 10px;
margin-top: 0;
}
h3.header_headings {
font-size: 20px;
text-indent: 25px;
}
h1.body_headings {
font-size: 27px;
}
h1.body_headings:first-letter {
font-size: 200%;
}
img {
float: left;
}
p {
font-family: tahoma;
}
ul {
font-weight: bold;
font-size: 18px;
}
a {
color: orange;
}
a:hover {
color: green;
}
li {
margin: 5px;
}
footer {
font-size: 15px;
text-align: center;
}
#copyright {
vertical-align: middle;
}
#body {
width: 800px;
background-color: white;
border-width: thick;
border-color: black;
border-style: solid;
margin: auto;
box-shadow: 0 0 30px #000000;
}
body {
background-image: url("../images/bats.gif");
background-repeat: repeat;
}
#header {
border-bottom: 2px solid black;
background: orange;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, white, orange 75%, black);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, white, orange 75%, black);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, white, orange 75%, black);
/* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, white, orange 75%, black);
/* Standard syntax */
}
#footer {
height: 50px;
border-top: 2px solid black;
background: orange;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, black, orange, white);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, black, orange, white);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, black, orange, white);
/* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, black, orange, white);
/* Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<section id="body">
<section id="header">
<head>
<title>Halloween Store</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<link rel="stylesheet" type="text/css" href="styles/normalize.css" />
<img src="images/pumpkin.gif" alt="Pumpkin Picture">
<h2 class="header_headings">The Halloween Store</h2>
<h3 class="header_headings">For the little Goblin in all of us!</h3>
</head>
</section>
<body>
<h1 class="body_headings">Welcome to my site. Please come in and stay awhile.</h1>
<p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
<h2 class="body_headings">Product categories</h2>
<ul>
<li>Props
</li>
<li>Costumes
</li>
<li>Special Effects
</li>
<li>Masks
</li>
</ul>
<h2 class="body_headings">My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b>
</p>
</body>
<section id="footer">
<footer>
<p id="copyright">© 2016 Ben Murach</p>
</footer>
</section>
</section>
</html>

Related

CSS putting z-index of text-shadow behind background

After searching the web for other's solutions to coloring half of a character using CSS, I found this: http://jsbin.com/rexoyice/1. After a small adjustment to suit my purposes, I implemented it. I had planned to use text-shadow on this. The shadow covers the "text," which is actually colored by the background. I am a novice at CSS and have no clue how to use z-indexing to put the text-shadow behind the background. I'm open to other solutions that others may come up with if z-indexing isn't the ideal solution.
In the code below, the top line has the shadow applied, while the lower one doesn't.
.HalfColor
{
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
/*text-shadow:0 0 0 #0000 !important*/
}
p
{
text-shadow: 1px 1px 2px #000;
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>

Use drop-shadow filter instead:
.HalfColor {
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%, #1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
}
p {
filter: drop-shadow(1px 1px 2px #000);
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>

Try using pseudo-elements
.HalfColor {
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%, #1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
p.HalfColor {
position: relative;
}
p.HalfColor:after {
content: 'TEST!';
position: absolute;
top: 0;
left: 0;
text-shadow: 1px 1px 2px #000;
z-index: -1;;
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>

Make a css animation cross-browser

I have the css animation which works only in Chrome. How can I make it cross-browser? Below is the code and the jsfiddle of it:
HTML:
<div class="main-nav">
<a href="#">
<div id="outer">
<p>Hello!!!</p>
</div>
</a>
</div>
SCSS:
.main-nav {
font-size: 250%;
width: 280px;
margin: 0 200px;
text-shadow: 2px 1px 6px lighten(#141414, 50%);
color: #141414;
a {
text-decoration: none;
}
#outer {
background:linear-gradient(to right, #1abc9c 50%, #444 50%);
background-size:200% 100%;
background-position:right bottom;
font-size:64px;
text-align:center;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
transition:all 1s;
&:hover {
background-position:left bottom;
cursor:pointer;
}
}
}
Jsfiddle: http://jsfiddle.net/yakovenkodenis/jq4rb3ox/3/
(It works correctly only in Chrome!)

The background-clip: textproperty is only supported in webkit (safari and chrome), so there is no way for this to work in other browsers. You could try making an svg and animating the fill of that, although hopefully other browsers will adopt this someday.

CSS3 - Transparent text through `div`?

I was looking for this.
But when I tried it, it won't work.
The text is transparent, but not through the div, which is the big idea.
Fiddle
.title1_background {
background-color: rgba(255, 255, 255, 0.8);
height: 20%;
width: 100%;
position: fixed;
bottom: 8%;
margin: 0;
left: 0;
text-align: center;
}
.title1_background h1 {
font-size: 400%;
display: block;
-webkit-text-fill-color: transparent;
}

The better way is to use two images.
The background image and the image with hollow text above it.
You can achieve the same using -webkit-text-fill-color: transparent; but this would only work with browsers supporting -webkit.
see this link it works fine in chrome since it supports -webkit but won't work in firefox.
See the browsers and their versions that support -webkit
We should always prefer to design and develop that supports cross browser compatibility.

Try This link
<div id="outer">
<div id="wrapper">
<div id="inner">TEXT</div>
</div>
CSS
#outer {
width:300px;
height:300px;
background-image: url(http://www.placekitten.com/300/300);
overflow:auto;
}
#wrapper {
background: #fff;
margin: 100px 0;
opacity:0.6;
}
#inner {
font: bold 60px Arial;
text-align:center;
margin:20px;
background-color: #fff;
background-image: url(http://www.placekitten.com/300/300);
background-position: 280px 201px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#outer:hover{
border:solid 2px #4072B4;
}

Kerning on font between chrome and firefox

I am working on a menu with a custom font and in chrome (and safari) it is spaced exactly how I want it.
http://american-motorsports.net/2012/
When I view it in firefox, the kerning of the font is a little different causing a little black gap on the far right menu item. I can see the difference between the F and A in FABRICATION
The HTML is very simple right now:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/css/reset.css" />
<link rel="stylesheet" href="resources/css/main.css" />
<title><?php echo date('M d, Y') . ' | '; ?>American Motorsports - Off-Road Fabrication</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img src="resources/images/logo.png" width="291" height="150" alt="American Motorsports - Off-Road Fabrication" />
</div>
<div id="menu">
<span class="item">HOME</span><span class="item">SUSPENSION</span><span class="item">FABRICATION</span><span class="item">PROJECTS</span><span class="item">MEDIA</span><span class="item">CONTACT</span>
</div>
</div>
<div id="main"></div>
</div>
</body>
</html>
and the CSS consists of this so far
#font-face {
font-family: bebas;
src: url("../fonts/bebas.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
font-size: 14px;
color: #ccc;
line-height: 20px;
margin: 0;
padding: 0;
background: url("../images/bg.png") #202020;
}
#wrap {
background: url("../images/bg_main.jpg") no-repeat center top;
min-height:800px;
}
#header {
border-top: 5px solid #3a3a3a;
height:150px;
width:970px;
background-color:#000000;
margin: 50px auto;
}
#logo {
width:324px;
height:179px;
background-color:#121212;
border-top: 5px solid #3a3a3a;
border-bottom: 5px solid #ffffff;
margin-top:-22px;
float:left;
}
#logo img {
margin-left:13px;
margin-top:17px;
}
#menu {
width:646px;
height:150px;
float:right;
margin:0;
padding:0;
}
#menu a {
margin:0;
padding:0;
}
.item {
font-family:bebas;
font-size:18px;
height:150px;
display:inline-block;
text-align:center;
line-height:8em;
color:#fff;
cursor:pointer;
padding-left:20px;
padding-right:20px;
margin:0;
text-shadow: 0 3px 3px #111;
}
.item:hover {
background: -moz-linear-gradient(top, #3a3a3a 0%, #101010 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#101010));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: linear-gradient(to bottom, #3a3a3a 0%,#101010 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#101010',GradientType=0 );
}
#main {
width:970px;
/*background-color:#ffffff;*/
margin: 0 auto;
}
So the question is how to remove the gap so it looks like chrome and safari or fix the kerning issue..I just dont want that gap in firefox

You'd have to wrap a span around the offending letters and tweak the CSS letter-spacing: property until you get what you want.
The finesse of good typography, especially when it comes to custom fonts, isn't quite ready for prime-time on browsers.
Plan B: use an image.

A quick dirty solution is
#menu{
white-space: nowrap;
overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}
Ideally though, you shouldn't be relying on the width of the font to make your menu look right.
If you have the time, give each of these links a class, and a custom width.
Or even better, use a list with links in each item, to get greater control.
For example, if you add:
.item{
padding: 0;
width: 16.66%; /* assuming you always have 6 links */
}
...they will always fit, but some will look rubbish.
For the most professional-looking finish, you'll want to give each a class and custom width.

I don’t see what gap you are trying to remove, but what you are describing is the issue that Firefox (modern versions) apply kerning by default, if defined in a font. Other browsers don’t. So it’s a matter of kerning vs. no kerning, not a difference in kerning. Kerning is generally considered as typographically desirable. But if you really want to prevent Firefox from kerning, that’s possible using font feature settings, e.g. in this case with
#menu { -moz-font-feature-settings: "kern" 0; }

Yet another centering div alignment issue

I'm new to using CSS and have experience with old HTML, last time I designed a site was in 2002.
So i've been designing a new personal website for the past few days without a problem until i tried viewing my site in Internet Explorer (8 & 9).
After 2 whole days of searching for answers i've decided to ask for help. The site was looking as intended in Firefox and Chrome and i've just been tearing my hair out over it. The only thing i know for certain is adding the !doctype breaks it in both ie9 and ff.
I would love to have someone more experienced take a look at my code.
Hope to read a response soon.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Nivo Slider Theme loading -->
<link rel="stylesheet" href="themes/sarrus/sarrus.css" type="text/css" media="screen"/>
<TITLE>Sarrus Design Works</TITLE>
<!-- Layout CSS Link -->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</HEAD>
<BODY>
<div id="wrapper">
<div id="header" class="gradient">
<img style="border:solid 2px #202020;" src="img/sdw-logo.jpg">
</div>
<!-- Nivo Slider Body attachment -->
<div id="content">
<div class="slider-wrapper theme-sarrus">
<!-- Add div class="ribbon" if theme contains ribbon -->
<div id="slider" class="nivoSlider">
<img src="img/slider1.jpg" alt=""/>
<img src="img/slider2.jpg" alt=""title="#htmlcaption" />
<img src="img/slider3.jpg" alt=""title="This is an example of a caption" />
<img src="img/slider4.jpg" alt=""/>
</div>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
<div id="content2">
</div>
<div id="details">
All artwork is copyright of Mike Williams. Fanart original characters are copyright belonging to their respective owner.
</div>
</div>
</BODY>
<!-- place scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:1000, // Slide transition speed
pauseTime:6000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:false, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.7, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next' // Next directionNav text
});
});
</script>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</HTML>
and CSS
html {
height: 100%;
font-family:arial;
}
body {
text-align: center;
marginleft: ;
background-repeat: no-repeat;
padding:0;
background: #ffffff;
background: -moz-linear-gradient(top, rgba(136,110,191,0.76) 2%, rgba(136,110,191,0) 54%, rgba(136,110,191,0) 67%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(136,110,191,0.76)), color-stop(54%,rgba(136,110,191,0)), color-stop(67%,rgba(136,110,191,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2886ebf', endColorstr='#00000000',GradientType=0 );
}
* {margin:0; padding:0;}
/* ----- Nivo Slider Settings ---- */
.nivoSlider {
background:url(img/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
text-align:left;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#Wrapper {
text-align:left;
width: 850px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header {
position:relative;
z-index:50;
width:120px;
height:170px;
margin-left:30px;
border:solid 1px #404040;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: rgb(125,126,125);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
}
#slider {
margin: 0 auto;
width:846;
height:433;
}
#content {
border:1px solid #b4b4b4;
padding:5px;
z-index:1;
width:100%;
margin-top:-85px;
background-color:#e9e9e9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
}
#content2 {
border:1px solid #b4b4b4;
padding:5px;
z-index:1;
width:100%;
height:200px;
background-color:#E9E9E9;
margin-top:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
}
#details {
padding:6px;
width:100%;
text-align:center;
font-color:#b4b4b4;
font-filter:soft;
font-size:8px;
}
Sorry about the big post ^^ not sure what information you would need.

it looks like the .nivo-caption is getting its width based on body, because none of its parents have position: relative.
Are you able to set position: relative to the .nivo-slider element?

Resources