|
CSS - Background Color Not Displayed On Firefox And Ie
Hello there.
I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE Can anyone help? .navbar { width: 960px; line-height: 30px; background-color: silver; z-index:100; display: block; clear: both; } .navbar ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; z-index:100; } .navbar ul li { display: block; position: relative; float: left; width: 120px; font-weight: bolder; z-index:100; } .navbar li ul { display: none; line-height: 20px; z-index:100; } .navbar ul li a { display: block; text-decoration: none; color: #48fc30; padding: 4px 15px 4px 15px; background: #silver; margin-left: 1px; } .navbar ul li a signup { background: #black; } .navbar ul li a:hover { background: #grey; } .navbar li:hover ul { display: block; position: absolute; } .navbar li:hover li { float: none; font-size: 11px; } .navbar li:hover a { background: #red; } .navbar li:hover li a:hover { background: #blue; } Similar TutorialsHello all, When viewing in IE my background is dark red like it's suppose to be. When viewing the same site in Firefox the background is white. Firefox is not seeing that portion of code within my CSS file. Can someone shine some light for me? Thanks in advance!! Please help I need Please send me a message for URL. For some odd reason Dev won't allow me to post a link to my site for you. I have the following code, in the sidebar DIV in Firefox the background does not show up, it does in IE7. What have I done wrong? CSS code: Code:
#content {
margin-left: 25px;
background: #fff;
width: 990px;
padding: 15px 20px 20px 20px;
}
#blog {
padding: 0;
margin-right: 40px;
background: #fff;
width: 660px;
color: #545454;
float: left;
padding-top: 5px !important;
}
#sidebar {
width: 250px;
padding: 8px;
background: #ccc;
}
XHTML/HTML code: Code:
<div id="content">
<div id="blog">
blah blah blah
</div>
<div id="sidebar">
<h2>blah</h2>
blah blah blah
</div>
</div>
I've been looking it at for a while, and while it's probably something minor I'm just simple over looking, I can't figure it out. Everything works, is in the correct place, except the grey background (#ccc) isn't showing up on the sidebar. After years of developing, I finally decided to ditch the tables and use CSS properly for formatting. Things are going well, but I've run into a few odd problems. One is this one - I've chomped the page right down to illustrate the problem. In IE, the page renders as I'd hope, a bg color showing right across the page, with the left & right cols within that. In Firefox, the bg color renders, but STOPS where the left & right cols display. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hmmm...</title>
<style type="text/css">
<!--
body {
background-color: #403E3E;
margin: 0px;
padding: 0px;
}
#pagebodywrapping {
background-color: #A3AAAF;
margin: 0px;
padding: 0px;
width: 100%;
}
#pagebody {
margin: 0px auto;
padding: 0px;
width: 750px;
}
#pagebody .leftcol {
margin: 0px 0px 0px 0px;
padding: 0px;
width: 499px;
border-right: 1px solid #fff;
background-color: #FFF;
float:left
}
#pagebody .rightcol {
margin: 0px 0px 0px 0px;
width: 250px;
background-color: #5D757E;
float:left;
}
-->
</style>
</head>
<body>
<div id="pagebodywrapping"><br>
<div id="pagebody"><br>
<div class="leftcol"><br></div>
<div class="rightcol"><br></div>
</div>
</div>
</body>
</html>
I'm sure it's something very simple, but for the life of me, I can't figure it out. I've searched around to no avail either. ANY help would be very much appreciated. Thanks in advance. Im setting the background color of a division to #FFFFFF which in IE is perfectly white as you would expect. However in firefox it is coming out as a really faint green colour. Is this because of the way ive coded it or is this a problem with firefox? Hi; i don't known why background color does not cover over all the boxs in Firefox but IE does, could anyone help, please. my code as following Code: <!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">
<style type="text/css">
html,body{
padding: 0;
margin:0;
}
#container {
position: relative;
width: 796px; /* width + border for IE 5.x */
w\idth: 790px; /* real width */
height: auto;
border: 0px;
padding: 0;
margin-top: 10px;
margin-bottom:auto;
margin-left: auto;
margin-right: auto;
background-color:#f0f0ec;
}
#wrapper{
margin: auto;
border:0;
padding:0;
width: 640px;
height:auto;
}
.box{
border:0;
padding:0;
width:190px;
height:220px;
float: left;
margin-left:15px;
margin-top:20px;
background-color:#FFFF99;
color:#333333;
text-align:center;
overflow:scroll;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
//in here i am goning to use while loop to select all the data from database, so i may have 30 boxs, or 50boxs.
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
</div>
</div>
</body>
</html>
I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF. Can someone please give me a clue what is wrong. I have searched all the CSS books and the internet but I cannot find an answer. Thanks in advance. The URL is http://www.childrens-stories.me.uk/ I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox. css code for the body tag is: body { background-color: #0d005e; background-image: url('images/bgmain.jpg'); background-repeat: repeat-x; } Any thoughts? I made this administration system in php.. its a site php site with a table with a menu, under it is a iframe.. the code for the iframe = Code: <iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" width="524" height="100%" src="news.php"></iframe> then the news.php seems to fail when i scroll in firefox, since the bg in the iframe changes from #F4F4F4 to #FFFFFF in the new space thats uncovered when i scroll.. the bgcolor and bgimage is defined by css, heres the code: Code:
.bodyiframe {
background-color: #F4F4F4;
background-image: url(../images/bgiframe.gif);
background-repeat: repeat-x;
background-position: top;
background-attachment: fixed;
}
It works fine in explorer 7, but firefox 0.8 cant handle it!.. plz help Firefox ignores the white background in the "main" <div> in the following, but IE, Opera and Safari/Win all display the white background. Is this a firefox bug, or am I missing something here? Note: The z-indexes are for when the "main" div is scrolled... Also note: I am making the <body> tag relatively positioned because otherwise, Firefox (apparently) treats the viewport as the parent to the absolute-positioned element. In that case, it renders the white background until the bottom of the window, but reverts back to black "below the fold" because bottom: 0 is interpreted as the bottom of the window. Code:
<html>
<head>
<style type="text/css">
body {background: black; color: silver; position: relative}
div#header {position: fixed; top: 0; left: 20%; height: 80px; z-index: 2; right: 0; background: gray; margin-bottom: 2px; color: yellow}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver; margin-right: 2px; color: maroon}
div#main {position: absolute; top: 80px; left: 20%; right: 0; bottom: 0; background: white; color: red; z-index: 1}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
sidebar
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p>
</div>
</body>
</html>
If you go here company.com layout It looks correct in IE or Firefox But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up. Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration. body { background: #e3edc2; color: #333; font: .8em, arial, helvetica, sans-serif; margin: auto; padding:0px; } Forgive me if this is a newbie question (i'm quite new to CSS) I've got an image I want to make as a background via background-image:url(images/pi.jpg), now if I add this as an inline statement or in the <head> section it works fine but If i try to add it to an external style sheet, the image isn't displayed I've got a very basic layout; div #leftcontent div #rightcontent div #centercontent div #banner I want to add the image so it just displays in the centercontent part. any ideas why this wont work? Hi, I have background image in my css file, I think it is supposed to help my 3 column layout but I'm not sure it does anything useful. http://www.soulcode.net/webdev/susa/index.php I can't tell if the image is displaying or not... I've tried playing with the background colors... I'm pretty darn sure that the path is resolving okay (i'm down in a test folder...) It is in my wrap div Code: #wrapper {
/* background-image:url(images/3399CC-780bg.gif) top left repeat-y;*/
background-image:url(../images/lightgreybg.gif) top left repeat-y;
width:780px;
min-height:100%;
margin: auto;
position:relative;
}
* html #wrapper {height:100%}
I would appreciate a quick glance from another set of eyes. Also, is there some interaction between this image and any background colors in divs (I realize that it is covered by those). SORRY. I DIDN'T SYNC MY CSS CHANGES. I have a site I am creating in Joomla - I'm not getting help from them, so maybe it's just a css problem that I can't figure out. Here's the css because I'm not allowed to post the url /* COMMON STYLE --------------------------------------------------------- */ html, body, form, fieldset {art margin: 0; padding: 0; background-color: #B8E700; background-image: none; text-align: center; } body { font-family: Arial, Helvetica, sans-serif; line-height: 150%; text-align: center; } body.contentpane { width: auto; /* Printable Page */ margin: 1em 2em; line-height: 1.3em; margin: 0px 0px 0px 0px; font-size: 12px; } body.fs1 { font-size: 10px; } body.fs2{ font-size: 11px; } body.fs3{ font-size: 12px; } body.fs4{ font-size: 13px; } body.fs5{ font-size: 14px; } body.fs6{ font-size: 15px; } /* Normal link */ a { color: #006699; text-decoration: underline; } a:hover, a:active, a:focus { color: #333333; text-decoration: underline; } /* Heading */ h1 { font-size: 180%; } h2 { font-size: 150%; } h3 { font-size: 125%; } h4 { font-size: 100%; text-transform: uppercase; } ul { list-style: none; } ul li { padding-left: 30px; background: url(../images/bullet.gif) no-repeat 18px 8px; line-height: 180%; } ol li { margin-left: 35px; line-height: 180%; } th { padding: 5px; font-weight: bold; text-align: left; } img { border: none; } /* Note Style */ p.stickynote { padding: 10px 0px 10px 40px; border: 1px solid #CACACC; background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF; } p.download { padding: 10px 0px 10px 40px; border: 1px solid #CACACC; background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF; } .blocknumber { clear: both; padding: 5px 15px 10px; position: relative; } /* Check list */ ul.checklist { list-style: none; } ul.checklist li { margin-left: 15px; padding: 0 0 5px 20px; background: url(../images/checklist-bg.gif) no-repeat 0 3px; } /* Small checklist */ ul.small-checklist { list-style: none; } ul.small-checklist li { margin-left: 15px; padding: 0 0 5px 20px; background: url(../images/icon_list.gif) no-repeat 0 3px; } /* Check list */ ul.stars { list-style: none; } ul.stars li { margin-left: 15px; padding: 0px 0 5px 20px; background: url(../images/star-bg.gif) no-repeat 0 3px; } /* Bignumber */ .bignumber { float: left; margin-right: 8px; padding: 6px 7px; display: block; background: url(../images/ol-bg.gif) no-repeat top left; color: #7BA566; font: bold 20px/normal Arial, sans-serif; } /* Talking box. Thinking box. */ div.bubble1, div.bubble2, div.bubble3, div.bubble4 { margin: 15px 0; } div.bubble1 span.author, div.bubble2 span.author, div.bubble3 span.author, div.bubble4 span.author { padding-left: 15px; margin-left: 15px; background: url(../images/author.gif) no-repeat center left; font-weight: bold; } div.bubble1 div { margin: 0; width: 100%; background: url(../images/bub1-br.gif) no-repeat bottom right; } div.bubble1 div div { background: url(../images/bub1-bl.gif) no-repeat bottom left; } div.bubble1 div div div { background: url(../images/bub1-tr.gif) no-repeat top right; } div.bubble1 div div div div { background: url(../images/bub1-tl.gif) no-repeat top left; } div.bubble1 div div div div div { margin: 0; padding: 15px 15px 30px 15px; width: auto; } div.bubble2 div { margin: 0; width: 100%; background: url(../images/bub2-br.gif) no-repeat bottom right; } div.bubble2 div div { background: url(../images/bub2-bl.gif) no-repeat bottom left; } div.bubble2 div div div { background: url(../images/bub2-tr.gif) no-repeat top right; } div.bubble2 div div div div { background: url(../images/bub2-tl.gif) no-repeat top left; } div.bubble2 div div div div div { margin: 0; padding: 15px 15px 35px 15px; width: auto; } div.bubble3 div { margin: 0; width: 100%; background: url(../images/bub3-br.gif) no-repeat bottom right; } div.bubble3 div div { background: url(../images/bub3-bl.gif) no-repeat bottom left; } div.bubble3 div div div { background: url(../images/bub3-tr.gif) no-repeat top right; } div.bubble3 div div div div { background: url(../images/bub3-tl.gif) no-repeat top left; } div.bubble3 div div div div div { margin: 0; padding: 15px 15px 50px 15px; width: auto; } div.bubble4 div { margin: 0; width: 100%; background: url(../images/bub4-br.gif) no-repeat bottom right; } div.bubble4 div div { background: url(../images/bub4-bl.gif) no-repeat bottom left; } div.bubble4 div div div { background: url(../images/bub4-tr.gif) no-repeat top right; } div.bubble4 div div div div { background: url(../images/bub4-tl.gif) no-repeat top left; } div.bubble4 div div div div div { margin: 0; padding: 15px 15px 55px 15px; width: auto; } /* Legend */ .legend-title { margin: 0; padding: 0 3px; float: left; display: block; background: #B8E700; font-weight: bold; top: -10px; left: 7px; } .legend { margin: 20px 0; padding: 0 10px; border: 1px solid #CACACC; background: #FFFFFF; position: relative; } /* JOOMLA STYLE --------------------------------------------------------- */ .article_separator { clear: both; display: block; height: 20px; } .column_separator { padding: 0 25px; } /* content tables */ td.sectiontableheader { padding: 4px; border-right: 1px solid #fff; } tr.sectiontableentry0 td, tr.sectiontableentry1 td, tr.sectiontableentry2 td { padding: 4px; } td.sectiontableentry0, td.sectiontableentry1, td.sectiontableentry2 { padding: 3px; } table.contentpane { border: none; width: 100%; } table.contentpaneopen { border: none; border-collapse: collapse; border-spacing: 0; } table.contenttoc { margin: 0 0 10px 10px; padding: 0; width: 35%; float: right; } table.contenttoc a { text-decoration: none; } table.contenttoc td { padding: 1px 5px 1px 25px; background: url(../images/bullet-list.gif) no-repeat 5% 50%; } table.contenttoc th { padding: 0 0 3PX; border-bottom: 1px solid #CCCCCC; text-indent: 5px; } table.poll { padding: 0; width: 100%; border-collapse: collapse; } table.pollstableborder { padding: 0; width: 100%; border: none; text-align: left; } table.pollstableborder img { vertical-align: baseline; } table.pollstableborder td { padding: 4px!important; border-collapse: collapse; border-spacing: 0; } table.pollstableborder tr.sectiontableentry1 td { background: #ECECEC; } table.searchintro { padding: 10px 0; width: 100%; } table.searchintro td { padding: 5px!important; } table.adminform { } .adminform .inputbox { } .blog_more { padding: 10px 0; } .blog_more strong { margin: 0 0 5px; display: block; font-size: 125%; } .blog_more ul { margin: 0; padding: 0; } .blog_more ul li { margin: 0; padding: 0 0 0 17px; background: url(../images/bullet.gif) no-repeat 6px 8px; } .category { font-weight: bold; } h1.componentheading, .componentheading { padding: 5px 0 15px; margin: 0 0 10px; } .componentheading { font-size: 200%; font-weight: bold; } .contentdescription { padding-bottom: 30px; } h2.contentheading, .contentheading { padding: 5px 0 8px; margin: 0; font-weight: normal; } table.blog .contentheading { font-size: 150%; } .contentheading { font-size: 200%; } a.contentpagetitle, a.contentpagetitle:hover, a.contentpagetitle:active, a.contentpagetitle:focus { text-decoration: none !important; } a.readon { float: left; margin-top: 10px; padding: 1px 5px 1px 14px; border: 1px solid #B8E700; display: block; background: url(../images/arrow.png) no-repeat 5px 48%; color: #006699; font-weight: bold; text-decoration: none; text-transform: uppercase; } a.readon:hover, a.readon:active, a.readon:focus { border: 1px solid #ECECEC; background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF; } table.contentpaneopen td, table.contentpane td { } table.contentpaneopen, table.contentpane, table.blog { width: 100%; } .moduletable { padding: 0; } ul.pagination { margin: 15px auto; padding: 10px 0; } ul.pagination li { margin: 0; padding: 0; display: inline; background: none; } ul.pagination li span{ padding: 2px 5px; } ul.pagination a { padding: 2px 5px; border: 1px solid #B8E700; } ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus { border: 1px solid #ECECEC; background: #FFFFFF; } .pagenavbar { padding-left: 14px; } .pagenavcounter { padding: 8px 14px 0 14px; } .sectiontableheader { padding: 8px 5px; background: #444444; color: #FFFFFF; } .sectiontableheader a { color: #FFFFFF; } tr.sectiontableentry1 td { padding: 8px 5px; background: url(../images/hdot2.gif) repeat-x bottom; } tr.sectiontableentry2 td { padding: 8px 5px; background: url(../images/hdot2.gif) repeat-x bottom #ECECEC; } tr.sectiontableentry1:hover td, tr.sectiontableentry2:hover td { background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC; } .smalldark { text-align: left; } div.syndicate div { text-align: center; } .pollstableborder tr.sectiontableentry1 td, .pollstableborder tr.sectiontableentry2 td { background: none; } /* META --------------------------------------------------------- */ .article-tools { border-top: 1px solid #DDDDDD; width: 100%; float: left; clear: both; margin-bottom: 15px; display: block; background: #ECECEC; } .article-meta { padding: 5px; width: 80%; float: left; } .createby { padding: 3px 3px 3px 20px; background: url(../images/icon-user.gif) no-repeat 0 2px; } .createdate { padding: 3px 3px 3px 20px; background: url(../images/icon-date.gif) no-repeat 0 2px; } .modifydate { width: 100%; float: left; } div.buttonheading { float: right; width: 15%; } .buttonheading img { margin: 7px 5px 0 0; border: 0; float: right; } /* MAIN LAYOUT DIVS --------------------------------------------------------- */ #ja-wrapper { width: 100%; margin: 0; } #ja-container2 { padding: 20px 0; background: url(../images/c-bg2.gif) no-repeat 18% 0; } #ja-mainbody-fr #ja-col1 { width: 20%; } #ja-mainbody-fr #ja-contentwrap { width: 80%; } #ja-mainbody, #ja-mainbody-fl { float: left; width: 80%; } #ja-mainbody #ja-contentwrap { float: right; width: 75%; } #ja-mainbody-fl #ja-contentwrap { float: left; width: 100%; } #ja-mainbody-f, #ja-mainbody-fr { float: none; width: 100%; } #ja-mainbody-fr #ja-contentwrap { width: 74.8%; float: right; } #ja-mainbody-fr #ja-col1 { width: 20%; float: left; } #ja-mainbody-fr #ja-contentwrap { width: 80%; } #ja-content { padding: 60px 20px 0 40px; } #ja-contentwrap { min-height: 300px; height: auto; } * html #ja-contentwrap { height: 300px; } #ja-mainbody-fl #ja-content { padding-left: 0; } #ja-mainbody-f #ja-content { padding: 0; } /* Full */ #ja-containerwrap-f #ja-containerwrap2 { background: none; } #ja-containerwrap-f #ja-container, #ja-containerwrap-f #ja-container2 { background: none; } /* Full left */ #ja-containerwrap-fl #ja-containerwrap2, #ja-containerwrap-fl #ja-container, #ja-containerwrap-fl #ja-container2 { background: none; } /* HEADER --------------------------------------------------------- */ #ja-headerwrap { color: #76C900; line-height: normal; height: 80px; } #ja-header { position: fixed; height: 80px; color: #76C900; } .ja-headermask { width: 602px; display: block; color: #76C900; height: 80px; position: absolute; top: 0; right: -1px; } #ja-header a { color: #76C900; } h1.logo, h1.logo-text { margin: 0 0 0 5px; padding: 0; font-size: 180%; text-transform: uppercase; } h1.logo a { width: 208px; display: block; background: url(../images/logo.png) no-repeat; height: 80px; position: relative; z-index: 100; } h1.logo a span { position: absolute; top: -1000px; } h1.logo-text a { color: #CCCCCC !important; text-decoration: none; outline: none; position: absolute; bottom: 40px; left: 5px; } p.site-slogan { margin: 0; padding: 0; padding: 2px 5px; color: #FFFFFF; background: #444444; font-size: 92%; position: absolute; bottom: 20px; left: 0; } /* Search */ #ja-search { bottom: 15px; position: absolute; top:40px; left:750px; height:25px } #ja-search .inputbox { width:120px; border: 1px solid #333333; padding: 3px 5px; color: #999999; font-size: 92%; } /* MAIN NAVIGATION --------------------------------------------------------- */ #ja-pathway { font-size: 92%; } #ja-pathway strong { margin-right: 5px; font-weight: normal; } #ja-pathway a { text-decoration: none; } #ja-pathway img { margin: 1px 5px; } /* MODULE --------------------------------------------------------- */ div.moduletable, div.moduletable_menu, div.moduletable_text { padding: 0 0 20px; margin-bottom: 15px; } div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3 { padding: 0 0 8px; margin: 0; color: #7BA566; font-size: 125%; font-weight: bold; text-transform: uppercase; } /* Module rounded */ div.module h3 { margin: 0 -15px 10px; padding: 8px 15px 5px; border-bottom: 2px solid #B8E700; color: #7BA566; font-size: 125%; font-weight: bold; text-transform: uppercase; } div.module_black, div.module_green, div.module_blue, div.module_red, div.module { margin-bottom: 20px; float: left; clear: both; width: 100%; background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF; } div.module div { background: url(../images/b-bl.gif) no-repeat bottom left; } div.module div div { background: url(../images/b-tr.gif) no-repeat top right; } div.module div div div { padding: 0 15px 10px; background: url(../images/b-tl.gif) no-repeat top left; } div.module_black div div div div, div.module_green div div div div, div.module_blue div div div div, div.module_red div div div div, div.module_text div div div div, div.module div div div div { margin: 0; padding: 0; float: none; width: 99%; background: none; } div.module_text h3 { margin: 0 0 10px; width: 100%; clear: both; display: block; overflow: hidden; } div.module_text span { padding: 0 3px 0 0; float: left; clear: both; display: block; background: #B8E700; font-weight: bold; } div.module_text { margin-bottom: 20px; padding: 0; float: left; clear: both; width: 100%; background: url(../images/bt-br.gif) no-repeat bottom right #B8E700; } div.module_text div { background: url(../images/bt-bl.gif) no-repeat bottom left; } div.module_text div div { background: url(../images/bt-tr.gif) no-repeat top right; } div.module_text div div div { padding: 0 15px 10px; display: block; background: url(../images/bt-tl.gif) no-repeat top left; } div.banneritem_text { padding: 5px 0 !important; } /* SPOTLIGHT --------------------------------------------------------- */ /* Spotlight Box Style */ .ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right { float: left; overflow: hidden; } .ja-box-left div.moduletable, .ja-box-full div.moduletable { padding-right: 30px; background: none; } .ja-box-right div.moduletable { padding-left: 30px; background: url(../images/vdot2.gif) repeat-y left; } .ja-box-center div.moduletable { padding: 0 30px; background: url(../images/vdot2.gif) repeat-y left; } #ja-botsl h3 { background: none; } #ja-botslwrap { background: #B8E700; color: #B8E700; } #ja-botsl { padding: 15px 0; } #ja-botsl div.moduletable { padding-top: 0; padding-bottom: 0; margin: 0; } #ja-botsl h3 { margin: 0 0 12px; padding: 0; color: #FFFFFF; } #ja-botsl a { color: #B8E700; } #ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus { color: #FFFFFF; } #ja-botsl ul, #ja-botsl p, #ja-botsl ol { padding: 0; margin: 0 !important; } #ja-botsl ul li { padding: 0 0 0 15px; margin: 0; background: url(../images/bullet2.gif) no-repeat 3px 8px; } #ja-botsl ol li { margin-left: 25px; padding: 0 !important; } #ja-botsl td { padding: 0; } #ja-botsl .article_separator { display: none; } #ja-botsl table { border-spacing: 0; border-collapse: collapse; } /* FOOTER --------------------------------------------------------- */ #ja-footerwrap { padding: 5px 0 30px; } #ja-footer { padding: 0; color: #B8E700; } #ja-footer .copyright { display: block; color: #B8E700; font-style: normal; font-size: 92%; } #ja-footer ul { margin: 0 0 5px; padding: 0; } #ja-footer li { margin: 0; padding: 0; display: inline; background: none; } #ja-footer li a { display: inline; color: #666666; padding: 0 15px 0 0; font-weight: bold; font-size: 92%; line-height: normal; text-decoration: none; text-transform: uppercase; } #ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus { color: #333333; text-decoration: none; } .ja-cert { font-size: 92%; top: 18px; } .ja-cert a { margin: 0 0 0 5px; padding: 0; border: none; border: none; text-decoration: none; } .ja-cert a span { display: none; } .ja-cert a img { border: none; } .banneritem { display: block; margin-top: 15px; } /* MISCELLANOUS ----------------------------------------------------------- */ ul.accessibility { position: absolute; top: -100%; } /*usertool*/ ul.ja-usertools-font { font-size: 11px; position: absolute; top: 8px; right: 70px; } ul.ja-usertools-font li { padding: 0; margin: 0; display: inline; background: none; } /*collapsible h3*/ h3.show { background: url(../images/arrow2.png) no-repeat 90% 60%; cursor: pointer; } h3.hide { background: url(../images/arrow3.png) no-repeat 90% 60%; cursor: pointer; } /*others*/ #ja-banner { margin: 15px 0; text-align: center; } div.back_button a, div.back_button a:hover, div.back_button a:active { margin: 10px 0; display: block; background: none!important; text-decoration: none!important; } #form-login p { margin: 0 0 5px; } #form-login ul { margin: 10px 0 0; } #form-login .inputbox { width: 90%; } .clr { clear: both; } .hasTip img { margin: 10px 5px 0 0; border: none; } /* Tooltips */ .tool-tip { float: left; border: 1px solid #D4D5AA; padding: 5px; background: #FFFFCC; max-width: 200px; } .tool-title { padding: 0; margin: 0; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(../../system/images/selector-arrow.png) no-repeat; font-size: 100%; font-weight: bold; } .tool-text { margin: 0; font-size: 100%; } #system-message dd.message ul, #system-message dd.error ul, #system-message dd.notice ul { padding: 0; margin: 0; } #system-message dd.message ul li, #system-message dd.error ul li, #system-message dd.notice ul li { background: none; padding: 5px; margin: 0; color: #FFFFFF; } /* System Standard Messages */ #system-message dd.message ul { background: #006699; border: none; } /* System Error Messages */ #system-message dd.error ul { background: #BF0000; border: none; } /* System Notice Messages */ #system-message dd.notice ul { background: #EE9600; border: none; } /* Clearfix */ .clearfix:after { clear: both; display: block; content: "."; height: 0; visibility: hidden; } * html > body .clearfix { width: 100%; display: block; } * html .clearfix { height: 1%; } /* Firefox Scrollbar Hack - Do not remove */ html { margin-bottom: 1px; height: 100%!important; height: auto; } #Table_01 { left:0px; top:0px; width:950px; overflow: hidden; } #top01 { position:fixed; left:0px; top:0px; width:248px; height:68px; background: url(../../../images/top01.jpg); background-repeat:no-repeat; } #logo { position:fixed; left:248px; top:0px; width:89px; height:68px; background:url(../../../images/logo.jpg); background-repeat:no-repeat; } #top02 { position:fixed; left:337px; top:0px; width:312px; height:68px; background:url(../../../images/top02.jpg); background-repeat:no-repeat; } #index-04 { position:fixed; left:649px; top:0px; width:301px; height:74px; background:url(../../../images/index_04.jpg); background-repeat:no-repeat; } #top03 { position:fixed; left:0px; top:68px; width:297px; height:168px; background:url(../../../images/top03.jpg); background-repeat:no-repeat; } #index-06 { position:fixed; left:297px; top:68px; width:352px; height:6px; background:url(../../../images/index_06.jpg); background-repeat:no-repeat; } #index-07 { position:fixed; left:297px; top:74px; width:288px; height:172px; background:url(../../../images/index_07.jpg); background-repeat:no-repeat; } #top04 { position:fixed; left:585px; top:74px; width:317px; height:165px; background:url(../../../images/top04.jpg); background-repeat:no-repeat; } #index-09 { position:fixed; left:902px; top:74px; width:48px; height:172px; background:url(../../../images/index_09.jpg); } #index-10 { position:fixed; left:0px; top:236px; width:297px; height:10px; background:url(../../../images/index_10.jpg); } #index-11 { position:fixed; left:585px; top:239px; width:317px; height:7px; background:url(../../../images/index_11.jpg); } #index-12 { position:fixed; left:0px; top:246px; width:1px; height:33px; background:url(../../../images/index_12.jpg); } #index-13 { position:fixed; left:1px; top:246px; width:949px; height:28px; background:url(../../../images/index_13.jpg); } #bottom01 { left:0px; top:653px; width:950px; height:32px; background:url(../../../images/bottom01.jpg); } #othersunnypages-14 { background:url(../../../images/othersunnypages_14.jpg); position:fixed; top:247px; left: 1px; width: 949px; height: 5px; } #othersunnypages-15 { background-image:url(../../../images/othersunnypages_15.jpg); position:fixed; top:279px; width:152px; height:142px; } #othersunnypages-16 { background-image:url(../../../images/othersunnypages_16.jpg); position:fixed; top:279px; left: 152px; width: 798px; height: 41px; } #othersunnypages-17 { background-image:url(../../../images/othersunnypages_17.jpg); position:fixed; top:320px; left: 152px; width:510px; height:23px; } #othersunnypages-18 { background-image:url(../../../images/othersunnypages_18.jpg); position:fixed; top:320px; left: 662px; width:33px; height:23px; } #othersunnypages-19 { background-image:url(../../../images/othersunnypages_19.jpg); position:fixed; top:320px; left: 695px; width:203px; height:23px; } #othersunnypages-20 { background-image:url(../../../images/othersunnypages_20.jpg); position:fixed; top:320px; left:898px; width:52px; height:23px; } #othersunnypages-21 { background-image:url(../../../images/othersunnypages_21.jpg); position:fixed; top:343px; left: 152px; width:504px; height:24px; } #othersunnypages-22 { background-image:url(../../../images/othersunnypages_22.jpg); position:fixed; top:343px; left: 656px; width:43px; height:24px; } #othersunnypages-23 { background-image:url(../../../images/othersunnypages_23.jpg); position:fixed; top:343px; left: 699px; width:200px; height:24px; } #othersunnypages-24 { background-image:url(../../../images/othersunnypages_24.jpg); position:fixed; top:343px; left: 899px; width:51px; height:24px; } #othersunnypages-25 { background-image: url(../../../images/othersunnypages_25.jpg); position:fixed; top: 367px; left: 152px; width:504px; height:54px; } #othersunnypages-26 { background-image:url(../../../images/othersunnypages_26.jpg); position:fixed; top:367px; left: 656px; width:43px; height:54px; } #othersunnypages-27 { background-image:url(../../../images/othersunnypages_27.jpg); position:fixed; top:367px; left: 699px; width:193px; height:54px; } #othersunnypages-28 { background-image:url(../../../images/othersunnypages_28.jpg); position:fixed; top:367px; left: 892px; width:58px; height:54px; } #othersunnypages-29 { background-image:url(../../../images/othersunnypages_29.jpg); position:fixed; top:421px; left: 0px; width:69px; height:201px; } #othersunnypages-30 { background-image:url(../../../images/othersunnypages_30.jpg); position:fixed; top:421px; left:69px; width:587px; height:201px; } #othersunnypages-31 { background-image:url(../../../images/othersunnypages_31.jpg); top:421px; left: 656px; width:43px; height:201px; } #othersunnypages-32 { background-image:url(../../../images/othersunnypages_32.jpg); position:fixed; top:421px; left: 699px; width:193px; height:201px; } #othersunnypages-33 { background-image: url(../../../images/othersunnypages_33.jpg); position:fixed; top:421px; left: 892px; width:58px; height:201px; } #othersunnypages-34 { background-image:url(../../../images/othersunnypages_34.jpg); position:fixed; top:622px; left: 0px; width:950px; height:31px; } #othersunnypages-36 { background-image:url(../../../images/othersunnypages_36.jpg); position:fixed; top:685px; left:0px; width:950px; height:15px; } My background image was coded properly? but not displaying in FF 2 or IE 7. background-image:url(../images/FFFFFF-bg780.gif) top left repeat-y; I posted this http://forums.devshed.com/css-help-116/background-image-not-displayed-449462.html Then I took a look at the Firefox error console and saw: Warning: Expected end of value for property but found 'top'. Error in parsing value for property 'background-image'. Declaration dropped. Source File: blah blah blah.css Line: 41 When I changed my CSS to this: background-image:url(../images/FFFFFF-bg780.gif); background-position: top left; background-repeat:repeat-y; everything works! Hello, im trying to do some 3column layout with css menu, but in the middle column i have <div class="attachment_pdf"><a href="/xxx/xxx.pdf">XYZ (PDF, 2 MB )</a></div and in this div there is a background image of pdf icon. Everything works in Firefox, Mozzilas but in same cases on IE they are not shown. If i have 10 icons, 3 of them are not shown. After i go with mouseover on the link, i can see them, or if i scroll the window some of them are showing... have somebody met this problem? Or where can be problem? I know, that maybe you have to see the css, and its rather complicated. Thanx. Hi there people, I have a question about CSS but before I start off asking this question I'll introduce myself. I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer". Ok so now you know me a little, I'll start off asking my question. Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it). So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes? Tnx, Dwight Having an issue with the background color in a div. The color shows up in I.E. but not in Firefox. I have a div with a width of 100%. Inside the div is an unordered list with two list items. Here is the css: div#nav { width: 100%; margin: 0; background-color: #EAE9E4; } #nav ul {margin: 0; padding: 0; } #nav li { list-style: none; float: left; margin: 0; padding: 0; width: 15%; font-size: 11px; line-height: 20px; white-space: nowrap; } Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color. Any help appreciated. Hey Guys! I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script. If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction? Thanks! Here is a link to my page: shipswatchdotcom/forum/vanilla/aaa.html Here is the css script: Code: #Body {
margin: 0;
width: 99.9%;
position: relative;
background: #F6F6F2;
}
#Head {
background: #B8D4B8;
padding:0;
margin: 20px 20px 0;
text-align: left;
position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
background: #F6F6F2;
border-bottom: 1px solid #3b5998;
}
.Banner {
padding: 10px;
text-align: left;
position: relative;
background: #F6F6F2;
}
.Banner ul {
background: #B8D4B8;
padding: 0;
margin: 0;
}
.Banner ul li {
display: inline;
padding: 0;
margin: 0;
}
.Banner ul li a {
font-weight: bold;
padding: 3px 6px;
font-size: 11px;
color: #336633;
display: inline-block;
}
.Banner ul li a:hover {
background: #E5F0E5;
}
.Banner ul li a.SignOut {
font-weight: normal;
position: absolute;
top: 10px;
right: 10px;
}
.Banner ul li a span {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 1px 2px 0 1px;
background: #F6F6F2;
border-right: 1px solid #F6F6F2;
border-bottom: 1px solid #F6F6F2;
color: #F6F6F2;
font-size: 9px;
position: relative;
top: -3px;
}
#Content {
float: none;
width: auto;
margin: 0 280px 0 10px;
background: #F6F6F2;
}
#Panel {
float: right;
margin-right: 10px;
background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
width: 200px;
margin-right: 4px;
background: #F6F6F2;
}
div.SearchBox {
margin-bottom: 6px;
}
body.Profile div.SearchBox {
display: none;
}
body.Profile #Content {
float:none;
width: auto;
margin: 0 10px 0 280px;
background: #F6F6F2;
}
body.Profile #Panel {
margin: 0 0 0 10px;
background: #F6F6F2;
}
form.Activity textarea {
width:99%;
background: #F6F6F2;
}
#Foot div {
width: auto;
background: #F6F6F2;
}
body.Post #Content {
width: auto;
margin:0 20px;
background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
width:99%;
background: #F6F6F2;
}
#ConversationForm form {
border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
clear: none;
}
#DiscussionForm form {
background: #F6F6F2;
border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
background: #F6F6F2;
border-bottom:1px solid #ccc;
}
/* Tabs */
div.Tabs {
background: #F6F6F2;
padding: 0;
border-bottom: 1px solid #aaa;
}
div.Tabs ul {
padding: 0 8px;
white-space: nowrap;
}
div.MessageForm {
padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
font-size: 11px;
margin: 0;
border: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: #F6F6F2;
color: #336633;
text-decoration: none;
padding: 8px 10px;
line-height: 11px;
}
div.Tabs li a:hover {
text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
background: #F6F6F2;
color: #336633;
margin: 0;
border: 1px solid #aaa;
border-bottom: none;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
display: inline-block;
font-size: 12px;
line-height: 12px;
font-weight: bold;
text-decoration: none;
padding: 6px 10px;
position: relative;
top: 1px;
}
div.Tabs li a span {
line-height: 1;
font-size: 80%;
padding: 0 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: normal;
background: #F6F6F2;
color: #4A7023;
margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
font-size: 11px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-top: 1px solid #aaa;
background: #F6F6F2;
margin:0;
padding:4px 8px;
}
div.HeadingTabs ul {
margin: 8px 0 0;
}
body.Discussion a.Bookmark {
margin: 6px 2px;
}
div.Preview {
border: 1px solid #aaa;
background: #F6F6F2;
margin:0 0 8px;
padding: 8px;
}
.Foot {
background: #F6F6F2;
border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: #F6F6F2;
border: none;
color: #4A7023;
line-height: 1;
padding: 0;
text-decoration: none;
}
div.MorePager a:hover {
color: #4A7023;
text-decoration: underline;
}
body.add #Content {
margin: 0 10px;
background: #F6F6F2;
}
/* Panel Boxes */
#Panel div.Box {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background: #F6F6F2;
padding: 0;
}
div.Box h4 {
color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
background: #F6F6F2;
border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
background: #F6F6F2;
}
#Status {
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #eee;
color: #000;
line-height: 1.6;
padding: 3px 6px;
margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
margin: 0;
padding: 0;
}
body.Profile ul.PanelInfo li a {
font-size: 12px;
display: block;
padding: 0 6px;
background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
background: #F6F6F2;
}
/* Sign In Page */
body.Entry #Content {
text-align: center;
margin: 0 auto !important;
}
body.Entry #Content div.Box {
background: #F6F6F2;
border: 0;
}
div.Methods {
border-left: 1px solid #ccc;
}
/* Messages */
div.DismissMessage {
background: #F6F6F2;
border: 1px solid #ccc;
padding:6px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
color: #000;
}
div.Warning {
background: #d00;
border: 1px solid #b00;
color: #F6F6F2;
text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
color: #F6F6F2;
}
#Content div.Box {
color: #000;
background: #F6F6F2;
border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
border: none;
}
/* Autocomplete */
.ac_results {
border: 1px solid #d7d8da;
color: #000;
border-top: 0;
background-color: #F6F6F2;
}
.ac_results li {
border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
border-bottom: 0 !important;
}
.ac_results strong {
background: #F6F6F2;
}
.ac_over strong {
background: #F6F6F2;
}
.ac_over {
background: #3b5998;
color: #fff;
}
i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color. is there any way that i can set so that their choice will stay throught their surfing ? any thoughts ? hanks Hi, I have made a page using <div> tags. <div id="page"> <div id="leftmenu"> </div> <div id="mainarea"> </div> </div> My problem is that sometimes, the leftmenu is longer than the main area(1) and sometimes its the opposite- the main area is longer than the leftmenu(2). I want them both to be of the same height. (3) How can I do this? Plz Help! I have pasted the style codes for the 3 tags below. (1) (2) (3) #mainarea { background-color:#FFFFFF; float:left; position:relative; right:0pt; width:630px; } #leftmenu { background-color:#EEEEEE; float:left; left:0pt; position:relative; width:140px; } #page { background-color:#FFFFFF; position:relative; width:770px; } |
|||||||