|
CSS - Problem Displaying Background
Hi. i have a table with all my content inside and im trying to change the background color of the area outside of the table in my css file im using:
body { background-color:#000000; } in dreamweaver it displays the area as black but when i upload the css file and try to view the page it shows it as white. i've checked it in IE And firefox.. what am i doing wrong? Similar TutorialsMy logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? http://buffalonationsmuseum.ca Right now the property is just "background" but I have tried... background-color: I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable. This is my html: Code: <div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div> <div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0" /></div> This is my css: Code: body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr {position:static; width:auto; min-width:0px; min-height:100%;
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}
any help would be greatly appreciated. Thanks! Hi all. I've tried searching the net but every solution either isn't applicable or doesn't work. My problem is that all my CSS background images are not displaying at all in ie7. they are called in via link id. so: PHP Code: <a href="javascript:void(0)" id="cus" onClick="changeCus()"><img src="/images/space.gif" height="30" width="50" alt="" title="Customer Ratings" /></a> fairly simple stuff. the corresponding css is PHP Code: a#cus{background:url("../images/custM.png")no-repeat;left:-140px} I have treid changing the link as in ../../images... but that was dumb. Adding a background position. Adding display:inline. Adding display:block. Can anyone please aligten me as to why all my css images are failing. It works fine in FireFox. My doctype is set to strict. It is the correct path to the images. The images are on the server. Any help would be greatly apprcieated. Thanks in advance Jaza I'm using ASP.Net with Firefox and IE. I'm at a loss as to why this isn't working. I did the exact same thing in notepad and it worked fine but when I use ASP.Net, it doesn't show. CSS Code:
.headbg
{
width:auto;
height:125px;
background-image:('test.png');
}
#headercontainer
{
width:auto;
height:125px;
text-align:center;
background-image:('test.png');
}
ASP.Net code Doesn't display Code:
<div class="headbg">
test
</div>
Doesn't display Code:
<div id="headercontainer">
test
</div>
Displays Code:
<img src=test.png />
Hi Guys i wondered if someone can help with a little problem I have, I have got a little contact form with an image submit button. I have included the source code that displays in firefox ie7 and ie 8 but doesnt display in IE6 and I am pulling my hair out. Please help guys Css .button { width:200px; height:80px; margin: 0; padding: 0; border: 0; background:url(images/button.png) no-repeat center top; text-indent: -1000em; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ HTML <td colspan="2" class="boldenquire2"><input name="send" type="submit" class="button" onclick="return checkForm();" value="" height="80" width="100" /></td> </td> thanks I've got a mostly-css layout he http://highballsociety.com/~lwco/test.php Using the following CSS page he http://highballsociety.com/~lwco/lwc.css For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help. Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes. Thanks, m__ I have edited this page down to be bare-bones for ease... The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made. When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education. http://www.centerpointpilates.com/welcome2.html code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding">
<h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content">
<div id="navigation">
<ul>
<li><a href="/welcome.html">WELCOME</a></li>
<li><a href="/studio.html">STUDIO</a></li>
<li><a href="/getting-started.html">GETTING STARTED</a></li>
<li><a href="/classes.html">CLASSES</a></li>
<li><a href="/schedule.html">CLASS SCHEDULE</a></li>
<li><a href="/workshops.html">WORKSHOPS</a></li>
<li><a href="/pricing.html">PRICING</a></li>
<li><a href="/instructors.html">TEACHERS</a></li>
<li><a href="/contact-us.html">CONTACT US</a></li>
</ul>
</div>
<!--end navigation-->
<div id="text">
<h2>Welcome</h2>
<p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each
individual on a program of exercising the body and mind. Our certified teachers
provide exceptional guidance in private, group, and class settings. The
studio is equipped with classic and contemporary exercise apparatus and
boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>
</div>
<!--end text-->
</div>
<!--end content-->
</body>
</html>
style sheet code: Code:
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
list-style: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/* normalizes links */
a:link {
text-decoration: none;
color: #6b9d98;
}
a:hover {
color: red;
}
a:visited {
text-decoration: none;
color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
background-color: #F6EEC2;
text-align: center;
}
body {
font-family: Arial, sans-serif, Geneva, sans-serif;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: relative;
}
bodyBold {
font-family: Arial, sans-serif, Geneva, sans-serif;
font-weight: 700;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: absolute;
}
/*html#orchid {
background-image: url(/images/orchidYellowOverlay2.jpg);
background-repeat: no-repeat;
background-position: top left;
}*/
#branding {
background: url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
height: 70px;
margin: 0 0 30px 0;
}
div#content {
position: relative;
width: 100%;
}
div#navigation {
position: absolute;
left: 0;
width: 13%;
padding-top: 1em;
}
div#navigation li {
font-weight: bold;
font-size: .9em;
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: center;
margin: 0 0 20px 0;
}
div#text {
position: absolute;
left: 17%;
width: 80%;
border-left: 1px solid #6B9D98;
padding-left: 10px;
}
div#site_info{
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif, Geneva, sans-serif;
font-size: .9em;
font-style: italic;
color: #6B9D98;
padding-bottom: 3px;
}
h2 {
font-size: 1.35em;
}
indentBox {
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: left;
margin: 0 0 0 0;
}
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 Ok I managed to fix my problem with firefox... Now I am having a MAJOR problem with IE7. I am creating a shopping page, and none of my lists are displaying correctly in IE7 I have spent hours and hour and hour and hours looking for hacks and fixes and I can not find any reason why. I have a shopping menu to the left side of my main content... and it displays off to the side, very very beautifully, in EVERY browser except IE 7... even thought it displays in the right spot in IE6!!! In IE 7, the shopping menu displays INSIDE the main content, not to the LEFT of the Main, like it does in EVERY other browser I NEED to get this off to my client VERY soon, and I am out of ideas of what is causing this. I DONT want to have to redesign my entire page just to accommodate one stupid browser, because i LOVE how it looks fits my clients japanese site... Here is my CSS #shopping-bracket{ width: 950px; min-height: 200px; margin:0 auto; } #shoppinglist { width:100px; height: 600px; float: left; position: fixed; visibility: visible; top:60px;} #shoppinglist li { float: right; list-style: none; background-image: url(images/shoppingmenu-bgsmall.gif); width: 100px; min-height: 10px; } #main {background-color: #ffffff; margin: 0px auto; top: 81px; width: 732px; min-height:600px; } my page is here http : // www pinktanpopodesigns com / babyconcept3 / shopping . html please please please, I really need to get this fixed... thank you for your help I have recently changed my web site from being totally formatted using tables to being CSS based. I am not an expert at CSS so I have probably got some pretty bad code, so I cower somewhat in asking for help. Please don't be upset with me. I have a problem with my web site displaying on IE 5.2 on a Mac OS X (10.3.6). I have no assess to this but a user has sent me a screen capture, and it doesn't seem to even be recognising the CSS. It displays okay on IE6 for Windows. My web site is at: http://www.elviscostello.info/ Your help would be greatly appreciated. Thanks a lot, JohnE Hi , I am really stuck in this css . i have tried a lot but cant get it working right in i.e6 . It is working fine with firefox but not i.e 6 .I am already using a javascript which makes css works for i.e 6 . i have attach the image where it shows the difference . Here is my css code . Code:
#nav, #nav ul{
margin:0 0 0 18px;
top:auto;
padding:0px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2em;
font-weight:bold;
font-family:"times new roman";
letter-spacing:-1px;
font-size:17px;
}
#nav li ul{
font-size:15px;
font-weight:normal;
background-color:#000000;
width:auto;
height:auto;
top:auto;
margin:0;
letter-spacing:0px;
border:0 none black;
}
#nav a{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
}
#nav a:hover{
color:#FFB208;
cursor:pointer;
}
#nav li{
float:left;
position:relative;
margin:0 0 0 12px;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:33px;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
vertical-align:text-top;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0 0 0 10px;
float:left;
right:auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
Javascript code:- Code:
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
}
);
}
$(document).ready(function(){
mainmenu();
});
Is there anything more i need to do in my css file? Regards, Umair Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) http://jsfiddle.net/AQh6y/3/ I want example this (for how): what do i do? CSS: Code: .show_tooltip{
background-color: #E5F4FE;
display: none;
padding: 5px 10px;
border: #5A5959 1px solid;
position: absolute;
z-index: 9999;
color: #0C0C0C;
/*margin: 0 0 0 0;
top: 0;
bottom: 0;*/
}
HTML: Code: <ul>
<li>
<div class="show_tooltip">
put returns between paragraphs
</div>
<a href="#">about</a>
</li>
<br>
<li>
<div class="show_tooltip">
for linebreak add 2 spaces at end
</div>
<a href="#">how</a>
</li>
</ul>
jQuery: Code: $("li a").mouseenter(function(){
$(this).prev().fadeIn();
}).mousemove(function(e) {
$('.tooltip').css('bottom', e.pageY - 10);
$('.tooltip').css('right', e.pageX + 10);
}).mouseout(function(){
$(this).prev().fadeOut();
})
My friend has been working with a charity, and apparently their website is outdated. I have decided to attempt giving them a new look but already find myself having some CSS issues. In FireFox things are looking good so far, but not in IE. I would like someone to first help me with the list items <li> I want them to appear in IE the same as they do in FF. Can you help me with this? Ugh, I'm trying to add an URL but new users can't what a waste of time this has been! If you can work this out, here is the URL: http:// thomasjadams.co.uk / charity Hi All, I need someone's eye to find mistake in my simple code which is not responding in FF. I have one main div and 2 sub divs under that main div. The main div contains Background-color: white which, FF is not showing. It is working in IE but FF is not showing it. I don't know if I am missing something here but I am not able to figure out what is the problem here? Can some one please point out any error from the below code. I will be greatful to you. Thank you. PHP Code: <html> <head> <title>Untitled 2</title> <style> #Navigation { width: 779px; height: 25px; background-color: #CCCC33; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #222; text-align: left; padding-top:2px;} #ContentMain { width: 779px; background-color: #fff;} #ContentBody { width: 579px; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:yellow; text-align: left;} #ContentRight { width: 200px; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:green;} </style> </head> <body bgcolor="red"> <center> <div id="Navigation"><span style="padding: 10px;">Home | SiteMap | Contac Us</span></div> <div id="ContentMain"> <div id="ContentBody">A<br>B<br>A<br>B<br>A<br>B<br></div> <div id="ContentRight">A<br>B</div> </div> </center> </body> </html> Please see http://tinyurl.co.uk/33te In the div #maincontainer I have had to set a height of 480px just to get the background to show. You will see that in IE the background extends all the way down the page but in FF only by 480px If I remove the height then the background doesn't show up in either IE or FF at all. This is confusing me because normally the background repeats fine all the way down without any height setting. I don't want to set a fixed height because each page is different. Also there's a gap above the main image in FF which I'd like to remove. thanks for any help css - #maincontainer { background-image: url(images/mainbackground.gif); background-repeat: repeat-y; height: 480px; } Hi mates. Can someone please give me some support on how to fix this. http://www.caprelations.com/cap.htm That is the site im working on. The white in the back is a div, and I have applied width and height properties to it, but it seems not to follow that. You see I dont want the white to exceed down that far, I want it to stop right underneath where it says click here for brochure. Any idea on how to fix this? Hey Guys, as you see I'm new here and it would be quite cool if someone here can help me. i need this problem to be solved.. finally^^ So here's the problem: I'm on starting a new website and the guy for the graphics sent me his design. Looks quite cool but there's one problem: There's a background which needs to be separated into three parts. To make my problem clear i made a short sketch, see he As you see, Part I is always in the top left corner, ok that shouldn't be the problem. But here is where it gets tricky: No matter which screen resolution there is, Part II should show up in the top right corner. And the next Problem is: Part III should always be on the bottom, and these two things are a problem^^ Anyone got an idea? Would be quite yool if someone knows what to do.. Lukas I'm redesigning my website comdots.com. I'm puzzled by my body background line. If I delete the repeat-x; statement I get no background, just a white background. What I was expecting was that the background would repeat itself down both sides and across the bottom, which is what want. If I include the repeat-x; statement I get what you would expect and as shown on my website. So what should I change in my style.css file in order to get my background on the top, bottom, left, and right. |
|||||||