I'm new to css, I have a top nav but I couldn't set its width. It seems different when I test with Dreamweaver, ie9, ie6, Firefox and Opera. Here's my code:
#charset "utf-8";
/* CSS Document */
html {
background: url(images/light-tile.gif) repeat;
}
body {
overflow: auto;
width: 54.35em;
margin: 0 auto;
background-color: #fff;
padding-left: 0.25em;
padding-right: 0.4em;
border: 0.07em solid #97b4e0;
overflow: visible;
}
#main {
background-color: #fff;
}
ul#top-nav {
list-style: none;
margin: .9em .9em .9em 0;
padding: 0;
width: 110%;
}
ul#top-nav li {
display: inline;
}
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
ul#top-nav li a:hover {
color: #000;
font-weight: bolder;
background: #D7EBFF;
border-bottom: 0.2em solid #e9e9e9;
}
...
<body>
<div id="main">
<div id="top-info">Kumcuğaz Köyü İlköğretim Okulu</div>
<img id="top-image" src="../images/top_image.png" alt="üst resim" width="869" height="159" />
<ul id="top-nav">
<li>ANASAYFA</li>
<li>GALERİ</li>
<li>PERSONEL</li>
<li>İLETİŞİM</li>
<li>ZİYARETÇİ DEFTERİ</li>
</ul>
<div class="clear"></div>
<div id="faux">
...
If it isn't possible it to view same on all browsers, I'll have to use a table. Thanks for helping.
Sincerely
What's the reason for making it 110% wide? That's wider than the window. Also, you have 5 menu items each set to 18.5% wide... that adds up to only 90.5% total.
What happens when you make it 100% wide and each of the 5 items is 20% wide?
http://jsfiddle.net/u78Ks/2/
It looks like this might be the issue
width: 18.5%; /* for 5 items */
in here
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
Browsers could be interpreting this differently based on the font sizes, window sizes, etc.
Try setting this to a static width in pixels.
Related
I am having difficulty aligning the divs in the middle of the page. Hence I have used absolute positioning to place them in the middle.But when I try to do media queries its difficult to place them in the middle. Please any help is appreciated.
nav>ul {
position: absolute;
top: 114px;
text-align: center;
;
}
nav>ul>li {
list-style: none;
float: left;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 45px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>
You were close. Just remove position: absolute from nav>ul, and remove the float: left from nav>ul>li and replace it with display: inline-block.
nav>ul {
padding-top: 10px;
text-align: center;
}
nav>ul>li {
list-style: none;
display: inline-block;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 40px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>
Flexbox can be one way to go. Here a quick JS Fiddle that shows you how you can achieve what you want: https://jsfiddle.net/58u76mrn/13/
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100vw;
}
nav a {
text-decoration: none;
font-family: 'Abel',sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
}
Check this js fiddle
https://jsbin.com/geqovukozo/edit?css,output
nav{
position:absolute;
top:50%;
width:100%;
transform:translateY(-50%);
}
nav>ul {
text-align: center;
font-size:0;
}
nav>ul>li {
list-style: none;
display:inline-block;
}
nav>ul>li>a {
display:block;
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
border-bottom: 45px solid #20639B;
}
Use positions with transform property in this case. and instead of float:left; use display:inline-block;
I have a navigation bar that includes the usual links, and to improve the user experience I have a bottom border show on hover:
I achieve this with the following code:
body {
background-color: #E9EBEE;
color: #666666;
margin: 0px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
}
.nav {
padding-top: 50px;
padding-bottom: 5px;
margin-top: 2em;
margin-bottom: 6em;
background-color: #F6F7F9;
color: #666666;
font-size: 1.5em;
line-height: 1.5;
text-align: center;
}
.nav > .links {
margin-top: -36px;
border-left: solid 1px #E9EBEE;
font-size: 0.8em;
}
.nav > .links > .link {
float: left;
position: inherit;
border-right: solid 1px #E9EBEE;
border-bottom-width: 2px;
width: 8em;
transition: border-color .2s;
}
.nav > .links > .link:hover {
border-bottom: solid;
border-bottom-color: #3B5998;
border-bottom-width: 2px;
color: #3B5998;
}
<body>
<div class="nav">
<div class="links">
<div class="link">
Servers
</div>
</div>
</div>
</body>
I'd like the border to be on the bottom of nav; to do this I added padding-bottom:11px; to .nav > .links > .link, which resulted in this:
The result is exactly what I wanted, however notice that the right and left borders of each navigation item has been extended; something that I should've realised would happen when adding the padding-bottom attribute to .nav > .links > .link.
To fix this I thought that I could use a border-bottom-height since there is a border-bottom-width but apparently no such thing exists, and I don't want to use an additional element if possible to provide the left & right borders. As seen in the first image, the left and right borders should be approximately the height of the text contained.
Is this possible without an additional 'wrapper' element?
Use a pseudo element instead, i.e. ::after (if to support IE8, use :after, works cross browser)
body {
background-color: #E9EBEE;
color: #666666;
margin: 0px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
}
.nav {
padding-top: 50px;
padding-bottom: 5px;
margin-top: 2em;
margin-bottom: 6em;
background-color: #F6F7F9;
color: #666666;
font-size: 1.5em;
line-height: 1.5;
text-align: center;
}
.nav > .links {
margin-top: -36px;
border-left: solid 1px #E9EBEE;
font-size: 0.8em;
}
.nav > .links > .link {
float: left;
position: relative;
border-right: solid 1px #E9EBEE;
border-bottom-width: 2px;
width: 8em;
transition: border-color .2s;
}
.nav > .links > .link:hover::after {
content: '';
position: absolute;
top: calc(100% + 11px);
left: 0;
width: 100%;
height: 2px;
background: #3B5998;
}
<body>
<div class="nav">
<div class="links">
<div class="link">
Servers
</div>
</div>
</div>
</body>
There are many ways to do this. In most cases, the simplest and cleanest option would be to create a pseudo-element (as suggested by LGSon), but sometimes this isn't possible. For example, you may already have used both pseudo-elements for other effects, or you may not be able to position it properly (notice that the pseudo-element method requires you to set the .link element's position property to relative -- this may not always be possible for your layout).
Below is an alternative technique, using box-shadow. It has its own drawbacks, most notably that it only works when working with a solid-color background.
The idea is simple: draw two box-shadows (since they can stack!) on the hovered element. The bottom one is two pixels taller than the top one. The bottom one is blue, the top one is the same color as the nav bar.
body {
background-color: #E9EBEE;
color: #666666;
margin: 0px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
}
.nav {
padding-top: 50px;
padding-bottom: 5px;
margin-top: 2em;
margin-bottom: 6em;
background-color: #F6F7F9;
color: #666666;
font-size: 1.5em;
line-height: 1.5;
text-align: center;
}
.nav > .links {
margin-top: -36px;
border-left: solid 1px #E9EBEE;
font-size: 0.8em;
}
.nav > .links > .link {
float: left;
position: inherit;
border-right: solid 1px #E9EBEE;
border-bottom-width: 2px;
width: 8em;
transition: border-color .2s;
}
.nav > .links > .link:hover {
color: #3B5998;
box-shadow:
0 11px 0 #F6F7F9,
0 13px 0 #3B5998;
}
<body>
<div class="nav">
<div class="links">
<div class="link">
Servers
</div>
</div>
</div>
</body>
I'm sort of a noob to developing websites, but hope to learn more. The problem I'm having is that my main page content goes under my footer if the page holds more and more content. ( https://i.imgur.com/LeqVBwl.png )
Either I'm doing something wrong, or I'm just missing something but, here's how I did it:
How could I fix this? Do I have to add/remove something?
The "position: absolute" is so it says at the bottom
CSS:
body {
margin: 0 0 65px;
background: #000000 url(../images/bg.png);
padding-bottom: 65px;
}
#menu {
height: 50px;
padding-left: auto;
padding-right: auto;
background: #ccc no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
float: left;
padding: 18px;
margin-right: 1px;
background: lightgray no-repeat;
text-decoration: none;
font-size: 10px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
background: darkgray;
}
.main {
width: 1300px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border: 1px black solid;
}
.content {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-right: auto;
border: 1px solid #ccc;
width: 800px;
float: left;
background: white;
border-radius: 2px;
}
.content h2 {
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #ccc;
text-align: center;
}
.sidebar {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-left: 30px;
margin-right: auto;
border: 1px solid #696969;
width: 300px;
float: right;
background: #EDEDED;
border-radius: 2px;
}
.sidebar h2 {
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid #ccc;
text-align: center;
}
#footer {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: #ccc no-repeat left;
border-top: 3px solid;
left: 0;
bottom: 0;
height: 65px;
width: 100%;
}
#footer .footer-content {
font-weight: bold;
color: #262626;
font-size: 14;
}
#footer .footer-content a {
color: #545454;
text-decoration: none;
font-size: 14px;
}
#footer .footer-content a:hover {
color: #6E6E6E;
text-decoration: none;
font-size: 14;
}
HTML:
<div id="footer">
<div class="footer-content">
<center>
Home | Forums | Contact | Signup |Login
</center>
</div>
</div>
Fixed
I seemed to have fixed my problem. I just added:
<div style="clear: both;"> </div>
It's because you're footer has position: absolute; applied, this means it jumps out of the normal flow of the page. To fix it, add a padding equal to the height of the footer to the bottom of the page.
body {
padding-bottom: 65px;
}
I have this JsFiddle, and I can not figure out why the buttons extend outside of the divs.
How can I get them to be inside of the divs?
Here is the CSS
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
Here is the HTML:
<div class="left-nav">
<div>new story
</div>
<div>My Stories
</div>
</div>
You can specify display:inline-block; on the buttons, so the div expands to hold the anchors completely.
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
display:inline-block;
}
Fiddle
div.left-nav > div {
overflow: auto; /* removed clear: both; */
width: 100%;
border: solid 1px red;
}
div.left-nav > div > a {
display: inline-block;
}
http://jsfiddle.net/ZjvZu/10/
Hey hope this works for you : -
demo
<div class="left-nav">
<div class="btn">new story
</div>
<div class="btn">My Stories
</div>
CSS:-
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
.btn{
padding:8px 15px 8px 15px;
}
** EDIT November 17th **
Hi again, I wanted to show some code you can use to gracefully solve this issue. Make a blackbird.js file with the line commented out as mentioned in the accepted answer. Place it somewhere in your webapp directory (I put mine in /scripts/blackbird_1_0) along with the other Blackbird resources (blackbird_icons.png, blackbird_panel.png,blackbird.css, spacer.gif) and then add this as the configuration for blackbird as below. If you happen to use 5.2 and beyond, you might want to consider just disabling Blackbird altogether, I personally would love to do this but am stuck on 5.1 due to company restraints.
//IE bug fix
configuration.add("tapestry.blackbird", "context:/scripts/blackbird_1_0/");
// configuration.add(SymbolConstants.BLACKBIRD_ENABLED, "false"); Not available until 5.2
** END Edit **
I have a gradient background image in my web application, it goes from dark at the top to light at the bottom. In Firefox, this image is handled properly, where upon scrolling vertically downwards on the page, the dark top section disappears.
However, when I started testing in IE (I'm using IE8) the background image stays fixed behind the screen as you vertically scroll, meaning the dark top section of the background image is always rendered at the top of the IE view.
I've set the background tag to have scroll defined, which from all I can tell should solve the problem, but IE is not happy.
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
I made sure to be clearing the data in IE in case it was caching the old style before I added scroll.
Textual representation of issue (x = darkest, o = dark, _ = light, - = lightest)
Firefox:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
--------------------------------------
--------------------------------------
--------------------------------------
IE:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
Current CSS:
body {
margin: 0;
padding: 0;
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
}
Source of a page with the issue:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
<title>Merchant / Partner Login</title>
<link type="text/css" rel="stylesheet" href="/assets/tapestry/5.1.0.5/default.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/blackbird/5.1.0.5/blackbird.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/ctx/1.0-SNAPSHOT/layout/layout.css"></link>
<meta content="Apache Tapestry Framework (version 5.1.0.5)" name="generator"></meta>
<script src="/assets/scriptaculous/5.1.0.5/prototype.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/scriptaculous.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/effects.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry.js" type="text/javascript"></script>
<script src="/assets/blackbird/5.1.0.5/blackbird.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry-messages.js" type="text/javascript"></script>
</head>
<body><!-- start header -->
<div id="header">
<div id="logo">
<h1></h1>
</div>
<div id="menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li class="current_page_item">d</li>
<li>e</li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li style="background: none;" id="search"></li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2>Merchant / Partner Login</h2>
</div>
<div class="entry">
<!-- Most of the page content, including <head>, <body>, etc. tags, comes from Layout.tml -->
<!-- snip content -->
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer --><div id="footer"><p class="legal"></p></div><!-- end footer -->
</body>
</html>
Added after isolating issue to Tapestry component tags
Find the Tapestry built in CSS below, somewhere in here there must be a line that is breaking the ability of body to use scroll on the background image?
/* Tapestry styles all start with "t-" */
DIV.t-error {
border: 1px solid red;
padding: 0px;
margin: 4px 0px;
}
DIV.t-error DIV {
padding: 2px;
display: block;
margin: 0px;
background-color: red;
color: white;
font-weight: bold;
}
DIV.t-error UL {
margin: 2px 0px;
background-color: white;
color: red;
}
DIV.t-error LI {
margin-left: 20px;
}
HTML>BODY DIV.t-error LI {
margin-left: -20px;
}
.t-invisible {
display: none;
}
LABEL.t-error {
color: red;
}
INPUT.t-error, TEXTAREA.t-error {
border-color: red;
font-style: italic;
color: red;
}
IMG.t-error-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(field-error-marker.gif);
}
IMG.t-autoloader-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(ajax-loader.gif);
}
IMG.t-sort-icon {
margin-left: 4px;
}
DIV.t-exception-message {
font-style: italic;
font-size: 12pt;
border: thin dotted silver;
margin: 5px 0px;
padding: 3px;
}
DIV.t-exception-report, DIV.t-env-data {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-exception-report LI {
margin-left: -40px;
}
DIV.t-exception-report DT, DIV.t-env-data DT {
color: green;
padding-left: 2px;
background-color: #FFFFCF;
}
DIV.t-exception-report LI {
list-style: none;
}
SPAN.t-exception-class-name {
display: block;
margin-top: 15px;
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
SPAN.t-exception-stack-controls {
display: block;
float: right;
}
UL.t-stack-trace LI {
font-family: Monaco, Times, monospace;
font-size: 10pt;
margin-left: -25px;
list-style: square;
}
LI.t-usercode-frame {
font-weight: bold;
color: blue;
}
LI.t-omitted-frame {
display: none;
color: gray;
list-style: square;
}
H1.t-exception-report {
font-family: "Trebuchet MS", Arial, sans-serif;
color: red;
}
DIV.t-exception-report DT:after {
content: ":";
}
DIV.t-exception-report DD, DIV.t-env-data DD {
margin-left: 10px;
}
TABLE.t-data-table {
border-collapse: collapse;
margin: 0px;
padding: 2px;
}
TABLE.t-data-table TH {
background-color: black;
color: white;
}
TABLE.t-data-table TD {
border: 1px solid silver;
margin: 0px;
}
DIV.t-beaneditor {
display: block;
background: #ffc;
border: 2px outset brown;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-beaneditor-row {
padding: 4px 0px 2px 0px;
}
DIV.t-beaneditor-row LABEL:after {
content: ":";
}
DL.t-beandisplay {
display: block;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
background: #CCBE99;
border: 2px outset black;
width: auto;
}
DL.t-beandisplay DT {
width: 250px;
display: inline;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
DL.t-beandisplay DT:after {
content: ":";
}
DIV.t-beaneditor-row LABEL {
width: 250px;
display: block;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
INPUT.t-number {
text-align: right;
}
DIV.t-beandisplay DIV.t-beandisplay-label {
padding-right: 5px;
}
TABLE.t-data-grid THEAD TR {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid THEAD TR TH {
text-align: left;
padding: 3px;
white-space: nowrap;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
TABLE.t-data-grid {
border-collapse: collapse;
border-left: 1px solid silver;
}
TABLE.t-data-grid TBODY TR TD {
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 2px;
}
DIV.t-data-grid {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-data-grid-pager {
margin: 8px 0px;
}
DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
text-decoration: none;
color: black;
padding: 2px 5px;
font-size: medium;
border: 1px solid silver;
margin-right: 5px;
}
DIV.t-data-grid-pager A:hover {
border: 1px solid black;
}
DIV.t-data-grid-pager SPAN.current {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid TR TH A {
color: white;
}
IMG {
border: none;
}
DIV.t-env-data-section {
padding-left: 5px;
}
DIV.t-env-data DD, DIV.t-exception-report DD {
margin-left: 25px;
margin-bottom: 10px;
}
DIV.t-env-data LI {
margin-left: -25px;
}
DIV.t-env-data-section {
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
TABLE.t-location-outer {
padding: 5px;
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}
TD.t-location-line {
width: 40px;
text-align: right;
padding: 0px;
background-color: #E1E1E1;
padding-right: 3px;
border-right: 1px solid black;
}
TD.t-location-content {
border-top: 1px solid silver;
border-right: 1px solid black;
white-space: pre;
}
TD.t-location-current {
background-color: #FFFFCF;
}
TD.t-location-content-first {
border-top: 1px solid black;
}
DIV.t-palette {
display: inline;
}
DIV.t-palette SELECT {
margin-bottom: 2px;
width: 200px;
}
DIV.t-palette-title {
color: white;
background-color: #809FFF;
text-align: center;
font-weight: bold;
margin-bottom: 3px;
display: block;
}
DIV.t-palette-available {
float: left;
}
DIV.t-palette-controls {
margin: 5px 5px;
float: left;
text-align: center;
}
DIV.t-palette-controls BUTTON {
display: block;
margin-bottom: 3px;
}
DIV.t-palette-controls BUTTON[disabled] IMG {
filter: alpha(opacity = 25);
-moz-opacity: .25;
}
DIV.t-palette-selected {
float: left;
clear: right;
}
DIV.t-palette-spacer {
clear: left;
}
IMG.t-calendar-trigger {
padding-left: 3px;
cursor: pointer;
}
DIV.t-autocomplete-menu {
z-index: 9999;
}
DIV.t-autocomplete-menu UL {
border: 2px outset #cc9933;
background-color: #cc9933;
padding: 4px 6px;
overflow: auto;
}
DIV.t-autocomplete-menu LI {
color: white;
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;
cursor: pointer;
}
DIV.t-autocomplete-menu LI.selected {
color: black;
font-weight: bold;
}
DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.gif') no-repeat;
display: block;
line-height: 28px;
margin-left: 0px;
padding: 0px 5px 10px 22px;
}
HTML>BODY DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.png') no-repeat;
}
DIV.t-error-popup {
background: transparent url('error-bevel-right.gif') no-repeat scroll top right;
cursor: pointer;
color: #FFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 39px;
margin-right: 6px;
padding-right: 29px;
text-decoration: none;
}
HTML>BODY DIV.t-error-popup {
background: transparent url('error-bevel-right.png') no-repeat scroll top right;
}
UL.t-data-list LI {
list-style-type: square;
}
DIV.t-loading {
display: inline;
width: auto;
font-weight: bold;
padding-right: 20px;
background: transparent url(ajax-loader.gif) no-repeat right top;
}
DIV.t-dialog-overlay {
position: fixed;
margin: auto;
top: 0px;
left: 0px;
z-index: 9990;
width: 100%;
height: 100%;
background: transparent url("dialog-background.gif");
}
DIV.t-page-loading-banner {
position: absolute;
top: 5px;
left: 5px;
width: auto;
font-weight: bold;
padding: 2px 4px 2px 24px;
color: black;
background: white url(ajax-loader.gif) no-repeat 4px center;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
This is an old query and you probably have an answer by now but I had this problem whenever some js was included in a page (even unintentionally), blackbird.js was being included (the client-side debug div provided by Tap) - it has some IE specific code that stops the bg image being fixed - I had to use my own local patched version of blackbird.js to get around the issue. Comment Line 117 blackbird.js:
bodyTag.style.backgroundAttachment = 'fixed';
By doing the following,
body
{
background: url( yourBG ) repeat-x;
}
you should not have any problem... Your background will scroll as intended.
If this wasn't helpful, try updating your question by adding some more code example of what you're doing.
ADDED AFTER POSTING COMMENTS :
HTML :
<body>
<div id="background"></div>
<div id="yourContent">
...
</div>
</body>
CSS :
#background
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(images/bg_slice.png) repeat;
z-index: 1;
}
...
I've used that approach more than once, so I am positive it SHOULD work.