Learn VBA & Macros in 1 Week!

CSS - Background Disappears When Fixing Footer

Full Excel VBA Course - Beginner to Expert

Background Disappears When Fixing Footer	View Content

The background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please!

Full Excel VBA Course - Beginner to Expert

Background Disappears

Similar Tutorials

View Content

Hi, the background of the top navigation (it's a drop down menu) disappears when I make the google custom search box float left. I need it to float left because I want it to be on the same line as the top navigation menu.

The id of the div that should show the bg is #topNavContainer.

Page: http://hopewwamericorps.org/index.php

Style:
PHP Code:
#topNavContainer
{
background: #000000 url(../images/topNavBg.gif) repeat-x scroll;
}

#topNav
{
height: 40px;
width: 760px;
margin: 0px auto;
text-align: left;
padding: 0px 0px 0px 100px;
color: #bcd5df;
float:left;
}

#siteSearch
{
padding-top: 10px;
width: 300px;
float: left;
display: block;
}

HTML:
PHP Code:
<div id="topNavContainer">
        <div id="topNav">
            <ul class="sf-menu">
                -**REMOVED FOR POST**-
            </ul>
        </div>
        <div id="siteSearch">
            <form action="http://hopewwamericorps.org/page.php?Page=Search_Results">
                <input type="hidden" name="cx" value="018067663729731490355:_3djw8ivavo" />
                <input type="hidden" name="cof" value="FORID:10" />
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="hidden" name="Page" value="Search_Results" />
                <input type="text" name="q" size="31" />
                <input type="submit" name="sa" value="Search" />
            </form>
            <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
        </div>

    </div>

Thank you for your help!

Please ask me to clarify if needed, thanks.

Ie6: Div Background Flashes And Disappears

Similar Tutorials

View Content

I have a basic div:
Code:

<div id="box1"></div>

The CSS for the div:
Code:

#box1 {
	position: relative;
	width: 75%;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 100px;
	background-color: #FFFFFF;
	*background: none;
	z-index: 1;
	left: 50px;
	top: 50px;
	background-image: url(images/1px_trans75percent.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1px_trans75percent.png', sizingMethod=scale, enabled=true);
	background-repeat: repeat;
	border: 1px solid #FFFFFF;
}

The transparent background flashes and disappears when the page is loaded in IE6. Any ideas on how to get it to appear and stay appeared would be much appreciated... thanks!

Background Disappears When I Float Containers Or Images??

Similar Tutorials

View Content

When I am floating two containers or images my background color disappears. Why is that and what should I do instead?

Here is what I am doing:

<div class="contentWrapper">
<div class="content">

<div class="leftContent">
<img src="" alt="" />
</div> 

<div class="rightContent">
<img src="" alt="" />
</div> 

</div> 
</div> 

Now the css:

.contentWrapper {
margin: 0;
padding: 0;
width: 100%;
}
.content {
margin: 0 auto;
padding: 0;
width: 960px;
background: #ccc;
}
.leftContent {
margin: 0;
padding: 0;
width: 450px;
float: left;
}
.leftContent img {
margin: 0;
padding: 0;
width: 200px;
height: 200px;
border: #000 solid 1px;
}
.rightContent {
margin: 0;
padding: 0;
width: 450px;
float: right;
}
.rightContent img {
margin: 0;
padding: 0;
width: 200px;
height: 200px;
border: #000 solid 1px;
}

Thanks!

Background: Fixed; Not Fixing

Similar Tutorials

View Content

Here's the code in question

I've attached the background image with the following CSS:
Code:

body {
background: #DDF19A url("/iris.new/images/bgIris-Blur-green-light.jpg") bottom left fixed no-repeat;
}

It works as expected in IE, but Firefox tends to lag a little bit when you're scrolling, and then snap into place. Same with NN, but Opera 8 is fine.

Any thoughts on this?

MPEDrummer

Can't Get Footer Background To Show Up Anymore

Similar Tutorials

View Content

It was showing up until I changed something in the CSS that I can't change back (because it would mess up the formatting), and now I don't know how to further change the CSS to get the footer to display properly.

(Um... can't post link to the site, what should i do?)

For reference, the footer background is the same as the navigation background (silver). It may currently be set to highlightred.png but that was so I could try to determine if it was offset behind anything. It doesn't appear to be, unless it's lining up perfectly behind highlight.png from the navigation.

Any help would be greatly appreciated, and thank you in advance.

Footer Background Not Expanding On An Iphone

Similar Tutorials

View Content

OK, the site looks great in all browsers, Mac and PC. But on an iphone, the footer background does not expand the width of the screen. I don't know why.
Here is the site here

Does anyone know how to make this work on an iphone?

thanks

Background Image For Header And Footer, Coded In Css

Similar Tutorials

View Content

Hey all,

I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer.

I would like it to look something like this.

I'm using this code for the background image, for the Header:

body
{
background-image: url(stars.gif);
background-repeat: repeat-x
}

And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page?

Here is the code that I'm assuming would have to be used:

{
background-image: url(stars.gif);
background-repeat: repeat-x;
background-position: bottom;
}

Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code?

Thanks.

Sticky Footer Hiding Main Content Background

Similar Tutorials

View Content

Hello,

I just joined the forum, I'm new to web design although I have some experience in video post production.

I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column.
The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to.

It's probably a novice mistake but I can't get to find it. Your help would be much appreciated.
The HTML:

Code:

<body>

<div id="nonFooter">
		<div id="wrapShadow">
		<div id="header">
				<div id="linksHead"></div>
		<div id="mainMenu"></div>
		</div>		
			
		
		<div id="content">
<div id="bannerSlider">  (SWF file)
</div>
			<div id="contentBuscador">
			</div>
			<div id="contentTours">
			</div>
			<div id="contentElite">
			</div>
			<div id="contentTestimonios">
			</div>
			<div id="contentPromos">
			</div>
		</div>
	</div>
</div>
	<div id="footer">
		<div id="wrapShadowFooter">
		</div>
		</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
	</script>
</body>

The CSS:
Code:

html,body {
	padding: 0;
	margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-color: #3399cc;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

* html #nonFooter
{
	height: 100%;
}

#content
{
	padding-bottom: 7em;
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	clear: both;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #336;
}
#header {
	width: 900px;
	height: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#footer
{
	position: relative;
	margin-top: -6em;
	height: auto;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
#wrapShadow {
	width: 920px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#wrapShadowFooter {
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 0px;
	background-image: url(_images/footerCruiseship.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 100px;
}

All #content(area) Divs in content have the same code as this:
#contentBuscador {
	float: left;
	height: 100px;
	width: 880px;
	padding: 0px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}

Thank you,
pixelMason.

Edit: Problem Solved thanks to f_nietzsche

Content Within Footer Background Image Without Backgrounds Overlapping

Similar Tutorials

View Content

Calendar Disappears In Ie

Similar Tutorials

View Content

Page Disappears In Ie7! Help!

Similar Tutorials

View Content

Ok i have a problem with css in IE7(figures!)... Dont know if i need a hack for it or i just suck at css but when i load my page in firefox everything is perfect but when i load it in IE7 there is nothing! I figured out it is because of im using a clear and if i dont use the clear it shows up but of course it doesnt look right.

html4strict Code:
Original - html4strict Code <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="main"> <div id="header"> <div class="logo"> <img src="images/Logo beta2.jpg" alt="Logo" /> </div> <div class="top-section"> </div> <div class="top-border"> </div> </div> </div> </div> </body> </html>

  

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head>  <body>


 <div id="container">


  


 <div id="main"> 


  


 <div id="header">


  


 <div class="logo">   <img src="images/Logo beta2.jpg" alt="Logo" />


  


 </div>


  


 <div class="top-section">


  


 </div>


  


 <div class="top-border">


  


 </div>


 </div>


 </div> 


 </div>


 </body>


 </html>

CSS:
css Code:
Original - css Code @charset "utf-8"; #container { height: auto; width: auto; padding: 10px; visibility: visible; overflow: auto; } * html #container { height: 1%; } #main { position: relative; } #header { height: auto; width: auto; position: relative; } .top-border { height: 10px; width: 900px; position: relative; background-image: url(css-images/t-border.jpg); background-repeat: no-repeat; clear: left; } .logo { float: left; position: relative; } .top-section { float: left; height: 120px; width: 600px; position: relative; }

  

 @charset "utf-8"; 


  


 #container {    height: auto;  width: auto;     padding: 10px;  visibility: visible;     overflow: auto;  } 


  


 * html #container {     height: 1%; } 


  


 #main {     position: relative; } 


  


 #header {   height: auto;     width: auto;    position: relative; } 


  


 .top-border {   height: 10px;     width: 900px;   position: relative;   background-image: url(css-images/t-border.jpg);   background-repeat: no-repeat;     clear: left; } 


  


 .logo {     float: left;    position: relative; }


  


 .top-section {  float: left;     height: 120px;  width: 600px;    position: relative; }

Padding Disappears In Ie

Similar Tutorials

View Content

I am having a problem..
The site am working on looks great in FF but in IE breaks when you click on a the link to view a larger picture and then mouse off the link. The padding on the bottom of the body (#main) disappears. i have a Javascript that switches the image out for another one. i am not sure if this is the problem.

can someone please take a look i have been racking my brain on this for days.

http://www.avallo.com/test/fatcatweb/phototest.shtml

(Problem occurs when thumbnail is clicked and then moused off in IE 5.5 and IE 6)

i have a border on the #main div so you can see what i am talking about.

* Update *
it isnt the javascript.

here is the css and html.

Code:

#main {
border:#333 dotted 1px;
	float:right;
	display:inline;
	position:relative;
	width: 610px;
	padding-bottom:30px;
	background:url(images/body-top.gif) no-repeat;
}
#mainbody {
	margin: 30px 20px 20px 15px;
}
a.thumb {
	float:left;
	margin: 0 5px 5px 0;
	padding: 2px;
	border: #fff 2px solid;
}
a.thumb:hover {border: #895FA5 2px solid;}

					<div id="mainbody">
						<h1>Photo Portfolio</h1>
						<p>Fat Cat Art Studio is proud to provide our clients with images of their business, area, or workers. This portfolio is a SMALL representation of recent photos.</p>
						<div class="photos">
							<h2>The Shore Photos</h2>
							<div class="floatR" id="change1"><img src="images/photos/photo-01.jpg" alt="Enlargment" width="350" height="245" border="0" /></div>
							<p>Taking a stroll on the shore leads to inspiration and some unique perspectives.</p>
							<a class="thumb" href="javascript:change('change1','photo-01',350,245)"><img src="images/photos/photo-01x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
							<a class="thumb" href="javascript:change('change1','photo-02',350,263)"><img src="images/photos/photo-02x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
							<a class="thumb" href="javascript:change('change1','photo-03',350,264)"><img src="images/photos/photo-03x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
						</div>
					</div>

thanks,
weston

Right Border Disappears!

Similar Tutorials

View Content

The right hand border for some of my table cells (Class "item_body") disappears, but they have almost identical coding to the cells the work properly. My CSS that pertains to the borders:
Code:

td.item_body {background-color: #e7e7e7; border-left: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; margin: 5px 5px 5px 5px}

And the code for the table with the cell that doesn't work:
Code:

<table cellspacing='0' cellpadding='0' border='0' valign='middle' width='100%'>
	<tr height='22px'>
	<td class='item_title' width='100%'><p class='title'>
Search Roster
	</p></td>
	</tr>
	<tr>
	<td class='item_body' width='100%'><p class='item_body'>
Use this form to search for any Bronco Virtual Airlines pilot.  You may use as many or as little fields as you would like.  For best results, try to enter all the information you know.
<form action="index.php" method='get'>
<input type='hidden' name='page' value='roster' />
<input type='hidden' name='act' value='shw' />
<table cellspacing='0' cellpadding='2' border='0' width='100%'>
<tr><td width=50%><p class='item_body'>Full Name:</p></td>
<td><p class='item_body'><input type='input' name="name" /></p></td></tr>
<tr><td><p class='item_body'>Pilot ID</p></td>
<td><p class='item_body'><input type='input' name="pilotid" /></p></td></tr>
<tr><td><p class='item_body'>Pilot Base:</p></td>
<td><p class='item_body'><select name="base">
<option selected='selected' value='' />Any Base
<option value='kboi' />KBOI
<option value='kgtf' />KGTF
<option value='ksea' />KSEA
<option value='kslc' />KSLC
</select></p></td></tr>

</table><br /><p class='item_body_center'><input type='hidden' name='orderby' value='last' /><input type='submit' value="Search"></form>
	</p></td>
	</tr>
</table>

Div With Overflow Auto Disappears

Similar Tutorials

View Content

I have a wrapper div with a height of 600px and a width of 900px

Inside it there are 2 divs

The first is floated left with the below style
Code:

    #left{
    height : 100%;
    width : 600px;
    overflow:hidden;
    float : left;
    }

The second one is not floated, so that it can occupy the rest of the space and the style is
Code:

    #right{
    height : 100%;
    overflow : auto;
    margin-left : 600px;
    }

The above design is meant to create a 2 column layout with a fixed height. The html I used is
Code:

    <div class="wrapper">
      <div id="left">
        <img id="main-image" src="/some/image"/>
      </div>
      <div id="right"></div>
      <br clear="left"/>
    </div>

The thing is that Opera (v 10.01) and Safari (v. 4.0.3) do not display the right div.

When I remove the overflow:auto, however they do.

I cannot figure out why. Any help appreciated

Thanks

My Drop Down Menu Disappears Need Help!!!!

Similar Tutorials

View Content

Im doing a project Located Here *** not work safe *** 96.0.176.55/login.php

Please look at the css and html

If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images...

The problem is when you move the mouse down to the second or third image the dropdown disappears.

Can someone please help?

Thanks

Navigation Menu Disappears In Ie7

Similar Tutorials

View Content

Ok, 'guys' I've hit a snag.

I'm trying to redesign my website and am using blueprint css framework for the first time in my life.

I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7].

It works great in ALL browsers I tested except emulated IE7.
In this mode, the menu completely disappears except for a separate div that holds the left nav image.

I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode.

So, I'm hoping Kravvitz or some other CSS god will come to my rescue.

the short link to my dev page is http://drw65.servehttp.com/

this is a url redirect link that will redirect to my personal webspace from my ISP.

thanks for reading.

Artifact In Footer In Ie, Footer Not At The Bottom In Ff

Similar Tutorials

View Content

I'm having trouble with my website structure... view this page for an example...

css is here...

The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page...

It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF...

how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF?

Thanks
Bryan

Page Wrapper Disappears In Ie, Works In Everything Else

Similar Tutorials

View Content

Originally it worked in IE, but nothing else, now we've gotten it to work in FF, Safari, Opera, et. al., but the page wrapper background disappears in MSIE 7.

http://www.splatteredink.com/realms/

CSS:
Code:

#overall {
background: #ababab url(../images/wrapper_bg.png)100% 0 repeat-y;
width: 100%;
min-height: 335px;
float: right;
}

any ideas?

Ie 6 Vert Scrollbar Disappears - No Bug Fix Works So Far

Similar Tutorials

View Content

In IE6, the vertical scrollbar disappears if the browser window is opened vertically past the <div id="text intro"> section (if the bottom of the browser window is within or above this section, the scroll bar is present). The scrollbar is present as normal in FF and Safari. So this is apparently an IE issue.

I've tried a couple of fixes to seemingly related bugs, such as adding the line "display:inline;" to both of my floating elements. I also tried the Holly Hack fix of adding "height:1%" to my relatively positioned element, "body". The scrollbar behavior remains the same.

The following are my .php and .css files. Any ideas on this would be much appreciated... thanks.

PHP 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=iso-8859-1" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<title>Title</title>
<body>
<div id="container">
<div id="address">Address</strong></div>
<div id="banner">Banner<div id="logo"></div>
<div id="redseethru" class="redseethru"></div>
<div class="redseethru" id="links"></div>
  <div id="link1">Link</div>
  <div id="link2">Link</div>
  <div id="link3">Link</div>
  <div id="link4">Link</div>
  <div id="link5">Link</div>
</div>
<div id="breadcrumbs">Script
</div>
<div id="red_title">Products</div>
<div id="title">Kayaks</div>
<div id="body">
<div id="text_intro">Text</div>
<p>ipsum lorem</p>
<p>ipsum lorem</p>
<p>ipsum lorem</p>
<p>ipsum lorem</p>
</div>
<div class="redseethru" id="footer"></div>
<div id="copyright">Copyright</div>
<div id="silver">Design</div>
</div>
</body>
</html>

CSS:
PHP Code:
/* CSS Document */

#container {
    position:absolute;
    width:750px;
    left:50%;
    margin-left:-350px;
    }
#address {
    position:absolute;
    width:615px;
    height:12px;
    z-index:10;
    left: 165px;
    top: 0px;
    font-family: Arial;
    font-size: 11px;
    color: #FFFFFF;
    padding-top: 1px;
    padding-bottom: 1px;
}
#banner {
    position:absolute;
    width:750px;
    height:125px;
    z-index:1;
    left: 0px;
    top: 50px;
    background-image: url(http://www.sportingrage.com/js/banner_images.js);
    border: 2px solid #CF1C0D;
}
#logo {
    position:absolute;
    width:285px;
    height:150px;
    z-index:2;
    left: -40px;
    top: -49px;
    visibility: visible;
    background-image: url(http://www.sportingrage.com/images/TSR_white_SML.png);
}
img, #logo { behavior: url(http://www.sportingrage.com/iepngfix.htc); }
body {
    background-color: #000033;
}
.redseethru {
    position:absolute;
    width:150px;
    height:100px;
    z-index:3;
    left: 602px;
    top: 0px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.sportingrage.com/images/redseethru.png');

}
.redseethru[class] {
    background-image: url(http://www.sportingrage.com/images/redseethru.png);
}
#red_title {
    position:absolute;
    width:145px;
    height:25px;
    z-index:10;
    left: 598px;
    top: 120px;
    text-align: right;
    font-family: Arial;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}
#links {
    position:absolute;
    width:750px;
    height:25px;
    z-index:5;
    left: 0px;
    top: 100px;
    border-top: 1px solid #CF1C0D;
}
#link1 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left:2px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link2 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 87px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link3 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 172px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link4 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 258px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}
#link5 {
    position:absolute;
    width:74px;
    height:15px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px;
    left: 342px;
    text-align: center;
    border-right: 1px solid #CF1C0D;
    top:100px;
}

/*White Links*/
a.white:link {
    font-family: Arial;
    color: #ffffff;
    text-decoration: none;
}

a.white:visited {
    font-family: Arial;
    color: #ffffff;
    text-decoration: none;
}
a.white:hover {
    font-family: Arial;
    color: #ffffff;
    text-decoration: underline;
}

#breadcrumbs {
    position:absolute;
    width:730px;
    height:20px;
    z-index:1;
    font-family: Arial;
    font-size: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 10px;
    left: 0px;
    top:179px;
    background-color: #FFFFFF;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #FF0000;
    border-left-color: #FF0000;
    text-indent: 7px;
}

a.breadcrumbs:link          {
    color:#000033;
    text-decoration:underline;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
}
a.breadcrumbs:visited       {
    color:#000033;
    text-decoration:underline;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
}
a.breadcrumbs:hover         {
    color:#000033;
    text-decoration:underline;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
}
#title {
    position:absolute;
    width:740px;
    height:20px;
    z-index:1;
    font-family: Arial;
    font-size: 20px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 10px;
    left: 0px;
    color: #000033;
    font-weight: bold;
    text-align: left;
    padding-bottom: 5px;
    top: 214px;
    background-color: #FFFFFF;
    text-indent: 10px;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #FF0000;
    border-left-color: #FF0000;
}
#body {
    position:relative;
    width:730px;
    height:1%;
    z-index:6;
    left: 0px;
    top: 249px;
    background-color: #FFFFFF;
    border-top: 2px none #CF1C0D;
    border-right: 2px solid #CF1C0D;
    border-bottom: 2px solid #CF1C0D;
    border-left: 2px solid #CF1C0D;
    padding: 10px;
}

#text_intro {
    position:relative;
    width:650px;
    height:50px;
    z-index:10;
    font-family: Arial;
    font-size: 12px;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 10px;
    left: 10px;
    color: #000033;
    text-align: left;
    padding-bottom: 5px;
    top: 10px;
}
#footer {
    position:relative;
    width:750px;
    height:20px;
    z-index:4;
    left: 0px;
    top: 249px;
    border-top: 2px none #CF1C0D;
    border-right: 2px solid #CF1C0D;
    border-bottom: 2px solid #CF1C0D;
    border-left: 2px solid #CF1C0D;
    padding-top: 5px;
}
#copyright {
    position:relative;
    float:left;
    top:249px;
    width:200px;
    height:25px;
    z-index:17;
    font-family: Arial;
    font-size: 11px;
    color: #FFFFFF;
    display:inline;
}
#silver {
    position:relative;
    float:right;
    width:200px;
    height:25px;
    z-index:7;
    top: 249px;
    font-family: Arial;
    font-size: 11px;
    color: #FFFFFF;
    display:inline;
}

Border Disappears When Viewing In Ie7/vista

Similar Tutorials

View Content

I'm sure this is something stupid and simple I've overlooked.. So I am hoping that someone here can see what I am missing here.. I am FINALLY in the home stretch for this site, and I cannot for the life of me figure this out..

This only happens on the gallery pages.. The side border disappears when viewing the site in IE7 but ONLY under the Vista OS.. (At home I have IE7 and WinXP and the gallery pages display just fine..)
http://clients.overthehillweb . com/hairisle/index.php?main_page=page&id=2&chapter=0

What the is different with IE7 and Vista?

Screenshot of what's happening:
http://i25.tinypic . com/2gtq4jr.png

Perhaps a better question is this.. It appears that my method for applying that border to the center content and dropdown nav menu is not working well under IE7 with Vista (and for some folks XP and IE7). Is there a better way to apply this border to the center content and the nav menu that WILL work with IE7??