|
CSS - Css Background In Firfox
Hi folks,
I have a website at www.irish-guy.com . Its showed fine with a white background on Explorer and black text when I created in on Windows. I when moved to Mac G4. It was also fine on Safari.....but on Firefox, it had white text and a white background. So I could not read anything. I ahve tried changing the BG Colour to blue (its back white again). When i chaged it to various colors (for example blue) the following happened. (1) Its blue BG and black text on Safari. (2) Its gray BG and black text on Explorer (when viewed on a Mac). (3) Its gray BG and black text on Firefox (except within the picture boxes where its white text). Unreadable. My question is (CSS below), how do i get a white background and black text on all three browsers. Or if you are reading this on Firefox on a Windows machine, how does it read? P.S I am begiining to wonder if the external CSS on my WWW tagboard is overriding the background on my post page! Regards Michael Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" <style type="text/css" media="screen" /> /*----start mash up-----------------------------------------------------------*/ /*----start ruthsarian layout-------------------------------------------------*/ #pageWrapper { margin: 0; width: auto; min-width: 500px; border-color: black; border-style: solid; /* explicitly defined within eact selector in case you want change border styles (to mix it up) between elements */ border-width: 1px; /* puts a border around the whole page */ } body { background-color: gray; color: white; margin: 0; padding: 2em; } body { font-family: arial, helvetica, sans-serif; font-size : x-small; voice-family : "\"}\""; voice-family : inherit; font-size : small; } #masthead { background-color: gray; color: black; border-color: black; border-style: solid; border-width: 0 0 1px 0; padding: 1em; } #masthead h1 { display: inline; /* personal preference to keep the header inline. you could just as easily change padding and margins to 0. */ } #outerColumnContainer { z-index: 1; border-left-color: silver; /* left hand column background color */ border-right-color: blue; /* right hand column background color */ background-color: white; /* this sets the background color on the center column */ color: #111111; border-style: solid; border-width: 0 0 0 200px; /* sets the width of the borders used to create the left and right columns' background color. */ /* border-width: 0 200px; */ /* for three columns */ } #innerColumnContainer { z-index: 2; margin: 0 -1px; width: 100%; border-color: black; border-style: solid; border-width: 0 0 0 1px; /* puts borders between center and the side columns */ /* border-width: 0 1px; */ /* for three columns */ } #contentColumn { margin: 0 -1px; width: 100%; float: left; position: relative; z-index: 10; overflow: visible; /* fix for IE italics bug */ color: black; } #leftColumn { float: left; position: relative; z-index: 10; overflow: visible; /* fix for IE italics bug */ width: 200px; margin: 0 1px 0 -200px; color: black; text-align: center; } #rightColumn { float: left; position: relative; z-index: 10; overflow: visible; /* fix for IE italics bug */ width: 200px; margin: 0 -200px 0 1px; display: none; /* comment this out and edit borders.css to create the third column */ color: black; } #footer { position: relative; background-color: blue; color: white; border-color: black; border-style: solid; border-width: 1px 0 0 0; text-align: center; padding: 1em; } .clear { clear: both; } .hide { display: none; /* hide elements that CSS-targeted browsers shouldn't show */ } .inside { padding: 0.5em 1.5em; /* this padding is applied to every major box within the layout for a uniform gutter between borders */ } html>body #innerColumnContainer { border-bottom: 1px solid transparent; /* help mozilla render borders and colors. try removing this line and see what happens */ } /*----start vertical nav------------------------------------------------------*/ .vnav { margin: 1em 0; } .vnav ul { margin: 0; padding: 0; list-style-type: none; display: block; border: solid 1px black; border-bottom-width: 0; } .vnav ul li { margin: 0; padding: 0; list-style-type: none; display: block; border-bottom: solid 1px black; } .vnav ul li a { display: block; text-decoration: none; padding: 2px 10px; color: black; background-color: white; } .vnav ul li a:hover { background-color: black; color: white; } .vnav h3 { margin-bottom: 0; padding-bottom: 0; } * html .vnav { position: relative; /* IE needs this to fix a rendering problem */ } * html .vnav ul li a {/* hide from IE5.0/Win & IE5/Mac */ height: 1%; } #rightColumn .vnav ul li a { color: black; background-color: white; } #rightColumn .vnav ul li a:hover { background-color: black; color: white; } /*--------------------------------------------------------end vertical nav----*/ /*----start horizontal nav bar------------------------------------------------*/ .hnav { white-space: nowrap; margin: 0; color: black; padding: 3px 0 4px 0; background-color: blue; color: black; border-color: black; border-style: solid; border-width: 0 0 1px 0; } .hnav ul { text-align: center; list-style-type: none; line-height: normal; margin: 0; padding: 0; } .hnav ul li { display: inline; white-space: nowrap; margin: 0; } .hnav ul li a { text-decoration: none; color: black; background-color: yellow; margin: 0 -1px 0 0; padding: 3px 10px 4px 10px; border-left: solid 1px black; border-right: solid 1px black; } .hnav ul li a:hover { text-decoration: underline; background-color: black; color: yellow; } * html .hnav {/* Hide from IE5/Mac (& IE5.0/Win) */ height: 1%; /* holly hack to fix a render bug in IE6/Win */ } } /*--------------------------------------------------end horizontal nav bar----*/ /*----start screen.css---------------------------------------------------------- @import "base.css"; @import "hnav.css"; @import "vnav.css"; @import "colors.css"; @import "gutters.css"; @import "borders.css"; @import "fonts.css"; ------------------------------------------------------------end screen.css----*/ /*---------------------------------------------------end ruthsarian layout----*/ /*----start minima template---------------------------------------------------*/ a:link { color: blue; text-decoration:underline; } a:visited { color: purple; text-decoration:underline; } a:hover { color: red; text-decoration:underline; } a img { border-width:0; } /*----Header------------------------------------------------------------------*/ #masthead h1 a { color: black; text-decoration:none; } #masthead h1 a:hover { color: silver; } #description { display:inline; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.2em; color: silver; text-align: right; } /* Headings----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.2em; color: black; } /* Posts----------------------------------------------- */ .date-header { margin:1.5em 0 .5em; } .post { margin:.5em 0 1.5em; border-bottom:1px solid black; padding-bottom:1.5em; } .post-title { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color: red; } .post-title a { display:block; text-decoration:none; color: lightgrey; font-weight:normal; } .post-title a:visited { display:block; text-decoration: underline; color: green; font-weight:normal; } .post-title strong { display:block; text-decoration:none; color: yellow; font-weight:normal; } .post-title a:hover { color: silver; } .post p { margin:0 0 .75em; line-height:1.6em; } p.post-footer { margin:-.25em 0 0; color: silver; } .post-footer em { font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; font-style:normal; color: darkgray; margin-right:.6em; } .comment-link { font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; margin-left:.6em; } .img { padding:5px; background:gold; border:1px solid black; } .post blockquote { border: 1px dashed black; background:gold; font-size: 10px; color:#666; font-family:verdana, arial, sans-serif; padding:8px; } .post blockquote p { margin:.75em 0; } /*----start Sidebar Content---------------------------------------------------*/ #sidebar ul { margin:0 0 1.5em; padding:0 0 1.5em; border-bottom:1px solid black; list-style:none; } #sidebar li { margin:0; padding:0 0 .25em 15px; text-indent:-15px; line-height:1.5em; } #sidebar p { color: darkgray; line-height:1.5em; } /*----start Profile-----------------------------------------------------------*/ #profile-container { margin:0 0 1.5em; border-bottom:1px solid black; padding-bottom:1.5em; } .profile-datablock { margin:.5em 0 .5em; } .profile-img { display:inline; } .profile-img img { float:left; padding:4px; border:1px solid black; margin:0 8px 3px 0; } .profile-data { margin:0; font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; } .profile-data strong { display:none; } .profile-textblock { margin:0 0 .5em; } .profile-link { margin:0; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; } Similar TutorialsHello! I've got two simple files ... one XML and the formatting CSS: Code:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type='text/css' href='test01.css'?>
<doc>
<p>Some text...</p>
<p asdf="note">A note...</p>
<safe xml:id='s1'>
asdf
</safe>
</doc>
Code:
doc {display: block; }
p { display: block; }
p[asdf="note"]{ color: red;
background:black;}
safe { display: none; }
My problem is, that within IE8 the Information about p[asdf="note"] is ignored. In Firefox everthing is formatted well. As I'm quite new to CSS maybe I'm missing something significant? Any help would be great! thx Hello. I am using a percentage bar javascript code on my website, the problem is, The script works fine in FireFox without adding: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> But only works in IE if I add that code. The problem is, when I do add that code some of my tables go twice the size in height. What is the problem here? Is this going to be easy to fix? What can I do? Thanks a lot, Ben I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hi all. I'm having a small but very annoying problem with my new design. I'm using backgrounds for my divs but somehow Internet Explorer manages to push them one pixel upwards and to the left. I can't find out why and after trying things for three hours I don't know what to try anymore. In both Firefox and Opera it works fine! Here is a screenshot where you can clearly see what goes wrong. The one on the top is Internet Explorer, the one on the bottom is made in Firefox and is how it is supposed to be. URL Site: URL CSS: URL I also found out that the footer of my page doesn't go to the bottom correctly in Opera. If anybody knows how what the problem is there and how to fix it I will be the happiest person on earth Thx in advance. Greetings, Sjoerd I have a div box with a 100% width and a repeating background image on it. Everything works great except when the window is smaller then the actual site. If I resize my window so that the horizontal scrollbar appears, as if I had a 15" monitor, the background image does not go all the way to the edge. Instead it is only the width of the browser window, although the content of that box displays fine. Anyone know how to fix that? Hello, How can add a background color to each table cell in a table header and also add a small image on the bottom right corner of each of those cells? Thanks, Miguel whats wrong with this? body { font-family:arial; font-color:#000000; background:url(background/bg.jpg); } its the background bit that isnt working it works when the css is included on the page but when i put it on a seperate stylesheet it hasnt worked I want to make a webpage with ah gradient border on the left and right side of the page. The gradients will be "fading out" towards the middle. How should I do this? I know how to get one side to show up, but not both. Can I use two different backgrounds in one CSS element? (probably not) Or should I use two different <div> tags with backgrounds set with what I want and are as big as the page? Thanks. I have background image for bullet. However, in Firefox it tries to display several of them for one line, and in IE it is like it should - one background image per line. Ive set background to no-repeat, and it still doesn't work in FF. Help plz. See the problem here http://www.armedassault.org/wp/ someone know how to make a web with background like this... http://netcodigo.webinfo.es/ I tried, but I can't do it. pd: Sorry for my bad english. Is it just IE that using a gif as a background url not work... or is that one of the standards.. I know jpgs work.. but why not gifs? Hi, I'm building a website for my work and got in a little trouble. I do not know if it is just the browser or the code. I'm new to this CSS and HTML so i'm not 100% sure. I needed my background fixed which i had done, and on my home computer the main stuff on my page just floats above the background. On my work computer the main information is when you scroll down, after the background image. I'm confsued and wondering if anyone could help, thanks. Here is also a link to the page so you can see what the problem is, http://www24.brinkster.com/mattphat/ymca2.html Code:
<html>
<head>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
<style type="text/css">
html {height:100%;}body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<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>
<! --- --- BACKGROUND IMAGE --- --->
<div id="bg">
<img src="YMCA/graudal1.jpg" width="100%" height="100%">
</div>
<! --- --- DONE BACKGROUND IMAGE --- --->
<! --- --- MAIN PAGE BORDER--- --->
<div id="content">
<div align="center">
<table width="727" border="1" color="#736F6E" cellspacing="0" cellpadding="0">
<! --- --- DONE MAIN PAGE BORDER--- --->
<!--- --- MAIN PAGE POSITION STAY --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
</td>
<td rowspan="2" align="left" valign="middle" background="" bgcolor="#000000">
<form id="search" name="search" method="get" action="search_results.asp">
<table width="383" border="0" cellspacing="0" cellpadding="0">
<!--- --- DONE MAIN PAGE POSITION STAY --- --->
<!--- --- NWCTYMCA LOGO --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<img src="YMCA/NWLOGO2.JPG" width="727" height="289" border="none" usemap="#Map">
</td>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
</td>
</tr>
<!--- --- DONE NWCTYMCA LOGO --- --->
<!--- --- BARS ABOVE LINKS --- --->
<!--- BLACK BAR --->
<tr>
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<!--- RED BAR --->
<tr align="left" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<!--- STRONG KIDS BAR --->
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2">
<img src="http://www.ymcadc.org/PublishingImages/webuild_tagline.gif" width="360" height="15">
</tr>
</td>
<!--- --- DONE BARS ABOVE LINKS --- --->
<!--- --- LINKS --- --->
<tr bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<td colspan="2">
<div align="left">
<img src="ymca/miniY.jpg"></img>
<!-HOME->
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover" width="89" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-TORRINGTON->
<a href="http://www24.brinkster.com/mattphat/ymcatorrington.html" ONMOUSEOVER=rollover2.src="YMCA/Torringtonlink2.jpg" ONMOUSEOUT=rollover2.src="YMCA/Torringtonlink.jpg">
<img src="YMCA/torringtonlink.jpg" name="rollover2" width="140" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-WINSTED->
<a href="http://www24.brinkster.com/mattphat/ymcawinsted.html" ONMOUSEOVER=rollover3.src="YMCA/winstedlink2.jpg" ONMOUSEOUT=rollover3.src="YMCA/winstedlink.jpg">
<img src="ymca/winstedlink.jpg" name="rollover3" width="109" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-CANNAN->
<a href="http://www24.brinkster.com/mattphat/ymcacannan.html" ONMOUSEOVER=rollover4.src="YMCA/cannanlink2.jpg" ONMOUSEOUT=rollover4.src="YMCA/cannanlink.jpg">
<img src="ymca/cannanlink.jpg" name="rollover4" width="93" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-GIVING->
<a href="http://www24.brinkster.com/mattphat/ymcagiving.html" ONMOUSEOVER=rollover5.src="YMCA/givinglink2.jpg" ONMOUSEOUT=rollover5.src="YMCA/givinglink.jpg">
<img src="ymca/givinglink.jpg" name="rollover5" width="86" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">
<!-ABOUT US->
<a href="http://www24.brinkster.com/mattphat/ymcaaboutus.html" ONMOUSEOVER=rollover6.src="YMCA/aboutuslinks2.jpg" ONMOUSEOUT=rollover6.src="YMCA/aboutuslinks.jpg">
<img src="ymca/aboutuslinks.jpg" name="rollover6" width="104" height="28" border="0"></a>
<img src="ymca/miniY.jpg"></img>
</div>
</td>
</tr>
<!--- --- DONE LINKS --- --->
<!--- --- BOTTOM RED BAR --- --->
<tr align="left" valign="top" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="3">
</td>
</tr>
<!--- --- DONE BOTTOM RED BAR --- --->
<!--- --- BODY TEXT SECTION --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<center>
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P><s>FIX BACKGROUND *DONE*</s>
<P>NEW STRONG KDIS .GIF
<P><s>TOP BAR LINK IMAGES *DONE*</s>
<P><s>NEW LOGO / HEADER BAR *DONE*</s>
<P>SEE ABOUT NEW COLORS FOR LINK ROLLOVERS
<P>LEFT SIDE LINKS FOR EACH PAGE
<P>COPYRIGHT INFO AND REGULAR LINKS AT BOTTOM OF PAGE
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
</center>
<br>
<br>
<center>
<a href="">Home</a> |
<a href="">Torrington</a> |
<a href="">Winsted</a> |
<a href="">Cannan</a> |
<a href="">Giving</a> |
<a href="">About Us</a>
<br>
2009 Northwest Connecticut YMCA.
<br>
The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to
<br>
building strong kids, strong families and strong communities.
</center>
<!--- --- DONE BODY TEXT SECTION --- --->
</div>
</body>
</html>
Am design a site just now this is the image of the site here The problem is the blue background what is the best way to do this just now i have it like this by use a repeat of part of the image but want the cloud part at the top left too. I'm working on a project right now using multiple panels on a site. The idea I am moving forward with has a panel of a solid color with a small 15x15 image in 3 of the corners. I have the basic concept down of staticly moving an image to the three corners, but when I then assign a background color to the container it does not fill the space between the images, only the center. Any ideas/direction would be great! Code: <div id ="filterDIV" style = "background-color: #666666;"> <div style="position:absolute; top:0;right:0; width:15px; height:15px; background-image:url(tr.gif); float:left"></div> <div style="position:absolute; bottom:0;left:0; width:15px; height:15px; background-image:url(bl.gif); float:left"></div> <div style="position:absolute; bottom:0;right:0; width:15px; height:15px; background-image:url(br.gif); float:left"></div> test </div> I'm trying to create some links that swap background images when you mouseover them. The non-CSS solution (which looks exactly how I want it to look) is located he http://84.9.221.75/domains/backingt...Musicindex.html My attempt at creating a CSS equivalent of those links is located on this page: http://84.9.221.75/domains/backingt...Musicindex.html I just need some help with the CSS I'm using on the latter page...I read up a little on how to do this, but it's obvious I'm still doing something wrong... I need the buttons and the text inside the buttons to line up and appear like they do in the first URL....can anyone give me some pointers here? Thank you. Hi, I am trying to make a website for a friend that scales to fit most monitors. The website is very image heavy and I have a navigation bar on the left side that lines up with the background on the right. I haven't made a webpage for awhile so I don't know a lot about CSS. This is what I have so far. It almost works, but the background on the right will not expand to fit the full div, only goes up to the content that I put inside the Div. The background also doesn't appear to shrink when I scale the window size. HTML CODE: Code: <head> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Test Page</title> </head> <body> <div id="sample-container" align="center"> <div id="header"> <img src="images/header.jpg" width="1647" height="147" / id="headerbar"></div> <div id="nav"> <img src="images/navbar.jpg" width="413" height="776" / id="navbar"></div> <div id="content"> <img src="../../../Pictures/Misc/101_0138.JPG" width="527" height="428" /> </div> <div id="footer"></div> </div> </body> </html> CSS CODE: Code: #header
{
height: auto;
background-color: #666;
}
#nav
{
float: left;
width: 25%;
height: auto;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
width: 75%;
height: auto;
background: url(images/mountain.jpg);
background-repeat: no-repeat;
margin-bottom: 10px;
}
#footer
{
clear: both;
height: 50px;
background-color: #666;
margin-bottom: 10px;
}
#headerbar
{
height:auto;
width:100%;
}
#navbar
{
height:auto;
width:100%;
}
If anyone knows a way to expand the background to fill the div and scale down when the div scales is size, that would be great. I was also thinking that maybe I could put the the navigation bar and the background image on the page and not as an background. Put those both in a div and have a floating div on the right aligned over the top of the background that contains the page content. If anyone could give any help with a solution it would be appreciated. Thanks. |
|||||||