|
CSS - Help W/ Div Background Issue
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 Similar TutorialsHi, 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 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 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? Hi there. I seem to be having an issue with my backgrounds that I've set to tile in my CSS not tiling (I've tried setting the width by percents, but that skews the entire design). I'm also not seeing the "container" background show up for some reason. Hopefully someone can assist me with this, I'd be forever grateful. You can see the page he http://sttwilightfrontier.co.uk/theme.php Theme.php Code: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<title>Theme Test</title>
</head>
<div id="container">
<div id="hleftcorner"></div>
<div id="headertop"></div>
<div id="hrightcorner"></div>
<div id="missionName"></div>
<div id="missionDesc"></div>
<div id="headercb"></div>
<div id="contenttlc"></div>
<div id="contenttop"></div>
<div id="contenttrc"></div>
<div id="sidebartop"></div>
<div id="contentleft"></div>
<div id="contentright"></div>
<div id="sidebar"></div>
<div id="content">
<div id="emblem"></div>
</div>
<div id="contentblc"></div>
<div id="contentbottom"></div>
<div id="contentbrc"></div>
<div id="sidebarbottom"> </div>
<div id="contentareabottom"></div>
</div>
</body>
</html>
theme.css Code Code:
@charset "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 100%;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
background: url(../images/theme/stars.png) repeat;
}
#hleftcorner {
background: url(../images/theme/h_leftcorner.png);
position:absolute;
left:0px;
top:0px;
width:245px;
height:180px;
z-index:1;
visibility:visible;
}
#headertop {
background: url(../images/theme/header_top.png) repeat-x;
position:absolute;
left:245px;
top:0px;
width:510px;
height:10px;
z-index:2;
visibility:visible;
}
#hrightcorner {
background: url(../images/theme/h_rightcorner.png);
position:absolute;
left:755px;
top:0px;
width:245px;
height:180px;
z-index:3;
visibility:visible;
}
#missionName {
background: url(../images/theme/missionName.png) repeat-x;
position:absolute;
left:245px;
top:10px;
width:510px;
height:58px;
z-index:4;
visibility:visible;
}
#missionDesc {
background: url(../images/theme/missionDesc.png) repeat-x;
position:absolute;
left:245px;
top:68px;
width:510px;
height:73px;
z-index:5;
visibility:visible;
}
#headercb {
background: url(../images/theme/header_cb.png) repeat-x;
position:absolute;
left:245px;
top:141px;
width:510px;
height:39px;
z-index:6;
visibility:visible;
}
#contenttlc {
background: url(../images/theme/content_tlc.png);
position:absolute;
left:0px;
top:180px;
width:45px;
height:45px;
z-index:7;
visibility:visible;
}
#contenttop {
background: url(../images/theme/content_top.png) repeat-x;
position:absolute;
left:45px;
top:180px;
width:702px;
height:45px;
z-index:8;
visibility:visible;
}
#contenttrc {
background: url(../images/theme/content_trc.png);
position:absolute;
left:747px;
top:180px;
width:45px;
height:45px;
z-index:9;
visibility:visible;
}
#sidebartop {
background: url(../images/theme/sidebar_top.png);
position:absolute;
left:792px;
top:180px;
width:208px;
height:45px;
z-index:10;
visibility:visible;
}
#contentleft {
background: url(../images/theme/content_left.png) repeat-y;
position:absolute;
left:0px;
top:225px;
width:45px;
height:521px;
z-index:11;
visibility:visible;
}
#content {
background: url(../images/theme/content.png) repeat;
position:absolute;
left:45px;
top:225px;
width:702px;
height:521px;
z-index:12;
visibility:visible;
}
#contentright {
background: url(../images/theme/content_right.png) repeat-y;
position:absolute;
left:747px;
top:225px;
width:45px;
height:521px;
z-index:13;
visibility:visible;
}
#sidebar {
background: url(../images/theme/sidebar.png) repeat-y;
position:absolute;
left:792px;
top:225px;
width:208px;
height:521px;
z-index:14;
visibility:visible;
}
#emblem {
background: url(../images/theme/SanctuaryEmblem.png);
position:absolute;
width:500px;
height:500px;
visibility:visible;
left: 110px;
top: 10px;
}
#contentblc {
background: url(../images/theme/content_blc.png);
position:absolute;
left:0px;
top:746px;
width:45px;
height:45px;
z-index:19;
visibility:visible;
}
#contentbottom {
background: url(../images/theme/content_bottom.png) repeat-x;
position:absolute;
left:45px;
top:746px;
width:702px;
height:45px;
z-index:20;
visibility:visible;
}
#contentbrc {
background: url(../images/theme/content_brc.png);
position:absolute;
left:747px;
top:746px;
width:45px;
height:45px;
z-index:21;
visibility:visible;
}
#sidebarbottom {
background: url(../images/theme/sidebar_bottom.png);
position:absolute;
left:792px;
top:746px;
width:208px;
height:54px;
z-index:22;
visibility:visible;
}
#contentareabottom {
background: url(../images/theme/ca_bottom.png);
position:absolute;
left:0px;
top:791px;
width:792px;
height:9px;
z-index:23;
visibility:visible;
}
I'm basically trying to get some of the areas to scale with the browser window, as it is resized. (Content area, sidebar, header, etc.) You can see which ones I tried to do so with the repeat tags in the CSS Code. Thanks a bunch in advance for any help that comes! Hi, I'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. 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} 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>
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 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? 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? 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 }
Hi Everyone, I'm new to Dev Shed so appologises if I miss anything vital! I'm also quite new to CSS, but do have some experience. I am trying to develop a rounded corners, drop shadow solution for a header: Here it is so far, now the problem occurs when I have added the navigation bar, if you roll the mouse over any of the nav links a small chunk of border appears on the bottom right of the header?? The hoover div tag is: a.nav:hover {background-color: #99CDFF;} The nav images are gifs that do not change on rollover just the back ground color. If I remove the hover div tag the strange chunk of border does not occur. Can anyone advise why this may be happening? Or what I could do to improve this? I am having this issue in IE6.0 firefox 2.0 seems fine. I appreciate any help! Thanks in advance, Jon 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 Hi there, I have two problems with the display of my website in different browsers. The first is when you view my site, http://www.tophatweddings.co.uk in FireFox. In IE 6 the white background extends to the foot of the content. However in Firefox you'll notice it doesn't and the left, central and right columns all finish at different levels. How can I get the white background to behave in the same way as IE? My second issue is with IE7. Now, some people might actually download and install this "browser" - those poor people. Anyway in IE 7 you'll notice the footer just decides to display halfway through the page because I guess some CSS has changed in this version of IE. Does anyone know what this could be? Help with either of these issues would be greatly appreciated and reputation points award to those who post helpful answers. Thanks - Look at this page - http://certified.tmhdesign.com/about.asp I have a div called container, then in that div one called header, content_right, content_left, and footer. What is frustrating me is that I have to hard code a min-height for the left and right colums and if you scroll down you'll see where the background color of the body appears below the right column which I want to be white. When I specify the color of the container that does not fix the issue. Any help would be appreciated. Thanks. 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 |
|||||||