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; }
Related
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>
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.
I have created a navbar that i wish to make it 100%.
Here is my HTML code for better clarity
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<title>iPolice</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<ul id="nav" >
<li>Home</li>
<li>About</li>
<li>Department</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</head>
However, despite putting width:100%; It still remain the same.
I was hoping that all my 5 choices will be centered and divided evenly like this. However, i'm not even able to do it without my width being 100%.
This is the CSS of my navbar
#nav {
position:absolute;
left:0%;
top:0%;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
I also have tried to change the #navbar's position to relative. However, the navbar's left, top position wont be 0% as what my code written. I cant really see anything that is holding my navbar from becoming 100%.
I have also tried nesting my navbar in a different CSS attributes with width as 100% as well
<div id="navbarwidth">
<ul id="nav" >
<li>Home</li>
<li>About</li>
<li>Department</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</div>
CSS
#navbarwidth {
width:100%;
position:absolute;
}
as icktoofay said, your #nav element is occupying the whole width, but the elements within it are floated left, and the nav has no background, so it looks like it isn't. Here's a fixup:
http://jsfiddle.net/DgceP/
remove the float on the li and a elements and set them to display: inline-block
move the background gradient to #nav
set text-align: center on #navbarwidth
set a min-width on the li elements so they will have similar widths ( except very long ones )
If you don't want the menu to wrap on small screens, set a min-width on #navbarwidth or #nav
#navbarwidth {
width:100%;
position:absolute;
text-align: center;
}
#nav {
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
position:absolute;
left:0%;
top:0%;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
display: inline-block;
min-width: 70px;
}
#nav li {
list-style: none;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
Your navigation bar is taking up all the horizontal space – it's just that
it has no height; and
you haven't applied a background to see it.
These problems have rather obvious solutions:
Apply an explicit height to the navigation bar and its elements.
Apply a background.
The items still won't be centered because you're doing float: left, but that's a different problem.
The problem is most likely because your navbar is within a div that has a finite width. Therefore, setting the navbar width to 100% only lets it fill the div it is in (not the entire page).
If this is indeed the case, simply take the navbar out of the parent div or adjust the parent div in some way. (i.e. center it, or make its width bigger)
How to stylize input box like image below using pure "CSS". I know this can be done via jquery, but I am enthusiast if there is way to do so using CSS. I took image from Android's Developer website.
What I did is HTML,
<form>
<label>Email Address: </label>
<div class='left'></div>
<input type='text' class='input'/>
<div class='right'></div>
</form>
And CSS,
.left {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
}
.right {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
margin-left:-1px;
}
.input {
display:inline-block;
height:30px;
font-size:16px;
width:250px;
border:1px solid #ccc;
border-width:0px 0px 1px 0px;
padding:0px 5px;
outline:none;
}
.input:hover, .input:focus {
border-color:#4ab5d9;
}
What I am trying is => Also on jsfiddle link
The only problem is, I can't found way to change the color of left and right border on hover & on focus.
One option is this
I used the sibling selector to get the hover and focus working:
.input:hover, .input:focus,
.input:hover + .right,
.input:focus + .right {
border-color:#4ab5d9;
}
and removed the "left" div. Then made these changes to the right one:
margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;
I was having the same problem, and I've just created a style like this that doesn't require additional markup. See http://codepen.io/killercup/pen/CBeAq for a demo.
My solution was to use multiple background images (actually, linear-gradient) which are resized using background-size. It works on Android 4.3, but I haven't tested it on any other mobile platform.
The following works in Chrome (and supports focus/hover color changes) using the background CSS property without any additional tags in the HTML:
HTML:
<input type='text' class='holo'></input>
CSS:
input.holo[type='text'] {
/* You can set width to whatever you like */
width: 200px;
font-family: "Roboto", "Droid Sans", sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 8px 6px 8px;
position: relative;
display: block;
outline: none;
border: none;
background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
Demo: http://jsfiddle.net/QKm37/
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?