html or css problem

Hi, hopefully someone can tell me how to sort this. I want to indent the text on both sides so that its not overlapping the image border.




The red bordered rectangle is a gif image, I'm trying to hover text over the top of it.

This is in my html:

<!--right1 start -->
<div id="right1">
<a href="http://www.google.com" class="jobBanner"><strong>THIS IS JUST A TEST THIS IS NO JUST A TEST HELLO HI</strong></a>

</div>
<!--right1 end -->

Code (markup):

And this is in my css:

/*------------------------------------------------right1--------------------*/
#right1{
	width:212px;
	float:right;
}
#right1 a.jobBanner{
	background:url(images/newpic.gif) 0 0 no-repeat;
	width:212px;
	height:270px;
	display:block;
	margin:0 22px 0;
	font:normal 11px/18px Verdana, Arial, Helvetica, sans-serif;
	color:#006882;
}

Code (markup):

Anything I try is aligning the image as well. I want the image to stay where it is, and just indent the text on both sides. Can anyone explain how to do this?

thanks

 

#right1{
	width:212px; /* Width for Firefox,(firefox will exclude padding values from this width */
	float:right; 
	padding:10px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:192px; /* Width for IE,(IE will include padding values to this width */ } 
	html>body #right1 {width:192px;/* Width for Opera,(Opera will behave just same as IE */
	}

HTML:

If you change the padding value, don't forget to change the value of last two width (for example if you decrease padding from 10 to 5px, last two widths should be increased from 192px to 202px

I hope you get it.

 

Thanks guys, that worked perfectly. I'm used to using the lazy option of just putting the text in the psd and flattening it, decided to do it the proper way this time!

+rep left for you both

cheers

 

There's absolutely no need to use this code. Furthermore, the hack you suggested can cause severe usability issues for those who have to use screen readers to access a Web page, since your hack will literally tell the screen reader to scream at the user.

Vic, you can avoid having to use this pointless (not to mention hair-raising) hack if you put the padding on the anchor, not the floated element.

mhmtozek, in the future, I strongly suggest that if you have to use a hack to account for IE 5.x's broken box model, just use the * html hack to serve two different values (one for IE 6+, and the other for IE 5.x).

Here's an example of what it would look like:

#sidebar {
	background: #FFC;
	display: inline;			/* IE 5 and 6 bug fix */
	float: right;
	padding: 0 1em;				/* this is what causes the box model problem in IE 5.x */
	width: 11em;
}
	
* html #sidebar {				/* IE 5.x Box Model Hack */
	width:13em;				/* this gets sent to IE 5.x (and IE 6 when in Quirks Mode) */
	w\idth: 11em;				/* this gets sent to IE 6 (when in Standards Mode) */
}

Code (markup):

 

Thanks, I never used the second code yet, just the first change Katy said. I'll take a look at it when I get home and see. mm, says I need to spread some rep about before I give you more.

 

Vic, the hack will be unnecessary if you just put the padding on the anchor. The proper Box Model Hack (actually called the "Simplified Box Model Hack" or SBMH) was provided for reference purposes.

 

I didnt know that there is some other hack to fix padding issue. But it is very good to know that there is another and more accessible option out of tantek's box model hack.

Thank you Dan

 

No problem. And like I said, usually just putting the borders, margins and padding on the children of floated elements (such as sidebars) will eliminate the need for a hack in the first place.