CSS - Ie Is Not Positioning The Background Image Correctly

I have worked out a section banner. There is one for each section in a column of 4 or 5. The buttons on the left call a JavaScript that move DIVs up and down, reordering the content as the user wishes.

Anyway, I'm having trouble figuring out how to make the center section where the Title is, non-fixed (expand to fit the space). I'd like it to spread out to as wide as the container allows, minus the width of the left and right ends, of course.

See the actual thingy on a test page he Siliconsatan

Here's the styles:
Code:

<style type="text/css" media="all">
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
letter-spacing:  .05em;
color: #003366;
font-weight: bold;
line-height: 30px
}
.col_block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.col_block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.col_image {
position: relative;
display:block;
left: 6px;
top: 12px;
}	
</style>

Here's the html:
Code:

<div class="col_tab_left">
<div class="col_block_up">
<img onclick="MoveBlock('ys101','bizJournalCity','Up');" class="col_image" src="images/block_up2.gif" width="11" height="11" border="0" alt="" alt="Move section up" title="Move section up" style="cursor:pointer;" />
</div>	
<div class="col_block_down">
<img onclick="MoveBlock('ys101','bizJournalCity','Down');" class="col_image" src="images/block_down2.gif" width="11" height="11" border="0" alt="" alt="Move section down" title="Move section down" style="cursor:pointer;" />
</div>	
<div class="col_tab_middle"><span class="col_tab_title">Business Journal News</span></div>
<div class="col_tab_right"></div>
</div>

It looks like this:

Hi all,

Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized.

So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it.

Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page?

Thanks.

Hi there,

I'm trying to position a background image (starting 756 pixels from the left) which is repeating horizontally - but of course am running into problems because as soon as you repeat-x an image repeats the whole screen, not taking into account background positions.

Does anyone have any ideas how I can possibly avoid this?!

The only thing I can think of is to create a huge image to factor in for all screen solutions, and just not repeat it at all. I'd prefer not to do it this way as firstly it's not very clean, and secondly it will result in a large file size.

Here is a link to the background image to show you what I'm talking about:
http://joshsphotos.com/images/bg.jpg

I've also put in the CSS that would show what I'm trying to achieve.

Code:

body {
background-image: url(../images/bg_repeat.jpg);
background-position: 756px 0px;
background-repeat: repeat-x;
}

Any help would be most appreciated.

Hi

I am trying to position a background image in my list, but I can't seem to position it where I want it, heres the example

http://dmumford.bizhat.com/test/list.htm

I need the bullet to be before the link home, but when I change the padding in the ul class the bullett moves with it, if that makes sense.

Could someone please help me!

Thank you!

I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised.

The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he

I can't post an image of the menu as it won't let me, being a new poster, which is a pain...
Code:

#horiz-menu a:hover {
            display: block;
            z-index: 100;
            line-height: 22px;
            left:-53px;
            position: relative;
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            padding-left:63px;
            height:27px;
            width:162px;
            border-bottom:1px solid #fff;
            margin-bottom:-3px;
}

To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding.

However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over.

I've achieved this with:
Code:

#horiz-menu li.parent.active a {
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            z-index: 100;      
            line-height: 22px;      
            left:-53px;             
            position: relative;      
            padding-left:63px;      
            height:27px;     
            width:162px;      
            border-bottom:1px solid #fff; 
 }

The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left...

I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too.

I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do?

If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it.

Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated.

Hello,

I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left.

Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works.

Background:
I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes.

An example of the current test is he (URL address blocked: See forum rules)
*not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete.

It is here - classtime . org / test6 . htm

and the navigation image is he
(URL address blocked: See forum rules)
*classtime . org / navigate . png

I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox.

As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem.

Thank you very much for taking a look. My jumbled code is as follows:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">

<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">

a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}


.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}

.top a:hover { 
background-position: 0px -601px; 
}



#left {
 left: -40px;
 width: 150px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: 0px -120px;
 position: relative;
 }

#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}


#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}

#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}

#right {
 width: 154px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: -640px -120px;
 position: relative;
 }

#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}

#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}

#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}


</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
		<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
			<div class="top"> 
			<a href="(URL address blocked: See forum rules)"></a> 
			</div>
		</td>
</tr>
<tr>
		<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
		 	<ul id="left">
  			<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
 		 	<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
  			<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
  			<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
  			<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
 			</ul>
		</td>
		<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
		aaa</td>
		<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
			<p align=right> <ul id="right">
  			<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
 			</ul>
 		</td>
</tr>
	
</table>
</div>
</body>
</html>

Hey folks, here's an odd problem that's got me totally stumped.

I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version.

Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however.

This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts?

The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest.

Thanks for any help you can offer!

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;


}

hello all,
my site is at waxmuseumplus dot ie
css file is on the top level called layout.css

I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again.

there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page.

I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though?

The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors.

Please help I'm tearing my hair out and the site is already live!

Index.php code:
Code:

<div id="Wrapper">
  <div id="Content">
    <div id="Header">
    <div id="Logo"></div>
    <div id="Title"></div>
      <div id="Navigation">
        <ul>
          <li><a href="(url blocked)">Home</a></li>
          <li><a href="specials.html">Specials</a></li>
          <li><a href="">Inventory</a>
            <ul>
              <li><a href="inventory-weapons.html">Weapons</a></li>
              <li><a href="inventory-accessories.html">Accessories</a></li>
              <li><a href="inventory-ammunition.html">Ammunition</a></li>
            </ul>
          </li>
          <li><a href="manufacturers-links.html">Manufacturers</a></li>
          <li><a href="about-us.html">About Us</a></li>
          <li><a href="contact-us.html">Contact</a></li>
        </ul>
      </div>
    </div>

And my css file:
Code:

#Title {
width: 425px;
height: 75px;
background: url(../images/Title.png) no-repeat;
padding: 0px;
margin: 0px;
position: absolute;
top: 3%;
left: 35%;
}

Code:

#Welcome_Letter {
margin-right: 18%; 
margin-left: 3%;
position: absolute;
top: 190px;
}

Code:

#Navigation {
position: absolute;
top: 15%;
left: 30%;
width: 580px;
}

The problem is the absolute positioning of the Title and Menu, and the margins of the first paragraph. On 4 out of the 5 computers I've tested it on, its shown properly (In Firefox, yes I know I need to fix the paragraph for IE.) But on the one computer, even in Firefox, the Title, Menu, and margins of the first paragraph are way off, and I can't figure out why. I've tried doing it in px, em, and currently its in percent, which has been the closest so far. But why is it not showing up perfect?

This is what its supposed to look like:
i27.tinypic.com/9ihfza.jpg

This is what it shows up as on the 1 computer:
i28.tinypic.com/swwu49.jpg

Help please! Thank you

Edit: Fixed url's

I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable.

This is my html:

Code:

<div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div>
<div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0"  /></div>

This is my css:

Code:

body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr  {position:static; width:auto; min-width:0px; min-height:100%; 
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}

any help would be greatly appreciated.

Thanks!

I am working on this page:
http://concrete-creative.com/pp/products.html

and the problem I am having is that I want the rest of the "flower" image to show behind the content area... I have it set as the background image of that table, but it's not showing up. Here's an image of how it is supposed to appear:
http://concrete-creative.com/pp/pp_sample.jpg

Can anyone direct me on how to work this out?

Thank you!

(I posted this is the HTML forum too but can't figure out how to move it, so I just posted it here too)

I'm using a variant of a sliding doors technique to swap between areas of a background on an li when it is in normal state and when it is being hovered over.

Code:

div#listmenu ul li {float:left; position:relative; list-style-type:none; background: #AAA url("css_images/nav_link.gif") repeat-x left top; border-right:1px solid #333; height:100%; font-weight:bold;}

div#listmenu ul li:hover {background: #555 url("css_images/nav_link.gif") repeat-x 0px -26px;}

Basically, I've got a drop down menu working in IE6, so no worries about that, and I used 2 backgrounds before and it worked. This works in Firefox, but not IE6.

Something simple I'm guessing!

Hi evryone. The web site in question can be found:

http://www.timtro.innovationdev.com/summer05/pg1.html

My problem is (i think) simple. There are two seperate problems, depending on the browser you use.

What I want is to have the background image appear only in the 'content' div, to be fixed (so it does not move with the scroll bar), and to be positioned with the allignment to the right hand side of the div.

With FireFox The image is fixed fine, but is position relative to the right hand side (RHS) of the BROWSER WINDOW, and not the div. This results in much of my image getting cut off, or completely invisible with full screen and a high resolution monitor.

With IE, The broblem isn't with left alignment, which works fine. I do suspect a problem with the top alignment, but that is not important. The problem is that the background is not fixed, it scrolls on large windows (try my CV for a long scrolling page.)

The CSS for this div is:

Code:

#content{
  float: left;
  width: 80%;
  border-left: 1px solid #ccd2d2;
  background-color:#FFFFFF;
  background-image:  url("http://www.timtro.innovationdev.com/images/bg.gif");
  background-position:right;
  background-attachment:fixed;
  background-repeat:repeat-y;
}

Thanks alot mates!

Cheers!

<div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div>

When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!!