|
CSS - Trouble Tiling Background Within A Div In Firefox
Site: project-jericho.com
An organization recently hired me to give their web site a "face lift". Everything was working fine until I tried to tile a background within the main content div. If you go to the page in internet explorer, you'll see how it's supposed to look. In firefox, however, the background does not show up. If I set the min-height value to a certain number of pixels in #main, the background stops tiling after that many pixels (in firefox.) min-height: 100%; does not work. The css (if necessary): (this is the css for everything under /* content */ which I'm fairly sure is where I've isolated the problem to. Code:
/* content */
#main {
color: #333;
margin: auto;
padding: 0px;
text-align: left;
width: 680px;
background-image: url('img/bgx2.jpg');
background-repeat: repeat-y;
}
#content{
width: 440px;
float: left;
padding: 10px 10px 20px 10px;
}
* html #content{
padding-top:20px;
}
#content .post
{
margin:0 0 3em 0;
}
#content .cat
{
margin:0;
padding:0;
color:#999;
}
#content .post-info
{
color:#777;
text-align:right;
}
#content .post-info em
{
font-style:normal;
float:left;
margin:0 5px 0 0;
}
em.user
{
padding-left:12px;
background:url(img/user.png) no-repeat left center;
}
em.date
{
padding-left:15px;
background:url(img/date.gif) no-repeat left center;
}
#main .post-comments
{
background:url(img/comments.gif) no-repeat left center;
padding-left:12px;
}
All I need for this code to do is to tile vertically in both Firefox and Internet Explorer. I've been wasting hours in this office on this and any help would greatly greatly appreciated. Thank you so much in advance. -Josh Similar TutorialsHi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks Hi there. I seem to be having an issue with my backgrounds that I've set to tile in my CSS not tiling (I've tried setting the width by percents, but that skews the entire design). I'm also not seeing the "container" background show up for some reason. Hopefully someone can assist me with this, I'd be forever grateful. You can see the page he http://sttwilightfrontier.co.uk/theme.php Theme.php Code: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<title>Theme Test</title>
</head>
<div id="container">
<div id="hleftcorner"></div>
<div id="headertop"></div>
<div id="hrightcorner"></div>
<div id="missionName"></div>
<div id="missionDesc"></div>
<div id="headercb"></div>
<div id="contenttlc"></div>
<div id="contenttop"></div>
<div id="contenttrc"></div>
<div id="sidebartop"></div>
<div id="contentleft"></div>
<div id="contentright"></div>
<div id="sidebar"></div>
<div id="content">
<div id="emblem"></div>
</div>
<div id="contentblc"></div>
<div id="contentbottom"></div>
<div id="contentbrc"></div>
<div id="sidebarbottom"> </div>
<div id="contentareabottom"></div>
</div>
</body>
</html>
theme.css Code Code:
@charset "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 100%;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
background: url(../images/theme/stars.png) repeat;
}
#hleftcorner {
background: url(../images/theme/h_leftcorner.png);
position:absolute;
left:0px;
top:0px;
width:245px;
height:180px;
z-index:1;
visibility:visible;
}
#headertop {
background: url(../images/theme/header_top.png) repeat-x;
position:absolute;
left:245px;
top:0px;
width:510px;
height:10px;
z-index:2;
visibility:visible;
}
#hrightcorner {
background: url(../images/theme/h_rightcorner.png);
position:absolute;
left:755px;
top:0px;
width:245px;
height:180px;
z-index:3;
visibility:visible;
}
#missionName {
background: url(../images/theme/missionName.png) repeat-x;
position:absolute;
left:245px;
top:10px;
width:510px;
height:58px;
z-index:4;
visibility:visible;
}
#missionDesc {
background: url(../images/theme/missionDesc.png) repeat-x;
position:absolute;
left:245px;
top:68px;
width:510px;
height:73px;
z-index:5;
visibility:visible;
}
#headercb {
background: url(../images/theme/header_cb.png) repeat-x;
position:absolute;
left:245px;
top:141px;
width:510px;
height:39px;
z-index:6;
visibility:visible;
}
#contenttlc {
background: url(../images/theme/content_tlc.png);
position:absolute;
left:0px;
top:180px;
width:45px;
height:45px;
z-index:7;
visibility:visible;
}
#contenttop {
background: url(../images/theme/content_top.png) repeat-x;
position:absolute;
left:45px;
top:180px;
width:702px;
height:45px;
z-index:8;
visibility:visible;
}
#contenttrc {
background: url(../images/theme/content_trc.png);
position:absolute;
left:747px;
top:180px;
width:45px;
height:45px;
z-index:9;
visibility:visible;
}
#sidebartop {
background: url(../images/theme/sidebar_top.png);
position:absolute;
left:792px;
top:180px;
width:208px;
height:45px;
z-index:10;
visibility:visible;
}
#contentleft {
background: url(../images/theme/content_left.png) repeat-y;
position:absolute;
left:0px;
top:225px;
width:45px;
height:521px;
z-index:11;
visibility:visible;
}
#content {
background: url(../images/theme/content.png) repeat;
position:absolute;
left:45px;
top:225px;
width:702px;
height:521px;
z-index:12;
visibility:visible;
}
#contentright {
background: url(../images/theme/content_right.png) repeat-y;
position:absolute;
left:747px;
top:225px;
width:45px;
height:521px;
z-index:13;
visibility:visible;
}
#sidebar {
background: url(../images/theme/sidebar.png) repeat-y;
position:absolute;
left:792px;
top:225px;
width:208px;
height:521px;
z-index:14;
visibility:visible;
}
#emblem {
background: url(../images/theme/SanctuaryEmblem.png);
position:absolute;
width:500px;
height:500px;
visibility:visible;
left: 110px;
top: 10px;
}
#contentblc {
background: url(../images/theme/content_blc.png);
position:absolute;
left:0px;
top:746px;
width:45px;
height:45px;
z-index:19;
visibility:visible;
}
#contentbottom {
background: url(../images/theme/content_bottom.png) repeat-x;
position:absolute;
left:45px;
top:746px;
width:702px;
height:45px;
z-index:20;
visibility:visible;
}
#contentbrc {
background: url(../images/theme/content_brc.png);
position:absolute;
left:747px;
top:746px;
width:45px;
height:45px;
z-index:21;
visibility:visible;
}
#sidebarbottom {
background: url(../images/theme/sidebar_bottom.png);
position:absolute;
left:792px;
top:746px;
width:208px;
height:54px;
z-index:22;
visibility:visible;
}
#contentareabottom {
background: url(../images/theme/ca_bottom.png);
position:absolute;
left:0px;
top:791px;
width:792px;
height:9px;
z-index:23;
visibility:visible;
}
I'm basically trying to get some of the areas to scale with the browser window, as it is resized. (Content area, sidebar, header, etc.) You can see which ones I tried to do so with the repeat tags in the CSS Code. Thanks a bunch in advance for any help that comes! Hi, I have some simple CSS for a div tag, inwhich there should be a tiling background image. Here is the CSS code: Code: #mainContent{
z-index:5;
padding:0;
margin: 2px;
background-image: url(images/common/bodybg.gif);
background-repeat:repeat-y;
height:100%;
}
Then I have my div tag: <div id="mainContent"> which holds 2 other divs, both without backgrounds. Yet my tiling background doesn't show. Is there anything wrong with my code? I have checked the image path etc, but can't figure it out. Here is the site: http://www.caillouette.com/SouthernLiving/ thanks I want the background image to be stationary as the page scrolls. I'm assuming the fixed parameter would do it but it's not. I have tried the following: Code: body {
font-family: Helvetica, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
background: url(images/background.jpg) fixed;
and this Code: body {
font-family: Helvetica, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
background: url(images/background.jpg);
background-attachment: fixed;
}
And neither worked. I thought well maybe scroll means the text will scroll so I changed them to scroll and still, it is tiling. What do I need to do to get it to stay fixed so the contents will scroll? Thanks in advance! Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="testcss.css" /> </head> <body> <div id="wall2"> <a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) --> </div> </body> </html> And the css.... Quote: body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;} a{color:blue; border:0; padding-bottom:0px; padding-top:0px;} a:hover{color:#DE7008;} img { border:0; padding-bottom:0px; padding-top:0px;} div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; } img#unsold {border:0px; padding:0px; margin:0px;} The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row. Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers. The code is XHTML and CSS validated. Gareth. Hi Everyone, I have a page I am working on that works perfect in IE, but having a little trouble with Firefox. The Navigation menw lines up perfect in IE, but seems to "fall off the edge" in Firefox.....haven't checked the other browsers, but I'm sure it would be the same....the width is set to 100%.... I would post the link, but this forum won't let me.....I got the script from Dynamic Drive and it was called: Solid Block Menu Style sheet for Menu: .menu { margin: 0; float:left; font: bold 14px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 1px solid #66FFFF; border-width: 1px 0px; background: url(images/menu_back.gif) center center repeat-x; } .menu li { display: inline; } .menu li a { float: right; color: white; padding: 7px 12px; text-decoration: none; } .menu li a:visited { color: #000000; } .menu li a:hover, .menu li .current{ color: #FFFFFF; background: transparent url(images/menu_back_over.gif) center center repeat-x; } CODE in HTML: <ul class="menu"> <li><a href="URL HERE">Frosty Questionnaire</a></li> <li><a href="URL HERE">Board of Directors</a></li> <li><a href="URL HERE">Sponsorship & Volunteer Opportunities</a></li> <li><a href="URL HERE" class="current">Home</a></li> </ul> <br style="clear: left" /> Thanks! Hello! I've been searching the internet for a solution to this for quite a while now but I've found nothing. I've also tried some methods to fix it but nothing seems to be helping me. I might just be stupid because I'm not terribly good at this. Here goes. Scenario: Firefox not reading list items as hyperlinks even though it's <ul><a><li>Hello World</li></a></ul>. where I use something like li{width:200px;height:100px;} firefox only interprets the text as a hyperlink, but not the list item field. This is the actual example: Markup: Code:
<UL id="menu">
<LI> Product
<UL>
<A href="index.php?m=product1"><LI>PRODUCT1</LI></a></LI>
</UL>
</LI>
</UL>
CSS: Code:
#menu UL LI UL A{
height: 100px;
width: 500px;
}
#menu UL LI UL LI:hover{
background: red;
}
This results in the background shifting to red when I hover over the list item, HOWEVER firefox does not interpret the list item as a hyperlink, even though it's inside <a></a> where Opera and Chrome both do. Any suggestions on how to solve this? I apologize for bad grammar. EDIT: To make the problem obvious I attach a picture. URL I am trying to use background-image to emulate using a background="" in a cell. I am getting the image to show up using background-image: url(url); but it repeats. when i add background-image: url(url) no-repeat; the image doesn't show up, even once. What am I doing wrong? Can someone please tell me why the background2.jpg is not repeating vertically on this page in Firefox? This is the page: http://tinyurl.com/57sqrq And the CSS reference to it: Code: #content {
padding: 0px;
margin: auto;
width: 1024px;
min-height: 630px;
background: url(images/background2.jpg) top center;
}
Thank you. I'm trying to do alternating colors in a table using CSS and I'm having some trouble. My header row works fine, but the normal rows don't pick up the color change. here is my CSS: Code: table.metadata-table {
empty-cells:show;
border-width:1px;
border-spacing:0px;
border-style:solid;
border-color:#A1A1A1;
border-collapse:separate;
}
table.data-table td, th {
text-align:center;
border-width:1px;
padding:3px;
border-style:solid;
border-color:#A1A1A1;
}
tr.data-header td, th{
background-color:#788A51;
color:#FFFFFF;
font-size:9pt;
}
tr.data-row1 td {
background-color:#FBF8E0;
font-size:8pt;
}
tr.data-row2 td {
background-color:DBD594;
font-size:8pt;
}
I've also tried dropping the preceding element type(ie: .metadata-row1 instead of tr.metadata-row1) and using id's instead of classes(tr#metadata-row1) with no success. Here is the html application: html Code: Original - html Code <table class="data-table"> <tr class="data-header"> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> <tr class="data-row1"> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> <td>cell 1-4</td> </tr> <tr class="data-row2"> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> <td>cell 2-4</td> </tr> <tr class="data-row1"> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> <td>cell 3-4</td> </tr> </table> <table class="data-table"> <tr class="data-header"> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> <tr class="data-row1"> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> <td>cell 1-4</td> </tr> <tr class="data-row2"> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> <td>cell 2-4</td> </tr> <tr class="data-row1"> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> <td>cell 3-4</td> </tr> </table> The table rows pick up the right font-size attributes, and the data-header row works right and all the cells pick up the right border attributes, but the regular rows aren't showing the background-color. Any ideas? Much thanks Hi, I'm completely new to this but I've been trying to implement CSS tabs on my webpage in a computer science class. They work correctly in IE (the browser at my school that I've been testing on) but not in Firefox (there is a space between the bottom of the tab and the line). Below is the CSS, what do I need to change to make it compatible with both browsers? Thanks for the help. body { font: 100% "Century Gothic", verdana, arial, sans-serif; background-color: #fff; margin: 50px; } ul#tabnav { font: bold 11px "Century Gothic", verdana, arial, sans-serif; list-style-type: none; padding-bottom: 26px; border-bottom: 1px solid #03A; margin: 0; } ul#tabnav li { float: left; height: 21px; background-color: #38E; margin: 2px 2px 0 2px; border: 1px solid #03A; } body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { border-bottom: 1px solid #fff; background-color: #fff; } body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { color: #000; } #tabnav a { float: left; display: block; color: #000; text-decoration: none; padding: 4px; } #tabnav a:hover { background: #fff; } I'm in the midst of redeveloping my site's look and feel using CSS. I'm having a moderate amount of luck so far, but I've run into a problem. I'm testing using Firefox 1.0 PR, but I've seen this behaviors in other Mozilla-based browsers. Example 1: URL. As you will probably see, the white background only extends to the bottom of the one DIV. The only way I was able to get the white background to extend to the bottom of the two DIVs was to use an image in one of the container DIVs. Example 2: URL. Of course, then the problem is still that it doesn't extend all the way to the bottom of the browser unless it's filled entirely with content. The effect I'm looking for is something like this: URL. My CSS is here URL. First, if anyone can help me figure out how to get the background to extend evenly, without an image, that would be great. If there's a way to make the page always extend to the bottom of the browser, I'd love to hear about that, too. Thanks in advance for any help you can offer. I'm trying to get a background image/color to repeat down the left hand column of a site, he http:// www. lisaannschleipfer .com, but can't seem to get it working in either FF or IE. You'll notice that in the left hand column, the tannish color does not repeat all the way down the column. I'm fairly certain I've narrowed it down to the bit of CSS code he Code: div#wrapper {
margin: auto;
width:800px;
background: #d1c8ab url(../images/wrapper_bg.jpg);
background-repeat: repeat-y;
}
I've tried looking around the forum for some solutions, and have found a few possibilities (height: auto, overflow: auto, etc), but nothing that I have tried to insert into the stylesheet has seemed to work. Does anyone have any suggestions or solutions? I'd appreciate it! Here's the entire stylesheet, for reference: Code: html {
height: 100%;
margin-bottom: 0px;
}
form {
margin: 0;
padding: 0;
}
img,table {
border:none;
}
table td {
vertical-align:top;
}
body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #666666;
background: #0d789c url(../images/bg.jpg) top center repeat-x;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
color: #0d789c;
}
a:hover {
text-decoration: underline;
font-weight: normal;
color: #0d789c;
}
input.button {
cursor: pointer;
vertical-align: bottom;
border: 0px;
background:none;
}
p {
margin-top: 0;
margin-bottom: 5px;
text-align:justify;
}
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#header {
margin:0 auto;
width:940px;
}
.left_bg {
background: transparent url(../images/left_bg.jpg) top right no-repeat;
width:70px;
}
.middle_bg {
background: transparent url(../images/.jpg) top right no-repeat;
width:800px;
}
.right_bg {
background: transparent url(../images/right_bg.jpg) top left no-repeat;
width:70px;
}
.top_bg {
background: transparent url(../images/top_bg.jpg) top center no-repeat;
width:800px;
height:45px;
}
.rightside {
background: transparent url(../images/rightside_bg.jpg) top center no-repeat;
width:185px;
height:173px;
}
.header_bg {
background: transparent url(../images/header_bg.jpg) top center no-repeat;
width:615px;
height:173px;
}
#page_bg {
padding: 0;
margin:0px auto;
}
#top {
width:800px;
margin:0 auto;
padding:0;
}
div.center {
padding:0;
}
div#wrapper {
margin: auto;
width:800px;
background: #d1c8ab url(../images/wrapper_bg.jpg);
background-repeat: repeat-y;
}
#logo {
padding:47px 50px 0 50px;
height:100px;
text-align:left;
margin:0 auto;
}
#logo a, #logo a:link, #logo a:hover {
font-weight: normal;
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
padding:0px;
margin:0;
line-height:1.4em;
letter-spacing:2px;
color:#fefefe;
text-decoration:none;
}
div.newsflash {
height:150px;
padding:10px;
overflow: hidden;
color:#fff;
text-align:left;
}
div#tabarea {
margin: 0;
width:615px;
height:26px;
text-align:left;
}
#footer {
width:800px;
margin:0 auto;
}
.validation {
float:right;
padding:8px 20px 0 0;
}
#footer .footer {
background: transparent url(../images/footer.jpg) top center no-repeat;
height:28px;
width:800px;
}
#pathway {
padding: 0px 10px 8px;
width: auto;
margin-right: 250px;
text-align: left;
}
#search {
float: right;
width:320px;
margin-top: -20px;
margin-right: 20px;
height: 40px;
overflow: hidden;
text-align:right;
}
#area {
padding: 0;
width:100%;
/* color:#d1c8ab; */
}
#whitebox {
margin: 0;
width: auto;
}
#whitebox div {
text-align: left;
}
#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}
/* horizontal pill menu */
.pill {
margin:0px 0 0 1px;
text-align:left;
}
td.pill_m {
padding: 0;
margin: 0 10px;
width: auto;
text-align:center;
}
#pillmenu {
white-space: nowrap;
height: 26px;
float: left;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
margin: 0px 1px 0 0;
padding: 0;
background: transparent;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 2px 10px 0 10px;
color: #fff;
text-decoration: none;
background: transparent;
}
#pillmenu a:hover {
text-decoration: underline;
}
#pillmenu a#active_menu-nav {
color: #fff;
background: url(../images/active_arrow.gif) top center no-repeat;
}
#pillmenu a#active_menu-nav:hover {
color: #fff;
}
#leftcolumn {
margin: 0;
text-align:left;
width: 221px;
float:left;
background: #d1c8ab url(../images/leftcol_bg.jpg) top left no-repeat;
}
div#maincolumnfull {
padding:2px 10px;
float:left;
width: 760px;
}
div#maincolumn {
padding:20px 10px;
float:left;
width: 559px;
background: #ffffff url(../images/maincol_bg.jpg) top left no-repeat;
}
div.nopad {
padding: 0;
text-align:left;
}
td.middle_pad {
width: 20px;
}
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}
span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}
/* headers */
div.componentheading {
padding-left: 0px;
}
h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}
h2, .contentheading {
padding: 0;
font-family: Tahoma, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
vertical-align: bottom;
color: #8cb6cf;
text-align: left;
width: 100%;
}
table.contentpaneopen h3 {
margin-top: 25px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Tahoma,Helvetica,Arial,sans-serif;
color:#71a7c8;
font-size: 1.4em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}
/* small text */
.small {
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}
.modifydate {
height: 20px;
vertical-align: bottom;
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}
.createdate {
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;
}
a.readon {
margin-top: 10px;
display: block;
float: left;
background: url(../images/mw_readon.png) top right no-repeat;
padding-right: 20px;
line-height: 14px;
height: 16px;
}
/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }
/** overlib **/
.ol-foreground {
background-color: #f6f6f6;
}
.ol-background {
background-color: #666;
}
.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}
.ol-closefont {}
/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}
a.mainlevel:hover {
}
/* spacers */
span.article_separator {
display: block;
height: 20px;
}
.article_column {
padding-right: 5px;
}
.column_separator {
border-left: 1px dashed #e0e0e0;
padding-left: 10px;
}
td.buttonheading {
}
.clr {
clear: both;
}
div#maindivider {
border-top: 1px solid #ddd;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}
table.blog span.article_separator {
display: block;
height: 20px;
}
/* table of contents */
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
}
table.contenttoc td {
padding: 0 5px;
}
/* content tables */
td.sectiontableheader {
background:transparent url(../images/sectiontableheader_bg.gif) top left repeat-x;
color: #fff;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 6px;
}
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}
tr.sectiontableentry1 {
background:#f3f3f3;
}
tr.sectiontableentry2 {
background:#fefefe;
}
/* content styles */
table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
}
table.contentpaneopen li {
margin-bottom: 5px;
}
table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}
table.contentpaneopen h3 {
margin-top: 25px;
}
table.contentpaneopen h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.highlight {
background-color: #fffebb;
}
/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
}
div.moduletable {
margin-bottom: 25px;
}
div.module_menu, div.module {
margin: 0 0 0 2px;
padding: 0;
margin-bottom: 15px;
}
div.module_menu div div div div ,div.module div div div div {
background: none;
padding: 0;
}
div.module_menu div, div.module div {
}
div.module_menu div div, div.module div div {
padding:0 0 10px 0;
}
div.module_menu div div div, div.module div div div {
padding: 0px;
width: auto;
}
div.module_menu ul li a:link, div.module_menu ul li a:visited,
div.module ul li a:link, div.module ul li a:visited {
font-weight: normal;
background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
line-height:24px;
}
#leftcolumn div.module table ,#rightcolumn div.module table {
width: auto;
}
#leftcolumn h3, #rightcolumn h3 {
height:36px;
color:#fff;
font-weight: bold;
font-family: Tahoma, Helvetica,Arial,sans-serif;
font-size: 12px;
line-height:26px;
margin: -2px 0 0 ;
position:absolude;
padding:0px 0 2px 22px;
text-align: left;
width:198px;
background:transparent url(../images/h3_bg.gif) top left no-repeat;
}
#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
margin:0 0 20px 0;
padding: 0px;
text-align:left;
}
#leftcolumn ul.menu, #rightcolumn ul.menu {
margin:0;
padding:0px 0 0 10px;
list-style:none;
margin: 0px 0;
width:194px;
}
#leftcolumn ul.menu li, #rightcolumn ul.menu li {
margin:0;
padding:0;
}
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
display:block;
line-height:20px;
border-bottom:1px dotted #c3b586;
padding:2px 0px 0 12px;
height:20px;
text-decoration:none;
text-align:left;
color:#666666;
}
#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
color:#0d789c;
}
/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link,
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
display:block;
line-height:20px;
border-bottom:1px dotted #0d789c;
padding:2px 0px 0 12px;
text-decoration:none;
color:#0d789c;
}
#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
color:#666666;
}
/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
margin:0;
padding:0 0 0 0px;
list-style:none;
}
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
background: transparent url(../images/menu_sub_link_bg.gif) left no-repeat;
text-decoration:none;
color:#666666;
padding:2px 25px;
}
#leftcolumn ul.menu li.active ul li#current a, #leftcolumn ul.menu li.active ul li#current a a:link {
background: transparent url(../images/current_link.jpg) left no-repeat;
text-decoration:none;
color:#666666;
padding:2px 25px;
}
#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
s/menu_sub_link_bg.gif) left no-repeat;
color:#666666;
}
/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
margin:6px 0;
padding:0;
list-style:none;
}
#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
margin:0;
padding:0 2px;
}
table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}
div.search input {
width: 69px;
vertical-align:bottom;
background-color: #ffffff;
margin: 15px 0 10px 0;
}
form#form-login fieldset {
margin:0px 20px 0 20px;
padding:20px 0 0 0;
border:none;
text-align:left;
}
form#form-login ul {
text-align:left;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
form#form-login ul li{
text-align:left;
margin:0;
padding:0 0 0 20px;
}
#leftcolumn div.module h3 {
top:-500px;
left:-500px;
padding-left:0;
position:absolute;
}
/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #666; }
div.caption { padding: 0 10px 0 10px; }
div.caption img { border: 1px solid #CCC; }
div.caption p { font-size: .90em; color: #666; text-align: center; }
/* Parameter Table */
table.paramlist {
margin-top: 5px;
}
table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}
table.paramlist td.paramlist_value {
}
div.message {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}
/* Banners module */
/* Default skyscraper style */
.bannergroup {
}
.banneritem {
}
/* Text advert style */
.banneritem_text {
padding: 4px;
font-size: 11px;
}
.bannerfooter_text {
padding: 4px;
font-size: 11px;
background-color: #F7F7F7;
text-align: right;
}
/* System Messages */
/* see system general.css */
.pagination span { padding: 2px; }
.pagination a { padding: 2px; }
/* Polls */
.pollstableborder td {
text-align: left;
}
/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 0 15px;
}
legend {
margin: 0;
padding: 0 10px;
}
td.key {
border-bottom:1px solid #eee;
color: #666;
}
/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}
.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}
.tool-text {
font-size: 100%;
margin: 0;
}
/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}
/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}
/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
/* ****************************************************************************** */
/* blue */
input,button {
background:transparent;
vertical-align:bottom;
}
input[type="checkbox"], input[type="radio"]{
background: transparent;
border: none;
}
/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
color : #fff;
font-family: Arial,sans-serif;
text-decoration:none;
}
a.sgfooter:hover {
color: #fff;
font-family: Arial,sans-serif;
text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:left;
color: #fff;
padding:4px 0 0 10px ;
font-family: Arial,sans-serif;
width:500px;
float:left;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #666;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #666666;
text-align:left;
}
a.sglink:link, a.sglink:visited {
color : #666666;
font-size : 11px;
font-family: Arial,sans-serif;
text-decoration:none;
}
a.sglink:hover {
color : #666666;
font-family: Arial,sans-serif;
text-decoration:none;
}
Hey people. I've been desperatly searching for a fix for the bug in my CSS, but I don't know what I'm doing wrong. Here is a link to the the testfile: http://users.skynet.be/bert_fonteyn...iek/index.html. The page validates as valid XHTML. Now here is the bug in Windows (I have not tested it in Mac yet), both in Netscape 7 as in IE 6. Shrink your window, so you have a horizontal scrollbar. Scroll to the right, and you will notice there is a white area which can 't show the backgroundtile for some 60 px wide. The content (which is white) is there however... Can someone please tell me what I'm doing wrong? Greetz, Bert I'm trying to tile a background image horizontally with a vertically tiled background image centered on the page. Being new to css and not particularly fluent in html (although more so than css), I have no idea how to go about doing this or if it is even possible. I do have both images working separately though. Help would be appreciated. -alexa I have a titlebar for an article for my site and i'm trying to achieve rounded corners with transparency. The problem is that my transparent images (toprightcorner and blobs) are showing the background of the div i've used to tile the background image across the bar (it's variable width). How can I prevent this? i know there is background-position but i need a fixed size that the background won't tile across at either end while the width is variable. Is the only solution to make 3 divs and use 2 as columns to hold the corner images and have the background tile across it or is there an easier way? Here is the relevant code Thanks --James Code: <div class="articlebox"> <div class="articletitle"><img class="left" src="blobs.jpg" border="0" /></div> </div> css Code: Original - css Code div.articlebox{ width:100%; /*attach it to the top of the box so we can layer the corner on top of it*/ background:rgb(249,249,249) url('topbg2.png') repeat-x fixed; padding:0px; margin:0px; } div.articletitle{ text-align:left; width:100%; height:21px; background:url('toprightcorner2.png') no-repeat right top; border-bottom:1px solid #888; padding:0px; margin:0px; } div.articletitle img{ float:left; } * html div.articletitle img{ margin-left:-3px; }
Please look at http://casadelsol.tmhdesign.com I have this css #main { width:994px; background: transparent url(../images/stripe_bg.gif) repeat-y 0 400px; } That stripe_bg.gif shows up fine in IE, but not in FF, can someone shed some light? Ok, so i worked a little on this site and i can't get it to work in IE, and its really starting to bug me. What am i doing wrong? http://markspixel.com/smoothtobacco/bio.htm Code:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Smooth Tobacco</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
}
.style1 {
margin-right: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="images/background.jpg" alt="background" id="bg" />
<div id="content">
My content is here
</div>
Hello 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. |
|||||||