|
CSS - .png Clear Background Not Working In Ie
I searched google to see if there was a fix for this problem, and found a few hits, however, the solutions were not solutions. I tried them, yes the backgrounds of my clear .png's were still being filled with some random color.
Is there anyone than can tell me how to make a .png's background clear in internet explorer? Similar TutorialsCan someone explain to my why my "spacer" div is not working (i'm looking in IE7 & Firefox)? Here's the page (I put a 1p border around the "clear" div so that you can see it for testing): http://www.welcome-home-interiors.net/services.php Below is the HTML and CSS... HTML: Code: <body>
<div id="container">
<div id="header">
<?php include('includes/flashHeader.php'); ?>
</div>
<div id="nav">
<?php include('includes/navbar.php'); ?>
</div>
<div id="maincontent">
<div id="mainLeftText">
<p><img src="images/headers/services.gif" alt="SERVICES" width="188" height="49" /></p>
<div id="mainLeft">
<p><span class="header">INTERIOR DESIGN</span><br />
Whether it's simply choosing a paint color or extensively remodeling a kitchen, Welcome Home Interiors can offer you guidance. Space planning and 3D Images are available so that you can visualize your room and make changes before any labor or purchasing is made.</p>
<p><span class="header">REAL ESTATE STAGING</span><br />
"Set the Stage" by rearranging current furnishings and accessories to create your own "model home" - spacious, fresh, and beautiful - exactly what buyers are looking for! As trained professionals, Welcome Home Interiors will assist you in establishing a perfect first impression - an important factor in selling your home for the highest price and in the shortest amount of time. In a 1 to 2 hour consultation we will offer suggestions to enhance your home easily and economically, and leave you the comprehensive list of tasks we've discussed. If you'd prefer, you can enjoy the instant gratification of having us rearrange your space on the spot. We also can add pieces from our inventory to enhance your belongings or even fill your vacant home.</p>
<p><span class="header">ROOM REDESIGN</span><br />
Welcome Home Interiors can give your room a whole new look using the furniture and accessories currently in your home. Want to add a few fresh pieces? Let us provide you with a design plan tailored to meet your lifestyle. We can roll up our sleeves and complete the look for you, or turn over the plan for the "do-it-yourselfers".</p>
<p><span class="header">SHOPPING</span><br />
Do you get overwhelmed by all the options? Or just don't have time to shop? Let's discuss the look you're dreaming of and establish a budget, then Welcome Home Interiors will locate it and bring it to you.</p>
<p><span class="header">YOUR NEW PLACE</span><br />
Welcome Home Interiors will recycle your existing furnishings into your new home. We will offer answers to all of those design questions about paint, window treatments, and finishing touches so you'll soon have the "at home" feeling in your new surroundings.</p>
<p><span class="header">GIFT CERTIFICATES</span><br />
Welcome Home Interiors GIFT CERTIFICATES make wonderful hostess, house warming, wedding, birthday, and special occasion gifts. They can be customized to your needs.</p>
<p><span class="header">FEES</span><br />
Together, Lori and Teri of Welcome Home Interiors are $75.oo an hour for design consulting. Prop rental for real estate staging is quoted per room.</p>
</div>
</div>
<div id="mainRight">
<p><img src="images/indexPic.jpg" alt="Welcome Home Interiors" width="310" height="415" /></p>
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
CSS: Code: html, body {
background: #DACCCC;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0;
color: #6E6E53;
height: 100%;
line-height: 1.5em;
}
a:link, a:visited, a:active {
text-decoration: underline;
color: #6E5256;
}
a:hover {
text-decoration: none;
color: #7F0A32;
}
#container {
background: #000;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
height: 100%;
}
#header {
background-color: #FFF;
width: 100%;
height: 272px;
margin: 0px;
padding: 0px;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav {
width: 100%;
height: 32px;
background: url(../images/nav/navLeftFade.jpg) #7F0A32 top left no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav img {
margin: 0px;
padding: 0px;
width: 126px;
height: 32px;
vertical-align: top;
}
#maincontent {
background-color: #CAD49F;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
overflow: visible;
}
#mainLeftText {
width: 350px;
float: left;
padding: 20px 0px 0px 10px;
margin: 0;
overflow: hidden;
}
#mainLeft {
width: 320px;
padding: 0px 0px 0px 30px;
margin: 0;
float:left;
}
#mainRight {
width: 350px;
float: right;
padding: 50px 5px 0px 0px;
margin: 0px;
overflow: hidden;
}
.header {
font-weight: bold;
text-align: left;
text-decoration: underline;
margin-bottom: 0px;
padding-bottom: 0px;
}
.spacer {
clear: both;
border: 1px solid;
}
/* NAVIGATION ROLLOVERS */
a#home:link, a#home:visited, a#home:active {
margin-left: 150px;
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/home.gif);
}
a#home:hover {
margin-left: 150px;
background-position: -126px 0px;
}
a#services:link, a#services:visited, a#services:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/services.gif);
}
a#services:hover {
background-position: -126px 0px;
}
a#gallery:link, a#gallery:visited, a#gallery:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/gallery.gif);
}
a#gallery:hover {
background-position: -126px 0px;
}
a#testimonials:link, a#testimonials:visited, a#testimonials:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/testimonials.gif);
}
a#testimonials:hover {
background-position: -126px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/contact.gif);
}
a#contact:hover {
background-position: -126px 0px;
}
Thanks!... Greetings, I basically have a few images, and they're small pieces forming a bigger image, i.e., some people call this "slicing". Now I'm trying to use the float and clear properties to make the big image show properly using those smaller slices. So far, I'm having no trouble whatsoever with the big image showing exactly as I want it on Firefox. But Internet Explorer (which I really can't stand anymore) will not show the image properly. Here's the sequence, I hope you'll be able to visualize it easily: 1st image is floated left with clear right, 2nd image is floated left with clear both, 3rd image is floated left with clear left, 4th image is where the problem is, it has to come after the 3rd image, to its right, and a 5th image comes after the 4th, too, on the same line. So I cannot clear either right or left of the 4th image. What happens in IE is that the 4th image, instead of showing up next to the 3rd image (to its right), it goes ALL the way up and stays to the right side of the first image! As if the clear:right of the 1st image and clear:both of the 2nd image are not working at all. Again, this does not happen in Firefox. How can I correct this, please? Thanks for anyone taking the time to give information and tips. I wish the world would abolish internet explorer, it doesn't seem to understand simple commands like the other browsers! My problem is this: i'm building a template from scratch using dreamweaver (for speed really) and I've positioned a left menu div, a breadcrumbs div and 2 other small divs in a row. my next div is the main content which is told to 'clear right' of the last small div in (which is floated right) so that it appears underneath the breadcrumbs and flush alongside the left menu div. Firefox and Chrome seem to understand this, but IE doesn't! in IE it's appending it onto the line above, thereby not 'clearing right' as it's told. You can see it he #wheretoflyguide .com and my CSS is below: #menu_left { background-color: #9CF; float: left; min-height: 200px; width: 180px; } #breadcrumbs { float: left; height: 16px; width: 485px; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-bottom-style: groove; border-top-color: #CCC; border-right-color: #CCC; border-bottom-color: #CCC; border-left-color: #CCC; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; text-indent: 3px; margin-left: 3px; color: #999; } #rss_date_user1 { height: 16px; width: 145px; float: left; border: thin none #999; margin-left: 2px; margin-top: 1px; } #date_user5 { height: 16px; width: 160px; float: right; text-align: right; margin-right: 3px; } #content_area { min-height: 200px; width: 480px; clear: right; float: left; background-color: #C93; margin-top: 3px; margin-left: 3px; } I also have another problem, and that is I've made a container to wrap everything in but it doesn't seem to want to extend with the contents. I have put body { height :100%; } and #container {min-height :100%} but that didn't give me anything on screen, so I changed it to #container { min-height:768px} which gave me a box that was 768px tall but doesn't extend beyond that when the content goes beyond it. (yes i have everything wrapped inside <div id="container"> </div> PLEASE HELP! I'm trying to do < td background="image" , i actually have the settings in a .css file, but it's not working for internet explorer. So, in my css file i have the background-image : image; and then in the html i have the <td=class so and so. but internet explorer makes the box smaller than it should be. Oh, and also i have designed the height: 108px; and the width in the style sheet.. i originally had it in the html, but either way, it still does this. rocktvs.t35.com <===here any suggestions? for some reason my background color won't show in firefox.. http://losemybreath.org/ take a look in IE and then in FF, I can't for the life of me figure out why it's not working.. any ideas? this is the css Code: body {
margin: 0;
padding: 0;
background: #ECF0CD;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #666; }
#header {
margin-left: 25px;
width: 800px;
height: 524px;
background: url(http://www.losemybreath.org/images/greenlayout.jpg) no-repeat;
}
#center {
margin: auto;
width: 800px; }
#content {
width: 495px;
margin: auto;
text-align: left;
background: #BCD4B2; }
#blog {
float: left;
margin-left: 10px;
width: 290px;
text-align: justify;
display: inline;
background: #BCD4B2; }
#sidebar {
float: right;
margin-right: 10px;
width: 165px;
text-align: justify;
display: inline;
background: #BCD4B2;}
p {
font: 12px Arial, Helvetica, sans-serif;
color: #666;
margin-top: 0;
text-align: justify; }
h1 {
text-align: center;
background-color: #ECF0CD;
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
letter-spacing: 3px;
font-weight: bold;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #77936C; }
ul,li {
list-style-type: none;
margin: 0;
padding: 0; }
a:link, a:visited {
color: #669257;
text-decoration: none; }
a:hover,a:active {
color: #666666;
background: #ECF0CD;
text-decoration: underline; }
hr {
width: 100%;
color: #ECF0CD; }
.right {
float: right; }
textarea, select, input {
color: #666666;
background: #ECF0CD;
border: 0px none;
margin: 0px;
padding: 2px;
font: 10px Arial, Helvetica, sans-serif; }
#question {
border: 1px solid #ECF0CD;
padding: 2px; }
I'm trying to make a div have a background image that only appears down the left hand side, I thought that this would be simple enough but I got no background image at all. Code: div.bar { color: #000000; background-color: #cccccc; background-image: url(gfx/fade.gif);
background-repeat: repeat-y;}
Code: <div class="bar">Writing and stuff</div> What am I doing wrong? If it helps, here is the whole css file and here is the page I'm trying to use it on. I am trying to manage the background repeat using CSS. I have tried as many html hacks as I can think of, but none seems to work. Here is a sample of my style sheet .content{ padding: 0px;margin:0px; width:961px;height:100%; float:left; } #bgLeft { width:5px;height: 100%; min-height: 100%; background: url(img/bg_left.gif) repeat-y; float:left; } #bgRight { background:url(img/bg_right.gif) repeat-y 100%; width:5px;height:100%; min-height:100%; float:left; } .bodyMain{ padding: 0px;margin:0px; width:735px;height:100%; background-color: #f8f8f8; float:left; } And here is a copy of my html <div class="content" align="left"> <div id="bgLeft"> </div> <div class="bodyMain" > <!-- ###CONTENT### --> </div> <div id="bgRight"> </div> </div> n.b.: the content of my site must have two lines images (one left and one right - see bgLeft and bgRight stylesheet), whose height depends on the content space. In IE7 I can see the bgLeft and bgRight images, but not for all the vertical height, in Firefox I cannot see anything. Any ideas? thanks Hi, I have the following code:
Code: <div id="nav">
<ul class="nav">
<li>
<a href="/webdesign/">web design</a>
</li>
<li>
|
<li>
<li>
<a href="/web programming/">web programming</a>
</li>
</ul>
</div>
My CSS looks like this :: Code: #nav {
z-index:999;
position:absolute;
margin-left:246px;
margin-top:105px;
background-image:url('images/common/navbar.png');
width: 777px;
text-transform: none;
text-decoration: none;
border-bottom-style: none;
}
.nav{
background-image:url('images/common/navbar.gif');
}
The background image isn't showing up in the div or the <ul> . I've been staring at this for a while and can't figure it out. Does anyone see what I'm doing wrong? I know my path to the images is correct. thanks -Sean Hey Guys! Trying to add a background position to a div and position it top right. Works in FF and IE7, but IE6 wants to put it top left. Code: background: $hexcolor url(/v2/PHP/img/$logo) no-repeat top right; www.RoundtopRiders.com/v2/videos/ Thank you in advance! I'm trying to set the background image of my header and for some reason its not being applied at all. CSS: Code: #header
{
background: url('../Images/Master/Header_Background.jpg');
color: White;
width: 1000px;
height: 150px;
position: relative;
}
The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing. Thanks. Disregard pot I simply transposed li and a tag thanks anyway... Hi everyone, I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore. Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus. When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image. So what doesn't work? Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7... Please help me...!! I've attached the relevant code, added comments and colored the parts that I think might cause the problem. html: Code: <div id="globalnav">
<ul id="menu1">
<li id="nav_home"><a href="../home/" title="Home">home</a></li>
<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
</ul>
<ul id="menu2">
<li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
<li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
<li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
</ul>
</div>
css: Code: @charset "utf-8";
/* English Menu bar */
/* Box for the entire menu (two rows of ul) */
#globalnav {
height: 130px;
width: 675px;
}
/* Create box and put background image for each menu line */
#globalnav ul#menu1 {
height: 62px;
width: 675px;
background: transparent url(../images/menu1.jpg) top left no-repeat;
padding: 0;
position: relative;
margin: 0 0 5px 0;
}
#globalnav ul#menu2 {
height: 62px;
width: 675px;
background: transparent url(../images/menu2.jpg) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}
/* Boxes for each link square on the menu */
#globalnav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 75;
}
#globalnav li, #globalnav a {
height: 62;
display: block;
}
#globalnav a {
line-height: 62px;
text-decoration: none;
text-indent: -9999px;
display: block;
}
/* Define the area on the background image of the ul which coressponds to each link box */
#nav_home {left: 0; width: 75px;}
#nav_about {left: 225px; width: 75px;}
#nav_recruit {left: 525px; width: 75px;}
#nav_company {left: 150px; width: 75px;}
#nav_clients {left: 375px; width: 75px;}
#nav_contacts {left: 600px; width: 75px;}
/* Maybe the next part is unnecessary... */
#nav_home {background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about {background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit {background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company {background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients {background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts {background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}
/* Hovered menu items */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */
#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */
body#home #nav_home {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6. Oh and I'm using transitional DTD. is that ok? I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px. I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions. Thanks for your help! Open in FF to see how it's supposed to work: Open in IE to see problem. Here's the HTML Code:
<div id="Menu">
<div id="nav_header">
<div id="text">
Admissions & Financial Aid
</div>
</div>
<ul id="nav_level_1">
<li id="submenu"><a href="../index.php">Applying to Union</a></li>
<ul id="nav_level_2">
<li id="nav_active"><a href="index.php">Types of Admission</a></li>
<ul id="nav_level_3">
<li><a href="Transfer.php">Transferring to Union</a></li>
<li><a href="Early.php">Early Decission</a></li>
<li><a href="Regular.php">Regular</a></li>
<li><a href="international.php">International Admission</a></li>
<li><a href="aop_heop.php">AOP/HEOP</a></li>
<li><a href="Medical.php">Eight-year Medical</a></li>
<li><a href="Law.php">Six-year Law</a></li>
<li><a href="MBA.php">Five-year MBA</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../Applications.php">Apply Online</a></li>
<li><a href="../Forms/index.php">Download Application Materials</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../../FAQs/index.php">Have a Question?</a></li>
<li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>
<li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>
<li><a href="../../interviews.php">Interviews</a></li>
<li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>
<li><a href="../../About/index.php">Admissions Staff</a></li>
<li><a href="../../AlumniAdmissions/index.php"></a></li>
<li><a href="../../Media/index.php"></a></li>
<li><a href="/union/admissions/Viewbook/index"></a></li>
<li><a href="/union/admissions/Alumni/index"></a></li>
<li><a href="../../sample.php"></a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
</div>
Here is the pertinent CSS Code:
/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color: #d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#nav_level_2 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
#nav_level_3 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#e5dece;
line-height:17px;
word-wrap: break-word;
}
/* End unordered list base styles */
/* To get indented, wrapping, text that's cross browser compatible
we need to additionally style the unordered lists and line items under each top <ul>
*/
#nav_level_1 li {
margin-left:20px;
}
#nav_level_1 li ul {
margin-left:-20px;
}
#nav_level_2 li {
margin-left: 40px;
}
#nav_level_2 li ul {
margin-left:-40px;
}
#nav_level_3 li {
margin-left:60px;
}
#nav_level_1 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 4px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 20px;
}
#nav_level_2 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 24px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 40px;
}
#nav_level_3 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 44px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 60px;
}
#Menu #submenu {
list-style-type: circle;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#submenu2 {
list-style-type:circle;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
Hi, I wanted to make active page link as bold and blue. When I hover the menu/link it works but when I click the menu item/link it doesn't. Here is my script. Please help its driving me crazy. #menu { font-family: "trebuchet ms", verdana, sans-serif; font-size: 14px; font-weight: none; position: absolute; height: 27px; top: 60px; left: 0px; width: 100%; padding: 0px; color: #000000; background-color: #eee } a:link { font-weight: none; text-decoration: none; color: #000; } a:visited { font-weight: none; text-decoration: none; border-bottom: 1px dotted #369; color: #000; } a:hover { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } a:active { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } #menu a:active { text-decoration: underline; font-weight: bold; border-bottom: 1px solid #036; color: blue; } Am trying to solve an annoying IE problem: I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas? The code is: Code: #item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }
*** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work. Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;" I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed. Thank you for any help. Tom Hi, I want to put a background image for a div section of my site. It works fine in i.e. but i can't get it to show up in firefox. Does anyone know why? CSS: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 16px;
background: #330000;
text-align:center;
margin: 0;
padding: 0
}
#mainarea {
background-image:
url('alexandertea_bg_v03.jpg');
width: 719px;
height: 650px;
}
HTML: Code: <body> <div class="topbar"> <img src="images/lemonreghome.gif" id="home"> <img src="images/lemonregstory.gif" id="story"> <img src="images/lemonregwheretobuy.gif" id="wheretobuy"> </div> <div id="mainarea"> Hellow </div> </body> 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? The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways? Thanks, Carlos Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
|
|||||||