CSS - Positioning An Element In Relation To An Image Hotspot

I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it.

Hello All...

I'm making lay-out page based on 2 section (left panel and main) using div layer and wrap it under 1 parent layer.

My confusion arise as IE and FF doesn't treat equally (again!)
FF seems to ignore the parent CSS definition while IE obey it, so the background and border value i define in it's parent tag apply on IE but not in FF.

Here is the code related :

CSS Code:
Original - CSS Code .all2 { width:900px; border-bottom: groove #888888 2px; border-left: groove #888888 2px; border-right: groove #888888 2px; margin-left: auto; margin-right: auto; margin-bottom:auto; text-align: left; background-color: #FFECC7; padding:0; } .leftpanel { float: left; display: block; width:125px; font: 10px Arial, Helvetica, sans-serif; text-align: left; padding-top: 25px; padding-left:20px; padding-right:20px; } .mainpanel { float: left; display: block; width: 694px; border-left: groove #888888 1px; padding-top: 15px; padding-left:20px; padding-right:20px; text-align:justify; }

  

 .all2 { 


 width:900px; border-bottom: groove #888888 2px; 


 border-left: groove #888888 2px;


 border-right: groove #888888 2px; 


 margin-left: auto; margin-right: auto; margin-bottom:auto;


 text-align: left; background-color: #FFECC7; padding:0;


 }


  


 .leftpanel  { float: left; display: block; width:125px; 


 font: 10px Arial, Helvetica, sans-serif; text-align: left;


 padding-top: 25px; padding-left:20px; padding-right:20px;  


 }


  


 .mainpanel {  float: left; display: block;  width: 694px; 


 border-left: groove #888888 1px;


 padding-top: 15px; padding-left:20px; padding-right:20px;


 text-align:justify; 


 }  

The HTML :
Code:

<div class="all2">

<div class="leftpanel">	
.....
Left Panel Text 
</div>

<div class="mainpanel">		
....
Main Body Text
</div>

</div>

The Doc Type is XHTML 1.0 Transitional

Many thanks in advanced

Hello

I am trying to fix my links so they remain in the same place regardless of how large the users window is when they browse the site. I have tried using the following code in my style sheet.

h3

{
position:absolute;
bottom:330px;
top:670px;
}


but the link still moves around when you minimise the browser on the site. Bear in mind I have a think black border as well which runs all around the screen.

Any help would be much appreciated.

Not 100% sure if this is CSS related, however:



The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism

What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.)

I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do

I'm trying to create a block quote like in the image below:

http://www.norrislakevillas.com/images/block-quote-sample.png

The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.

The element is rendering correctly with the exception of the background image, it just won't show up.

CSS Code:
Code:

#block_quote{
   float:left;
   width:400px;
   background:#f7f7f7;
   background-image:url(images/quote-top.png) left top no-repeat;
   margin:50px 0 100px 53px;
   border:1px solid #ccc;
}

#block_quote p{
   font:italic 14px segoe ui, arial, sans-serif;
   color:#5f5f5f;
   line-height:1.4em;
   margin:0;
   padding:20px 15px 20px 60px;
}

Any ideas why the image isn't rendering?

Thanks

I have a very simple form that has a select list and next to it a submit button. If I use a standard button for the submit then it sits next to the select list (on the right of it). If I change the submit button to an image it pushes the select list down by about 5 pixels.

I have tried everything I can think of, everything is set to display:inline etc but I can't work out the problem.

Any ideas? It happens on firefox and IE6 and probably all other browsers as well.

Ok,

I have a div tag set and a width at 500px. I have some and image, some text, and second image.

Main questions. I want that second image to be aligned at the far right side of the 500 pixel wide div element and vertically align it in the middle. What is that attribute I should use?

When I used float it caused problems with my 1px border.

Hopefully this makes
- Mike

I'm a bit baffled on this issue. Please visit this page -
www.atrachapter.com Focus on the main image in the body of the page and mouse over the left hand navigation. The image jumps to the left. I have tried looking at all the css to see what is causing this but am baffled. Any help would be apprecaited. Thanks. Tom

I am building a site and using CSS selectively where I need to control positioning. The site is tapmytrees.com I am having an issue controlling the positioning of the "Add This" image at the footer of the page.

I am able to position this right, center, or left, but other than that, have no luck.

Currently I am using the following code:
#divAddThis {
text-align:center;
}


I am able to use this code to control the positioning of the line below this image:
#divLive {
float:left; /* moves to right in footer*/
left:-24px; /* adjusts position */
position:relative;/*needed for left and bottom to work*/
text-align:left; /*align text*/
bottom: 5px; /*move up a bit off the search line*/
}

When I try to apply the same code to #divAddThis, it has no effect. In fact, using code similar to #divLive, it does not even show up when viewing the results in FireBug.

Any suggestions are appreciated. Thanks.

I'm new to CSS. What is the best way to position an image?
I tried using this:

#image
{
position: absolute;
top: 234px;
left: 567px
}

But for some reason it doesn't work...How can I position an image?
Thanks

PS another thing that's been bothering me is when do you put: (in the external stylesheet)

.image
{.....
}

when do you put

#image
{......
}

and when do you put

*#image
{......
}

What's the difference between them and what circumstances do you use them in?

Is this possible with css?
I have a single table cell thats 100% wide. I want an image left aligned, an image right aligned and a background image spaning the entire cell. I also want to type text into the cell between the two images. Using html I get bugs in IE so I think css might be the better option?

HTML -- CSS
I decided my last layout looked like poop so I'm changing it. In FF the center logo fits right in the middle of the background image to give it a stretching effect. In IE the image is slightly above the baseline. (maybe 3-5 px) Any help here?

In the code below, why is the image not positioned at the very top of the DIV in IE only (seems to be fine in FF)?
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<style>
	.test {
		width: 200px;
		height: 100px;
		border: 1px solid #003366;
	}
	.image {
		position: relative;
		left: 0px;
		top: 0px;
	}
	</style>
</head>

<body>

<div class="test">
	<img class="image" src="images/block_up.gif" width="11" height="11" border="0" alt="">
</div>

</body>
</html>

Here is the website i am struggling with, http://www.richmondsproperty.co.uk/ . i am trying to place a linked image in the top right corner, above the phone number without moving anything else. I tried to put it in a div and use float right but it just pushed everything else down.

Here is the code being used

Code:

	<div id="header">
		<div id="header_logo">
			<a href="<?php echo base_url(); ?>"><img src="/public/images/logo.jpg" alt="Primmer Olds logo" /></a>
		</div>
		<div id="top_menu">
			<ul>
				<li><a href="<?php echo base_url(); ?>" <?php echo ( uri_string() == '' ? ' class="down" ' : '' ); ?>>home</a></li>
				<li><a href="<?php echo base_url(); ?>about-us/" <?php echo ( preg_match("/\babout-us\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>about us</a></li>
				<li><a href="<?php echo base_url(); ?>why-choose-us/" <?php echo ( uri_string() == '/why-choose-us/' ? ' class="down" ' : '' ); ?>>why choose us</a></li>
				<li><a href="<?php echo base_url(); ?>lettings/" <?php echo ( uri_string() == '/lettings/' ? ' class="down" ' : '' ); ?>>lettings</a></li>
				<li><a href="<?php echo base_url(); ?>news/" <?php echo ( preg_match("/\bnews\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>news</a></li>
				<li><a href="<?php echo base_url(); ?>community/" <?php echo ( uri_string() == '/community/' ? ' class="down" ' : '' ); ?>>community</a></li>
				<li><a href="<?php echo base_url(); ?>home-sale-network/" <?php echo ( uri_string() == '/home-sale-network/' ? ' class="down" ' : '' ); ?>>home sale network</a></li>
				<li><a href="<?php echo base_url(); ?>contact-us/general/" <?php echo ( preg_match("/\bcontact-us\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>contact us</a></li>
			</ul>
		</div>
	</div>

Code:

#header {	
	margin: 0 auto;
	text-align: center;
		
	padding: 0;

	width: 980px;
	height: 166px;
	background: url(/public/images/header.jpg) no-repeat bottom right #e6e6e6;
}

#header_logo {
	float: left;
	margin: 0 0 0 0;
	width: 166px;
	height: 166px;
	background-color: #dc006c;
}

#header_logo img {
	margin: 0;
	
	width: 166px;
	height: 166px;
}

Any help would be appreciated, thanks!