CSS - Overlapping Image On Centered Banner

I have a problem, completed a simple website for a client but now they tell me that the image on the page is overlapping text on right, for some reason I cannot see that I see it working, can someone please have a look at http://www.woodenitbenicecfw.com and tell me if you see the overlapping and why it might be happening.

Thanks
Tim

Hi,
Code:

<a href="..." ><span class='openP'></span>Open this section</a>
	
<style type="text/css">
span.openP{
  background-image:url('images/plus.gif');
  background-repeat:no-repeat; 
  width:50px; 
  background-position:left center;}
</style>

Why does "Open this section" text appears over the image 'images/plus.gif'?
How do I make 'plus.gif' to be left or right to the text?

The year is 2009, and surely there is a way to such a simple thing as displaying photos of unknown size in the H-center of a Div--without running off the screen. Oh wait, there isn't. The problem:

Given unknown picture size,

1) if I don't specify absolute positioning (or fixed), I can center it but then it floats to the top of the parent which looks silly.

2) If I do specify absolute (or fixed) positioning, I can't center it.

Please prove me wrong. I just want a simple slide-show page without telling folks what to set their resolution at, or how big the pictures need to be.

Hi Everyone,

I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE.

I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?)

To view what's happening, check it out in FF, and then in IE:
example.com/HTML
example.com/CSS

I have very little code, and I'm not sure what is the relevant part:

CSS:
Code:

.logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
.spacer { height:10px; }
.spacer_10px { height:10px; }
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }

#menu { height:50px; margin-left:200px; margin-top:-80px; }

#home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
#home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
#home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
#home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
#home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }

.spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }

.div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
.div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
.div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }

.footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
.footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}

.text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
.content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }

.text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }

And here is the HTML:
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>Test Page 1</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

	<div class="content_body">
		<div class="div_body_top"></div>
		<div class="div_body_middle">
			<div class="logo_banner"></div>
			<div id="menu">
				<div id="home_btn"></div>
				<div id="home1_btn"></div>
				<div id="home2_btn"></div>
				<div id="home3_btn"></div>
				<div id="home4_btn"></div>
			</div>

			<div class="spacer_10px"></div>
			<div class="spacer_dotted_line"></div>
			<div class="spacer_40px"></div>

			<div class="text_style_body">
				Here is some content. Love that content. One day this text will actually say something.
				...
				<br/>
				<br/>
				Here is some content. Love that content. One day this text will actually say something.
				Here is some content. Love that content. One day this text will actually say something.
				Here is some content. Love that content. One day this text will actually say something.
				...
			</div>

			<div class="spacer_50px"></div>
			<div class="spacer_40px"></div>
		</div>
		<div class="div_body_bottom"></div>
	</div>
	<div class="spacer">&nbsp;</div>
	<div class="footer_bar footer_text">Copyright 2008</div>
</div>
</body>
</html>

Any help is GREATLY appreciated. Thanks!

How do I prevent my bullet points overlaying the image? When the image is floated to the left, strange things happen to the <li> items. They seem to ignore the image.

This will probably make more sense if you try the code below with an appropriate image.

I can get around this problem by using table formatting, but I am trying to learn a CSS alternative.

Here is the code.

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>
    <title>Untitled Page</title>
</head>
<body>
	<p>Hello</p>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
	</ul>
	<img src="http://www.selestial.com/resources/image2.jpg" alt="any old image" style="float:left;"/>
	<p>Hello</p>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
	</ul>
	<p>Hello</p>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
	</ul>
</body>
</html>

I've been away for nearly three months and may have forgotten some of the basics of CSS.
Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window?

I know you can view source to view my <div> structure and so forth; let me know if you'd like
to see any parts of my style sheet.

Thank you for your valuable time.
Curtis

I have a site that I am working on:

test dot choupique dot com

The #subpage class is centered in internet explorer 9, but not firefox 5. I can't figure out why for the life of me. Can anyone see why?

Thanks

How can i accomplish this with CSS?

See image he
hxxp://g.imagehost.org/0398/css.png

(replace x with t)

http://www.lightblu.com/

(It speaks for itself)

how come on my test page, http://www.lightblu.com/test.php works fine (ie. the menu is centered correctly), but not on the homepage? What did I do wrong?

Ok,

I give up... can't figure this one out...
the navbar seems to be centered in IE but not in Firefox.

www.moksha.net/index.html

I notice that it doesn't seem to matter whether I am inside the header div or not.

The navbar is a UL. I don't care how wide it is really... I would love to strip all this down to its most essential.

Thanks!

#header
{
padding: 1em;
margin: 0px;
text-align:center;
width:100%;
align: center;
display:block;
}
#navbar {
color:#FFCC33;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
margin:0 auto;
}
#navbar ul {
clear:left;
text-align: center;
margin: 0 auto;
list-style-type: none;
text-indent: 0;
width: 600px;
background-color:#996633;}
#navbar li {
/* float:left;
width:80px; */
padding-right: 1em;
height: 3em;
line-height:3em;
font-size: 20px;
display: inline;
list-style-type: none;
text-align: center;
margin:0;
}
#navbar a {
color:#FF9933;
text-decoration: none;
}
#navbar a:hover {
color:#FFCC33;
}

As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS.
The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way.

#bottom_center {
margin: 0px;
padding: 0px;
background: #ccc;
width: 470px;
height: 90px;
border-style: ridge;
}
---- then in the body ----
<div align="center">
<div id="bottom_center">
<img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc."
width="470" height="90">
</div>
</div>

Hey guys,

I know that this is a well covered topic. but I am trying to get a container div to sit centered and 100% of the page.

my css reads:

* {
margin:0;
padding: 0;
}

html, body {
height: 100%;
}

#container {
position: relative;
width: 900px;
height: 100%;
margin: 0 auto;
background: url("imgs/backgroundmain.gif");
}

It works fine for the required browsers until the contents of the page goes beyond the size of the screen then the background stops. it literally stops at 100% of window rather than 100% of content. Any ideas???

James MacLeod

Hi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual.

I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide.

My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten.

Code:

<div class="header">
	<div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div>
	<div class="rightAlign" id="topRight">
		<jsp:include page="AccountLinks.jsp"></jsp:include>
	</div><br />
	<form id="searchForm" action="/SearchServlet">
		<input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input>
	</form>
</div>

and the relevant css is

Code:

div.header{
	width: 1000px;
	margin: 0 auto;
	min-height: 60px;
	display: block;
	text-align:center;
}

div.leftAlign{
	 float: left;
	 text-align: left;	
}

div.rightAlign{
	float: right;
	text-align: right;
}

#searchForm{
 vertical-align: top;
    margin: 0;
    line-height: 1;
    outline:0;
}

#searchText{
	background:url(/img/searchText.gif) no-repeat top center;
	padding:0px;
	margin:0;
	display:inline;
	border:0;
	width:159px;
	height: 31px;
}

#searchButton {
	background:url(/img/searchButton.gif) no-repeat top center;
	padding-top:0px;
	margin:0;
	display:inline;
	border:0;
	width:42px;
	vertical-align: top;
    line-height: 1;
	height:31px;
}

Any help that you can provide would be greatly appreciated.

Thank you very much.