CSS - Proper Way To Position Image In List-style-image

I am working on a pop out menu on warrenhomes .

The image displays properly in firefox and IE8, but the menu leaves are cut off in IE7 (or IE8 compatibility mode).

pushing the list-style-position:inside; line isn't really helping either. Can someone tell me why ie7 is displaying list-style-image differently and possibly how I can correct this issue?

I'm having a "can't think" day.

How would I get rid of the space(s) between the image icon and the <li> folder or file name on my test website?

On the left-hand side of my test website, there is a directory tree listing.

You'll see that php files are indicated with an php file icon for example.

I don't want that much space between the file name and the file icon.



Test website: www seemyinvestments dot com

I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example:

Currently like this
Code:

#store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}

want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}

with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet.

effectively so i can just change the other external style sheet to change the gif file and keep this one the same.

HOW? possible?

Hello.

So I have this situation (on the right):
h t t p : / / img339.imageshack.us/img339/6958/1stb.png

and when I change my browser resolution, I get this (on the right):
h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png

Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text.

Thanks in advance for any suggestions and tips.

Hello all. May I ask for your help? I just finished developing a site for personal page (e.g. blog, myspace, etc) promotion, but I'm having troubles correcting my stylesheet. The home page is basically a bunch of pictures of people, but I don't have anyone loaded in the system yet, so I can't get a feel for whether or not it is behaving properly. This probably sounds like SPAM, but oh well. Would anyone be willing to give it a try and provide your thoughts in this post? The web address is http://www.klik.us.

Thanks a ton for any help/comments.

www . myspace . com / newsoundproduction


I cant get the background image to sit at the bottom of the page... already tried millions of things and im still getting the same error...

Code:

<style>
body {
  background-color:FFFFFF;
  background-image: url('http://copydential.net/gus/newwall5.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom center;
}
table, tr, td {background:transparent; border:0px;}
table table table {background:transparent;}
table table table td {
  background-color:FFFFFF;
  filter:alpha(opacity=90); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8; 
}
table table table table td {filter:none;}
table table table {
  border-width:3px;
  border-color:FFFFFF;
  border-style:solid;
}
table table table table {border:0px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font,
body div table tbody tr td font {font-family:Verdana !important;}
td, span, div, input, table td div div font,
body div table tbody tr td font {color:000000 !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10, .btext {color:000000 !important;}
a {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
.r{;}
.navbar {visibility:visible;} .navbar font {visibility:hidden;}
a.text, table div font a {display:none;}
table div div {visibility:hidden;}
table table div div {visibility:visible;}
a img {filter:alpha(opacity=100); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
img {border:0px;}
table table table {width:300px;}
table table td.text table, table table td.text table td {width:100%;}
</style> 
 
 
 
<style>
.contactTable {
   width:300px !important; height:150px !important; padding:0px !important;
   background-image:url("http://copydential.net/gus/newcontact.jpg");
   background-attachment:scroll; background-position:center center;background-repeat:no-repeat; 
   background-color:transparent;}
.contactTable table, table.contactTable td { 
   padding:0px !important;border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>




<style>
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
</style> 

If you look at that page in IE6 you'll see the image with the woman is misaligned. It looks fine in FF and IE7.

I'm not sure what I need to do to get it to align in IE6. This isn't my site design and frankly the CSS is a mess (too many css includes, etc), so I'm actually pretty lost as to how to fix this.

Does it have something to do with the #leftcontent being absolute positioned?

Hi, I have 2 divs. The first one is set to a specific width and height. The second one varies in size. The problem is that I need the second div to sit on top the first, and the page to position itself according to the first div.

Here's an example:http://www.caillouette.com/testSite/index2.php

The blank image will be white, but it's dark grey for demonstration purposes.

here's the CSS: Code:

.big_image{
z-index:9;
position:absolute;
left:0px;
top:0px;
margin: 5px 0x 0px 27px;
}

.big_image_blank{
z-index:0;
position:relative;
width:262px;
height:262px;
background-image: url(images/Uploads/Listings/blank.jpg);
margin: 5px 0x 0px 27px;
	
}

Hi I have just read this

Quote:
Using CSS to position text and graphics absolutly, relatively and overlapping
elements such as text and images. Includes the best way of overlapping text



Can some one tell me therefore if it is possible to explicitly specify the position to place an animated gif on top of an existing image with an image map; almost as a marker.

Thanks for your help

Rob

Hey

I got a table which displays the profile (data/info) of a user.
The first column says: first name, last name, email, etc.
the second column shows the actual data: stefan, blabla, blabla@hotm... etc.

Then i have a third column where the 8 cells are rowspanned into one big cell. In this celll i want to show a picture that can be max: 250x250 pixels. The image might be smaller but not bigger.

My problem is that some users have smaller pictures and some users have the maximum allowed dimensions. So if you browse through all the profiles by clicking the next button, the other elements on the page shift lower or higher depending on the size of the uploaded image.

What i wanted to do is make a basic picture of 250x250 and put that in the cell for every member. And then display the real picture above the standard pic. I just dont know how to let the images overlap with eachother.

Or is there a better way for this? I probably shouldnt use a table for this at all. But how do i make a table with the tabular data. And put the image next to the table? It automatically shifts to the next line for me...

hope you can give me some tips.

(my eventual goal is to make every user profile look exactly the same with the only difference being the data of the member-profile.)
thanks in advance.

hey, i have this code below at the top of my page...the image that is there a a background image i would like to more to the right a bit so that some of the orange background is shown on the left!! can anyone advise how i do this please?? thanks

Code:

#TitleBar {
	margin:0px 0px 10px 0px;
	padding:28px 0px 5px 10px;
	padding-left:10px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #ffffff;
	border-bottom: 1px #ff9900 solid;
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#ff9900;
	background-image:url(../images/webmedia72.gif);
	background-position: left;
	background-repeat: no-repeat;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:14px;}

thanks
RF

I have a logo which I would like always positioned at the bottom of a div.

Does anyone know a way of achieving this?

http://www.willisemail.co.uk/skill/

The logo is in the bottom right hand corner.

Cheers

Jemes


/* Site Holder Start */
#box {
width: 750px;
margin: 0px auto;
padding: 0px;
text-align: left;
border: 1px solid #979696;
background-color: #FFFFFF;
background-image:url(../Images/mid.jpg);
}
/* Site Holder End */


/* Site Holder Start */
#box2 {
margin-left: 49px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0;
}
/* Site Holder End */


/* Content Start */
#content {
width: 461px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/* Content Start */
#content2 {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/*Right Menu Start*/
#right {
width: 178px;
padding:0px;
float:right;
background-color:#FFF;
overflow: hidden;
}

#right2 {
margin-top:0px;
margin-left:14px;
margin-right:14px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}

.RightMenu {
margin-top:10px;
padding: 0px;
font-size: 13px;
color: #6884AE;
font-weight: bold;
}

.RightMenu ul
{
padding: 0px;
margin: 0px;
list-style-type:none;
}

.RightMenu li {
background-image: url(../images/img_Li_Image.jpg);
background-repeat: no-repeat;
background-position: 0em;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 14px;
margin-top:5px;
}

.imgTitle {
text-align:center;
margin-top: 13px;
margin-left:0px;
margin-right:0px;
}
/* Right2 Menu End */

.imgRight {
text-align:center;
margin-top: 10px;
margin-left:0px;
margin-right:0px;
border: 1px solid #979696;
}

.imgMain {
text-align:center;
margin-top:10px;
border: 1px solid #979696;
}

.Menu {
margin-top:10px;
padding: 0px;
}

.Menu ul
{
padding: 0px;
margin:0px;
list-style-type:none;
}

.Menu li
{
display: inline;
list-style-type:none;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 0px;
margin:0px;
}

.Main {
padding:5px;
border: 1px solid #979696;
margin-top:8px;
margin-bottom:10px;
}


.Cove{
margin-top:15px;
text-align:center;
}

Hi,

I am trying to position a image after the text link. If the link is in a single line then it works good, but when it goes to next link then the image disappears. This is the code:

Code:

<style>
.master {
	font-family: arial;
	font-size: 12px;
	width: 200px;
}

.master a{
	font-weight: bold;
	color: #999;
	text-decoration: none;
	background: url(1px.gif) no-repeat fixed right bottom;
	padding: 0px 15px 0px 0px;
}


.master a:hover {
	text-decoration: underline
}
</style>

<div class="master">
<a href="#">Link Title: Cascading Style Sheets (CSS) forum</a><br/>
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the "learning CSS" page. For background information on style sheets, see the Web style sheets page.
</div>

Please advice.

Thanks in advance.

Take a look at this site: http://clients.ekcetera.com/thunderhook/thunderhook/#

The image that displays: Welcome to the Wilderness is giving me trouble. It's 85 px tall and I can't get it to bump up right underneath the navigation. It's like there's something there blocking it from doing so. If you highlight the images and the navigation, you can see this little block of space off on the right side that gets highlighted. I can't seem to find where that is being created.

Here's the CSS:
Code:

body {
	background-color: #C2B59B;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
.container {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}
.logo {
	position: absolute;
}
.whitebackground {
	background-color: #FFF;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	height: 1000px;
	padding-top: 30px;
}
.mininav {
	text-align: right;
	width: 835px;
	margin-right: auto;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 25px;
	color: #036;
}

.header {
	background-image: url(images/header.jpg);
	width: 835px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 155px;
	background-repeat: no-repeat;
}
.mainnav {
	background-image: url(images/transparent.png);
	background-repeat: repeat;
	height: 25px;
	width: 835px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}


/* Dropdown Menu Styling */

.dropdown {
	float: left;
	position: relative;
	left: 123px;
	top: -16px;
}


.dropdown dt {
	cursor:pointer;
	padding-right: 15px;
	padding-left: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 25px;
}
.dropdown dt:hover {
	background-color: #C2B59B;
}
.dropdown dd {
	overflow:hidden;
	width:200px;
	display:none;
	z-index:200;
	opacity:.6;
	background-color: #DED8C9;
	position: absolute;
	left: -40px;
}
.dropdown ul {
	list-style-position: outside;
	margin-left: -40px;
	font-size: 13px;
	
}
.dropdown li {
	display: inline;
	
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
	display:block;
	color:#333;
	text-decoration:none;
	width:200px;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
}
.dropdown a:hover {
	color:#000;
	font-weight: bold;
	background-color: #C2B59B;
}
.dropdown .underline {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
}
.welcomewilderness {
	text-align: center;
	margin: 0px;
	padding: 0px;
	height: 85px;
}
.welcomewilderness img {
	vertical-align: top;
}

HELP!

Look - I'm 59....almost 60 - and I've been using tables forever. So please forgive, what I am certain, is a fairly stupid question. But I have been trying to wrap my head around CSS and I have struggled with it for the last couple of years..... It's like Algebra, for me - it seems as though it's something I can never really learn.

I am trying to re-build an old site and avoid using tables. All I want to do is put an image - positioned absolutely - in a DIV header area. I've managed to get the page, by the way, to display the header, the footer, a fix-width center area, etc. just fine - which is no small miracle, for me. What I've got, now, looks like this:


The code looks like this:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body {margin: 0 0 0 0; background-color: #E1DACD;}
#header {width: 100%; height: 120px; background-color: #F1E2C2;}
#social {position: absolute; top: 26; left: 730;}
#container {
 	margin-left: auto;
 	margin-right: auto;
 	width: 960px;
 	text-align: left;
 	background-color: #FFF;
    height: 600px;
 	}
#footer {width: 100%; height: 80px; background-color: #EFE1C1;}
h2 {font-family: arial; font-size: 21px; font-weight: normal; display: inline;}
</style>
</head>

<body>
<div id="header"><img src="head1.gif">
<div id="social"><img src="22s.gif"></div>
</div>

<DIV id="container">
<DIV style="padding-left: 12px;"><h2><br>Some content...</div>
</div>
<div id="footer">footer</div>

How in the heck do I get that social networking .gif to end up in the header, to the right of the domain name....?

Any help would be greatly appreciated.