CSS - Ie Height Problems With Background-image

for some reason my background image is NOT showing up--
i have tried everything that i can think of --

i do have an IMAGE directory on server-- and the image is in the directory --

i am sure it is something stupid that i am not seeing or doing
but sure would appreciate a little help--

thanks in advance for help-- i so appreciate it

here are links to site and code

PAGE

CSS

ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com

Dear all,

I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments.

Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads.

If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background.

Is there any way around this?

Many thanks, Mark

If infinite monkeys, with infinite time, can write Shakespeare, IE's CSS support = 5 monkeys, 15 minutes.

I have a div with a background image, repeat-y. Both IE and Firefox put the background image in place, both repeat correctly.

The problem is, IE puts the background image on top of the text!!!

Background images don't get z-indexes, do they? Nothing is absolutely positioned, either.

MPEDrummer

[edit]
On further experimentation, it seems if the div with the BG image is position: relative, then it screws up IE's idea of what a background image implies
[/edit]

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;


}

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!

It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar.

So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks...

Code:

 
 div.divBox1
 {
   width: 286px;
   height: 359px;
   float: left;
 }
 div.divClearFloat
 {
   clear: both;
   height: 0px;  /* For IE Stupidity (it added some spaces after clearing the float) */
   font-size: 1pt;  /* For IE Stupidity (minimum height only work with current font-size somewhere) */
 }
 div.divDottedLineAdvertisementSeperator1
 {
   width: 575px;
   height: 3px;
   background-color: #ff0000;
   font-size: 1pt;  /* For IE Stupidity (minimum height only work with current font-size somewhere) */
 }

Code:

<div class="divBox1">
 <div style="margin-bottom:-360px;">
  <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;">
  <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;">
 </div>
</div>

<div class="divClearFloat"></div>

<div class="divDottedLineAdvertisementSeperator1"></div>

i am working on a practice web site and im having problems. i set the #document div set to min-height:400px; but then the when i input content that overpasses 400px in the col div it goes over the footer div. and if in #document i set height to a specified height it works but then i have to do that for every page specifically. i hope you can help and i explained it ok. here's the code

p.s. it works fine in IE go figure but not in FF or chrome i thought that #document would increase in height automatically as #col increased Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="9.css" />
</head>

<body>
	
<div id="Document">
    
	  <div id="Header">
        	 <div id="Top_Right">
             	<ul>
                	<li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Privacy Use</a></li>
                </ul>            
        </div>
                <div id="Logo"><a href="#"><img src="Images/guitar102.png" alt="guitar102" /></a></div>
      </div>
      
        
        
  <div id="Nav"><ul>
                    	<li><a href="#"><img src="Images/home.png" /></a></li>
                        <li><a href="#"><img src="Images/links.png" /></a></li>
                        <li><a href="#"><img src="Images/about.png" /></a></li>
                        <li><a href="#"><img src="Images/contact.png" /></a></li>
                    </ul> 
                 	
           	   <hr /> 
  </div>
       
       
       

  <div id="Side_Nav">
               	 <ul>
               	   <li><a href="#"><img src="Images/less.png" /></a></li>
                     <li><a href="#"><img src="Images/art.png" /></a></li>
                     <li><a href="#"><img src="Images/his.png" /></a></li>
                   <li><a href="#"><img src="Images/news_.png" /></a></li>
                    <li><a href="#"><img src="Images/ad.png" /></a></li>
               	 </ul>   
  </div>
       
      
  
    
 <div id="Col">      
            
                
                <div id="Column1">
                  <p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here .Content goes here.</p> <p>Content goes here.Content goes here.</p>
            <p>Content goes here .Content goes here.</p><p>Content goes here .Content goes here.</p>
</div>
               
            
                
<div id="Column2">  
            <p>Content goes here. Content goes here.</p><p>Content goes here.  Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here  Content goes here.</p> <p>Content goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
</div>
            
          <div id="Column3">    <p>Content goes here.Content goes here.</p><p>C ontent goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here.Cont  ent goes here.</p> <p>Content goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p>
            <p>Content goes here.Cont  ent goes here.</p>
            <p>Content goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p>
            <p>Content goes here.Cont  ent goes here.</p>
            <p>Content goes here.Content goes here.</p>
    <p>Content goes here. Content goes here.</p><p>Content goes here.C ontent goes here.</p></div>
</div>
          </div>

        

        
<div id="Footer">
              <div id="Top_Fot"></div>
            
            <div id="Fot"></div>
            <div id="Bot_Fot"></div>        
</div>  	
        

    
</body>
</html>

Code:

/* CSS Document */
Body{ background-color:#000000;
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		margin:0px;
		padding:0px;
}

h1{
		margin-left:20%;
}

a {
	text-decoration:none;
	color:#FFFFFF;
}

a:hover {
		text-decoration:none;
		color:#FFFFFF;}


#Document {
	
		background:url(Images/1.jpg) repeat-y;
		background-color:#310606;
		color:#FFFFFF;
		height:700px;
		width:1005px;
		}

#Header {
		height:154px;
		background-color:#310606;
		margin:0px; padding:0px;
		float:left;
		width:1005px;
		background:url(Images/header4.png) no-repeat;
		}



#Logo {
		margin:0px 0 0 5px;
		height:120px;
		width:200px;}
		
#Logo img{
		border-style:none;}

#Top_Right {
		margin:0px;
		padding:15px 10px 0 0;
		height:100px;
		width:150px;
		float:right;
		}
		
#Top_Right ul {
			list-style:none;
			}
#Top_Right ul li{
		margin:5px 0 0 0;}

		

#Col {
		margin:5px 0 0 120px;
		float:left;
		text-align:justify;
		padding:10px 10px 10px 10px;
		width:780px;}

	

#Column1{
	float:left; width:280px; margin:0 30px 0px 0;
	
	}
#Column2{
	float:left; width:210px; margin-right:30px;}
#Column3{
	float:left; width:150px;}

		


#Nav{
		width:640px;
		height:60px;
		float:left;
		margin:0 40px 0 125px; padding:0px 0 0 60px;
		}
#Nav ul{
		margin:0px 0 0 0px; padding:0px 0 0 5px;
		}
				
#Nav ul li{
		display:inline;
		margin:0px;
		padding-left:20px;
		list-style:none;
		}
#Nav ul li img {
			
		border-style:none;}
		
#Nav ul li a{
		color:#310606;
		text-decoration:none;}
		
#Nav ul li a:hover{
		color:#310606;
		text-decoration:none;}
		

		


#Side_Nav {
	height:400px;
	position:absolute;
	top:156px;
	left:0px;
	width:120px;
	padding:0px 0 0 0px;
	margin:2px  0 0 0px;
}
		
#Side_Nav ul {
		margin:0px;
		padding:0px;}
		
		
#Side_Nav ul li{
	display:inline;}
	
#Side_Nav ul li img{
		border:none;
		margin:0px;
		padding:0px;}


#Footer {
		background-color:#000000;
		margin:0px;
		padding:0px;
		width:1005px;}

#Fot {
		width:98%;
		height:50px;
		padding:10px 10px 10px 10px;
		background-color:#310606;}		

#Top_Fot {
		height:11px;
		background:url(Images/footer_start.jpg) repeat-x;}
		
#Bot_Fot {
		height:24px;
		
		background:url(Images/bottom.jpg) bottom no-repeat;}

Trying to hone my CSS skills, but as usual I'm having trouble with the height property. The page is buzzdphoto dot com / times and you should notice part of the white containing box does not extend to the bottom of the page as it should, instead the content falls past it. I've viewed it in both Firefox 3.5 and IE8 and am getting similar results with both. Any ideas?

hey..

i have a webdesign _Link here_

but i need it to look like this _picture_

but i can't get the gradient background height: 100%;

the borders and content box do i need to get height: 100%; too something like my personal homepage

i am new to css designin... plz help me.. my code is this

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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0px auto;
text-align: center;
height: 100%;
}
#container {
margin: 0px auto;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
#top_bg{
margin: 0px auto;
left: 0px;
top: 0px;
width: 100%;
height: 151px;
z-index: 2;
background-image:url(images/topbg.gif);
}
#top {
margin: 0px auto;
left: 0px;
top: 0px;
width: 701px;
height: 100px;
z-index: 3;
background-image:url(images/top.gif);
}
#menu_knapper{
float: right;
z-index: 4;
height: 30px;
width: 60px;
top: 100px;
}
#menu {
margin: 0px auto;
z-index: 5;
height: 51px;
width: 701px;
top: 100px;
background-image:url(images/menu.gif);
}
#content_bg {
margin: 0px auto;
z-index: 6;
height: 100%;
width: 100%;
top: 151px;
background-image:url(images/bg.jpg);
background-position: top right;
background-repeat: repeat-x;
}
#logo {
margin: 0px auto;
background-image:url(images/logo.gif);
width: 701px;
height: 114px;
z-index: 7;
left: 29px;
top: 151px;
}
#content {
margin: 0px auto;
width: 701px;
height: 100%;
z-index: 8;
top: 265px;
}
#left_border {
margin: 0px auto;
width: 30px;
height: 400px;
float: left;
background-image:url(images/left_border.gif);
}
#right_border {
margin: 0px auto;
width: 30px;
height: 400px;
float: right;
background-image:url(images/right_border.gif);
}
#content_indhold {
margin: 0px auto;
width: 641px;
float:left;
height: 400px;
background-color: #FFFFFF;
}
#left_footer {
margin: 0px auto;
width: 30px;
height: 30px;
float: left;
background-image:url(images/left_footer.gif);
}
#right_footer {
margin: 0px auto;
width: 30px;
height: 30px;
float: right;
background-image:url(images/right_footer.gif);
}
#footer {
margin: 0px auto;
width: 641px;
float:left;
height: 30px;
background-image:url(images/bottom_border.gif);
}
-->
</style>
</head>

<body>
<div id="container">
<div id="top_bg">
<div id="top">
<div id="menu_knapper">menu</div>
</div>
<div id="menu"></div>
</div>
<div id="content_bg">
<div id="logo"></div>
<div id="content">
<div id="left_border">pik</div>
<div id="content_indhold">dut</div>
<div id="right_border">tis</div>
<div id="left_footer">pik</div>
<div id="footer">dut</div>
<div id="right_footer">tis</div>
</div>
</div>
</div>
</body>
</html>

Hello,

Two questions, The first is that I am struggling to get my head round making the min-height work on my page. My page is at http://www.garethgroup.com/test/floatcolumnsattempt/index.html. This is not a commercial website but more of a website of attempted collaborations.

I am also wondering if there is a quicker way of opening divs - for example, can you use div id's like this -

Code:

<div id="div1" "div2" "div3">

Thanks and Kind Regards,

Ben.

Since I began doing CSS layouts instead of tables last year, it seems like every single site I do I run into the same problem -- getting a div to stretch to 100% height. I find the solution to it, it works; then when I try the exact same solution for the next site I do, it refuses to work properly. It's very frustrating how such a simple concept can be so hard to do...

http:// www. pinstripepresentations.com/stephanie/residential.php

There are two divs -- left column and right column -- within a page_wrapper div. I need the right column div and it's background to always be 100% height and touch the top and bottom of the window. But right now it only stretches to the window viewable area and doesn't continue when you scroll.

I've included all the parent height commands. I've been fighting with this dang thing for a whole day and I'm not sure what else to try. Please help!

Link: bitbonton [dot] com

For some odd reason, the %100 height on the left column does not seem to work ... the dotted line ends after the content. Also, there is another problem where if the scroller bar appears on the right because the content is too long, it pushes everything leftward. tried to move the content a bit more to the left, but it seems to remain centered?

Thank you for your help!

Hi guys,

I am struggling a bit with getting the background of one of my css-created columns to be the height I want it to be. If you have a look at http://www.addictivemedia.com.au/clients/REW/ you will see (depending on your browser) that the left column behaves not the way I want it to:

- in IE 6 it creates an additional scrollbar (because it adds the height of the banner at the top to the 100% height I gave to the column)
- in all other browsers it is not as long as the column on the right

The effect I want to achieve is of course for both columns to have the same height and (if possible) to always push the footer to the bottom of the browser window.

I have tried the pushing to the bottom many times and out of previous posts I gather that it probably won't happen for all browsers. But I cannot figure out why the left column doesn't extend as far as the right one.

Thanks for your help!

Hi,
It seems I just can't get away from the height: 100% problems. I tryed making my body 100% and my container min-heaight 100% but that didn't work. I'll post the index and css below. I also want there to be a 15px space between each box 'lightbox, lightbox2, topbox, bottombox.. (they aren't spacing at all?)

www.carbenco.com/resume/

index
Code:

<!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" xml:lang="en">
<head>
<title>Terry Cantwell - Resume</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>

<div id="container">





<div id="topbox">Hi</div>

<div class="lightbox">Hi</div>

<div class="lightbox2">Hi</div>

<div class="lightbox">Hi</div>

<div class="lightbox2">Hi</div>

<div class="lightbox">Hi</div>

<div class="lightbox2">Hi</div>

<div class="lightbox">Hi</div>

<div id="bottombox">Hi</div>





</div>

</body>
</html>

css
Code:

body {
	margin: 0px;
	padding: 0px;
	text-align:center;
	background-color: #3F3727;
 	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
}


#container {
position: relative; top: 0px;
margin-left: auto;
margin-right: auto;
text-align:center;
width: 600px;
height: 100%;
background-color: #E9E4DC;
}

#topbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}

.lightbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #B1A283;
}


.lightbox2 {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #9B8862;
}

#bottombox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}