CSS - Weird Background Issue
Hi Everyone,
Sorry for the (probably) dumb question, but I've been searching for answers and can't seem to figure this out. I am brand new, only using CSS because WYSIWYG and unnecessarily long HTML codes are infuriating and I was begged to try making a web page. Anyway, I guess I'm not as smart as I thought I was--when I put the following into my style sheet, I get the layout I want (because I copied it from a how-to site), but the color (which I put in) is only directly around the text, with white space on top, between the sections and on the bottom and sides. What I really want is some sort of textures thing that I found, but I figure that that will come once I can get a color to work (the same issue came up when I tried it). How do I make this work? Again, I apologize for the inane question, but all the help sites I find are too simplistic, don't show all of this put together, or have big words that I don't understand. Care to be nice anyway and give me a hand? Thanks! ~Tasha body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;} #menu { position: absolute; left: 10px; padding: 0px; width: 250px; background-color: blue} #content { margin-left: 260px; padding: 0px; margin-right: 15px; background-color: blue} Similar TutorialsHey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks! PHP Code: <div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');"> <div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div> <div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div> </div> (images attached) -Jim hey all, i'm having a really strange issue with firefox users on windows. basically, my site is simple. i've got navigation on the left, and a content table on the right. it's all done with CSS. firefox users on windows have been complaining that sometimes (not all the time) the content window has been loading half way. it's beendoing this on numerous PCs with firefox, and i can't figure it out. sometimes it loads the whole content box, sometimes it stops half way. it's fine all the time in IE on both platforms, and firefox on a mac. here is the code i'm using for the content boxes: #content_table { FONT-FAMILY: Verdana, Helvetica; width: 60%; margin: 0 auto; border: 1px solid #999; overflow: hidden; } #content_table h2 { FONT-FAMILY: Verdana, Helvetica; margin: 0; -moz-opacity: 1; font-size: 15px; text-align: left; padding: 2px 0 2px 15px; font-weight: bold; background: #000 url(../../../../images2/title.png) repeat-x; color: #fff; border: 1px solid #000 } #content_table p { font-size: 12px; FONT-FAMILY: Verdana, Helvetica; -moz-opacity: 1; padding: 5px; background: #333333; color: #FFF; margin: 1px } if you're on a PC, check it out: link thanks! New accounts are not allowed to create posts containing URLs because the developers of this site are incapable of anti-spam measures that do not hinder legitimate users. So goodbye. I won't let the door hit my *** on the way out. Hi guys, im new to the webdevelopment world and humbely request your help (However you may see me in the adobe related areas, i have experience there ) Im currently making a profile for my work. Here are the problems that i couldnt solve through research on other places. 1. I have this odd looking shadow appearing on the hover boxes i got (Thanks to jquery). PHP Code: .menu li { padding: 0px; margin: 0px 6px; float: left; position: relative; text-align: center; width: inherit; } (apparently its something to do with float requiring a width, but i dont fully understand..) 2. The way i have set out my body is to have greater priority to repeating-y whitebox (Its part of a double background thing i attempted) to center along with the background image set in the element html. Because of this my text is totally off, so i was wondering on how to fix this issue (i was thinking about using div tags, but im not exactly sure how to do it). It is also weird how i need to have a 4px margin to align the boxes (even though they are the same width and are positioned to centered). Help on this issue would be greatly appreciated ! Many thanks in advance <3! Notes: I have passed with no warning or issues with the Markup Validation test and CSS test at w3. I have also looked at other blogs and help threads (Like in the adobe comments), but its hard to find something your unsure what it is! refrence: renren.tssma .com Hi, In IE the sidebar background image appears ok yet in FF it doesnt. ***************** Does anyone know how i can fix this? Another issue that will be a problem in the future is that in IE7 it doesnt display the background or the header correctly Thanks, Mike Even though I have used the background-color property, the background doesn't change to the color I specified. (CSS class "tutorial2" should have a gray background (#EDEDEC), but it doesn't display.) (I trying to create altnernating background for easier reading.) Code: .tutorialpreview { padding-right: 4px; padding-left: 4px; float: left; padding-bottom: 2px; padding-top: 2px; border: 0px; height: 50px; width: 50px; } .tutorial { height: 54px; margin-bottom: 4px; } .tutorial2 { background-color: #EDEDEC; height: 54px; margin-bottom: 4px; } .tutdesc { height: 52px; padding-top: 3px; background-color: transparent; } XHTML Code: Code: <div class="tutorals"> <a href="http://www.depiction.net/?id=psimagemapdrawingtools"> <img src="images/imapdrawingtoolspreview.gif" class="tutorialpreview" alt="" /></a> <div class="tutdesc"><a href="http://www.depiction.net/?id=psimagemapdrawingtools"> <strong>Image Maps with Drawing Tools</strong></a><br /> Use Image Ready to automatically create image maps using many drawing tools to select complex shapes.<br /></div> </div> <div class="tutorials2"> <a href="http://www.depiction.net/?id=psinterface"> <img src="images/psinterfacepreview.gif" class="tutorialpreview" alt="" /></a> <div class="tutdesc"><a href="http://www.depiction.net/?id=psinterface"> <strong>Photoshop Interface</strong></a><br /> An overview of the toolbox, palettes, the option bar, and tool presets in Photoshop's Interface.<br /></div> </div> Any thoughts? Pleaes look at this page in FF and IE - www.tmhdesign3.com In FF you see the unwanted gap at the top? The issue is with the <div id="content"> element. If I style that element with a border-top:1px solid transparent the gap closes and it looks fine, but IE does not recognize the transparent on a border. Can someone tell me how I can get rid of that gap in FF? Thanks. Tom I have menu on my site using ul il with a background image. It works fine in Chrome and Firefox but I can't get it to work in IE. this is th code I'm using Code: <div class="menu"> <ul> <il><a href=\"http://www.netgamegurus.com/index.php\">Home</a></il> <il><a href=\"http://www.netgamegurus.com/forum/index.php?action=register\">Register</a></il> <il><a href=\"http://www.netgamegurus.com/contact/index.php\">Contact Us</a></il> <il><a href=\"http://www.netgamegurus.com/about/index.php\">About</a></il> </ul> </div> with this CSS Code: .menu { height:26px; position:relative; background-image:url(../images/menu_bg_001.jpg); background-repeat:repeat-x; } .menu ul { font-size:18px; clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } .menu ul il { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } .menu ul il a { padding: 0px 0.5em; text-decoration: none; float: left; color: #FFFFFF; background-image:url(../images/menu_bg_001.jpg); height:25px; border-left: 1px solid; border-left-color:#000099; border-right: 1px solid; border-right-color:#000099; } .menu ul il a:hover { color:#CCCCCC; } Any one have any ideas on this? Hi, Usual story, ive got the site working great in IE but FF has a little problem with the white background. Its like the content isnt actually inside the inside div: (school section example) <div id="new_outside_school"> - the colour box <div id="new_inside_school"> - the white centre LINK TO SITE HERE ive been messing and got the 'our school' section slightly better but its still not right, any ideas? Thanks. Mike I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu Based on that I've created a sprite image that is 960x88. I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing. Here is my HTML and CSS: html Code: Original - html Code <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav> <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav> css Code: Original - css Code #main_nav { height: 40px; } #main_nav li { float: left; } #main_nav li a { background:url(../images/main_nav_sprite.png); display: block; height: 40px; } .home { background-position: 0px 0px; width: 60px; height: 40px; } .case_studies { background-position: -60px 0px; width:120px; height:40px } .solutions { background-position: -180px 0px; width:100px; height:40px } .free_quotes { background-position: -280px 0px; width:100px; height:40px } .government { background-position: -380px 0px; width:120px; height:40px } .recycle { background-position: -455px 0px; width:75px; height:40px } .resources { background-position: -555px 0px; width:100px; height:40px } .about_us { background-position: -642px 0px; width:87px; height:40px } .contact_us { background-position: -748px 0px; width:106px; height:40px } .login { background-position: -822px 0px; width:74px; height:40px }
I am using eclipse ide to develop a html page. It has a preview function where I can see the background image correctly. However when I run this in a an external browser (IE/Firefox) the background image does not appear. I can go to the location of the image in the browser and see it, also I can view source in browser and it is as below. Also the image is in the same directory as the html page. Any help at all on this would be very much appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <style> body {margin-left: 0px;margin-right: 0px;background:url(bg-gray.gif) repeat center left;color: #000000;} </style> <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> <title>Login</title> </head> <body > </body> </html> CSS : Code: body{ margin:0; background-image:url(images/pattern1.gif); padding-left:5%; padding-right:5%; } h1{ background : url(images/logo.gif) no-repeat; width:291px; height: 127px; } #main{ background : #FFFFFF url(images/back.gif) repeat-x; border-left: 8px solid #5D5F60; border-right: 8px solid #5D5F60; } HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" title="standard" href="blueDream.css"/> <title></title> </head> <body> <div id='main'> <h1></h1> </div> </body> </html> There appears to be a very strange gap on the left side of the heading background which I cannot seem to get rid of. Any ideas? Hi, I'm getting a weird problem when viewing my client's site with IE6, however, it works fine in IE7 and FF. Here's the link: http://www.groundedgroup.com/client...or-sale/554421/ As you'll notice, the middle area containing the description of the home is messed up. Basically, the background resizes as you move the browser scroll bar up and down. Never seen this before. Does the same with the comment area below, too. Any ideas what's causing this? Thanks in advance. for some reason i cant figure out, i cant get a background image to show up at all in my document. ive tryed validating both CSS and HTML, ive tryed different approaches to adding a background image in CSS and even removing individual styles to try to find the source of the issue. I am new to this forum and this is my first post. if anyone can tell me why this isnt working i would greatly appriciate it. here is the code: Code: <html> <head> <title>Home</title> <style type="text/css"> body { background:#3D1400; } /******modual positioning******/ div#container { width:48em; height:41em; margin-right:auto; margin-left:auto; margin-top:auto; margin-bottom:0em; padding:1em; padding-top:0em; background:#00BFBF; } /******* this is where im trying to put a background image*/ div#headding { background:url("") purple repeat-x; width:48em; height:4em; padding:1em; margin-bottom:3.5em; margin-left:-1em; } img.bd { position:relative; width:50em; height:0.5em; left:-1em; top:-0.5em; } nav { margin-top:-1em; margin-left:0em; margin-bottom:3em; width:48em; height:1.5em; background:#ffffff; padding-left:0em; border-radius:0.2em; } /*side bar*/ div#side_left { width:10em; height:29em; float:left; background:#4CD2D2; } #contests, #featured_blog, #featured_discussion, #featured_poll { width:10em; margin:0.8em; color:#0D1A8C; font-weight:900; font-size:0.8em; background:#79DDDD; padding:0.5em; } hr.side { border:0.1em solid #0D1A8C; width:10em; } /*side bar end*/ div#featured_photo { float:left; margin-left:1em; width:20em; height:20em; background:#000000; overflow:hidden; border-radius:1em; } div#top_rated_photos { float:right; width:16em; height:20em; background:#111111; } footer { position:relative; height:4em; width:58.6em; margin-right:auto; margin-left:auto; background:#000000; text-align:center; padding:2em; font-size:0.8em; } a.f { color:#ffffff; text-decoration:none; border-right:.1em solid #ffffff; padding-right:1em; margin-right:0.3em; padding-left:0.3em; margin-left:0.3em; } /**********Photo Gallery**********/ a.tr_img img.top_r { height:3.9em; width:3.9em; float:left; border:0.1em solid #000000; } a.tr_img img.top_r:hover { margin:0em; border:.1em solid #ff0000; } /******text styles******/ h1 { font-size:2em; text-transform:capitalize; border-bottom:0.2em solid #8C8CE8; color:#8C8CE8; } span#fp { color:#999999; float:right; margin-right:1em; font-weight:bold; display:block; } /***************************************NAVIGATION BAR***************************/ /*top level styles*/ ul.top_link li { float:left; background:#ffffff; position:relative; display:inline; border-right:0.1em solid #00BFBF; border-left:0.1em solid #00BFBF; } ul.top_link a { display:block; position:relative; font-size:1.3em; color:#000000; text-decoration:none; padding-left:1em; padding-right:1em; } /* style the top level hover incase images fail *//* dropdown ul styles */ ul.top_link li.sub_link a { padding-right:0.5em; padding-left:0.5em; width:8em; } ul.top_link >li:hover { background:#000080; } ul.top_link >li>a:hover { color:#ffffff; } ul.top_link li:hover.sub_link, ul.top_link li.sub_link a:hover, ul.top_link li.sub_link a.mn_active { background:#000080; color:#ffffff; } /********* dropdown sytles *********/ ul.top_link li ul { position:absolute; top:2em; left:0; z-index:1; visibility:hidden; } ul.top_link li > ul { top:auto; left:auto; } ul.top_link li:hover ul, ul.top_link, ul.top_link a:hover ul { visibility:visible; } ul.top_link ul li { border:none; height:auto; float:left; width:8em; top:0.15em; left:-2.6em; padding:0em; text-align:left; background:#ffffff; } ul.top_link ul li a { float:left; font-size:0.8em; text-decoration:none; display:block; height:2em; line-height:2em; text-align:left; } /************************** ~DROPDOWN STYLES~ *************************/ .top_link li.sub_link ul { background:#ffffff; padding-left:0em; } .top_link li.sub_link ul li a { width:8em; } .top_link li.sub_link ul li a:hover { background:#000080; color:#6385A6; } </style> <base href="index.html" /> </head> <body> <div id="container"> <div id="headding"> <h1>Welcome to purple panda bear ♥</h1> <img src="" class="bd" /> <img src="" class="bd" /> <img src="" class="bd" /> </div> <nav> <ul class="top_link"> <li class="top_link"> <a href="index">home</a> <ul> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> </ul> </li> <li class="top_link"> <a href="index">blog</a> <ul> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> </ul> </li> <li class="top_link"> <a href="index">forum</a> <ul> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> </ul> </li> <li class="top_link"> <a href="">forum</a> <ul> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> </ul> </li> <li class="top_link"> <a href="index">gallery</a> <ul> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> </ul> </li> <li class="top_link"> <a href="index">anime</a> <ul> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> </ul> </li> <li class="top_link"> <a href="index">login</a> <ul> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> <li class="sub_link"> <a href="">sub link</a> </li> </ul> </li> </ul> </nav> <div id="side_left"> <div id="contests"> Featured Contests <hr class="side" /> <a href="">Bunnys vs. Pandas</a> <a href="">Dianoaurs vs. Elefants</a> <a href="">Pickles vs. Ice Cream</a> </div> <div id="featured_blog"> Featured Blogs <hr class="side" /> <a href="">blog 1</a> by, user 1<br /> <a href="">blog 2</a> by, user 2<br /> <a href="">blog 3</a> by, user 3<br /> </div> <div id="featured_discussion"> Featured Forums <hr class="side" /> <a href="">Anime discussion</a> <a href="">Panda discussion</a> <a href="">Epicness </a> </div> <div id="featured_poll"> Featured Poll <hr class="side" /> What is your favorate fuzy animal?<br /> <input type="radio" value="bunnys" />Bunnies<br /> <input type="radio" value="pandas" />Pandas<br /> <input type="radio" value="kittys" />Kittys </div> </div> </div> <footer> <a href="" class="f">footer link</a> <a href="" class="f">footer link</a> <a href="" class="f">footer link</a> <a href="" class="f">footer link</a> <a href="" class="f">footer link</a> <a href="" class="f">footer link</a> </footer> </body> </html> Ive been trying to get my new site layout up, but as I was testing different browsers, IE7 has 1 problem. kb-studio.org/test/ when i was testing how it would look in different browser sizes, i noticed that it looked fine in all sizes above 1280 x 720. If you open, the site in a 1024 resolution, something weird happens to the background (only in IE). I validated my css and xhtml, can anyone help? Hi to all, I have a problem to show full image on background.The css which i am using is good if the screen size is 17 inches or less but above 17 inches background image does not expand to full width and height. One thing i want to clear that we can't repeat that image . any solution to this problem will be appreciated. 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! Hello everyone I've created a faux background for a website I'm currently working on to create the illusion of a column extending to the bottom of the page. The url is as follows: http://notquiteperfekt.gamedaemons.net/eruptmediav2/erupt.html The CSS code I've used is: body { background-image: url("images/pgbkg.jpg"); background-repeat: repeat-y; background-position: 50% 0%; } ---- When viewing the page in Internet Explorer 5.0+ it lines up fine. However, in order for it to line up successfully, I had to add the following code to nudge my <body> content over: html body {padding-left:11px;} ---- Fine and dandy, the extra code made things line up quite nicely. Then comes FireFox. The <body> content is 1px to the right of the background & causes the page to be a little off-center. View the previous URL in FireFox to better understand what I mean. ---- When I don't use the html body {padding-left:11px;} then the page is approximately 11-12 pixels off center - however my CSS code tells the background to position itself 50% on the X-axis & my HTML code tells the body to center itself as well via align="center" Why do these two not line up then? ---- If anyone can view->source to pick out what's causing this & reply back it would be greatly appreciated. You can reply here or e-mail me at sevunx@gmail.com.NOSPAM - I thought I was past all of the headaches with CSS Can anyone give me an idea why the color for the background of the Wordpress site I am revising the css script shows up 2/3 the color I want and the top one third is remains the original color. There is no "wrapper" option to revise. This is the 3 lines that seems to determine those changes.. *************************************** body { background: #180033 url (1-default/bodybg.png) repeat-x top; } a { color: #9BCB65; } a:hover { color:#180033; } *************************************** Could the problem be "repeat-x top;" ???????? Big thanks to anyone who offers help. Hi all, This problem has been plaguing me for a long while now and I am getting to the end of my tether! All I want to do is add a simple repeating background image to my 'container' div (i called mine #outer for some reason!) To do this i added the following CSS: Code: #outer { width:970px; text-align:left; margin:0 auto 50px; padding:0; background-image:url(/Images/bg.jpg); background-position:center; background-repeat:repeat-y;} Pretty simple I thought! However, in FF/Chrome the background image does not show up at all, but in IE it does...here is the page: http://onyahead.com/latestnews_test.php Obviously, the output that i get from IE is actually the output I want...i just cannot get to the bottom of why it is not showing in FF!! Any ideas? Sam |