Div text and image

Need text centered but image on the right in the same div

Page 1 of 1

5 Replies - 2865 Views - Last Post: 14 May 2010 - 10:56 AM

#1 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 181
  • Joined: 03-December 08

Div text and image

Posted 14 May 2010 - 04:56 AM

Hello my friends, and thank you for your time.

I have a div with a nested div as follows:

<div id="myDiv">
Title of area here
<div style="float:right;">
<a href="#"><img src="/ocrs/images/med_help.gif" border="0" vspace="0"></a>
</div>
</div>


As you can see I have the anchor tag and the img tag within another div (wrapped in the "myDiv")and I have it floated to the right.

The style on the "myDiv" is as follows:

#myDiv{
font-family: Verdana; 
font-size: 11px; 
color: white; 
background-color: #3399FF;
padding:3px;
font-weight: bold;
text-align:center;
vertical-align:top;
text-transform:uppercase
}
</style>


These render differently in IE8 and IE7. I like the way it turns out in IE8 with the text centered in the div and the image all the way to the right. In IE7 however it turns out a bit different. I am hoping to get this to look the same in both browsers. I have tried numerous variations and just can't seem to come up with a solution. See the pic attached to see the difference in the two browser versions.

Any suggestions, tips, or tricks will be greatly appreciated. Thank you!

Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: Div text and image

#2 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Div text and image

Posted 14 May 2010 - 05:51 AM

Hi,

Have you got a working example of this page uploaded on the internet, so I can fiddle around with it ?
Was This Post Helpful? 0
  • +
  • -

#3 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 181
  • Joined: 03-December 08

Re: Div text and image

Posted 14 May 2010 - 06:03 AM

View Postrevolutionx, on 14 May 2010 - 04:51 AM, said:

Hi,

Have you got a working example of this page uploaded on the internet, so I can fiddle around with it ?


Thanks for your reply. I'm afraid I do not. I am developing within a protected government network. If you feel compelled you could recreate from my example above. Whatever you decide I appreciate your interest.
Was This Post Helpful? 0
  • +
  • -

#4 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Div text and image

Posted 14 May 2010 - 06:19 AM

You code do something like:

<!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></title>	

<style type="text/css" />
* { margin:0;padding:0; }
#myDiv { float:left;width:600px;  background:skyblue url(video_icon.png) no-repeat right;}
#myDiv p {padding:5px; text-align:center; font-weight: bold;text-transform:uppercase}
</style>

</head>

<body>

<div id="myDiv">
	<p>Title content<p>
</div>

</body>
</html>


So the icon is the background of myDiv, and positioned right.
Was This Post Helpful? 0
  • +
  • -

#5 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 181
  • Joined: 03-December 08

Re: Div text and image

Posted 14 May 2010 - 07:51 AM

View Postrevolutionx, on 14 May 2010 - 05:19 AM, said:

You code do something like:

<!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></title>	

<style type="text/css" />
* { margin:0;padding:0; }
#myDiv { float:left;width:600px;  background:skyblue url(video_icon.png) no-repeat right;}
#myDiv p {padding:5px; text-align:center; font-weight: bold;text-transform:uppercase}
</style>

</head>

<body>

<div id="myDiv">
	<p>Title content<p>
</div>

</body>
</html>


So the icon is the background of myDiv, and positioned right.


That is an excellent solution, and it will look great as it removes the need for the img tag from the code. Thank you! But, as you can see in my original code, I need the img tag to be in the code because it is wrapped in an anchor tag making it a graphic link. Could I set the background on the anchor tag to show the image? Is that possible? Thereby still giving the impression of a graphic link?
Was This Post Helpful? 0
  • +
  • -

#6 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 181
  • Joined: 03-December 08

Re: Div text and image

Posted 14 May 2010 - 10:56 AM

View Postmidasxl, on 14 May 2010 - 06:51 AM, said:

View Postrevolutionx, on 14 May 2010 - 05:19 AM, said:

You code do something like:

<!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></title>	

<style type="text/css" />
* { margin:0;padding:0; }
#myDiv { float:left;width:600px;  background:skyblue url(video_icon.png) no-repeat right;}
#myDiv p {padding:5px; text-align:center; font-weight: bold;text-transform:uppercase}
</style>

</head>

<body>

<div id="myDiv">
	<p>Title content<p>
</div>

</body>
</html>


So the icon is the background of myDiv, and positioned right.


That is an excellent solution, and it will look great as it removes the need for the img tag from the code. Thank you! But, as you can see in my original code, I need the img tag to be in the code because it is wrapped in an anchor tag making it a graphic link. Could I set the background on the anchor tag to show the image? Is that possible? Thereby still giving the impression of a graphic link?


OK, so I tried the aforementioned methodology and placed the image in the div through the css background as follows:

<div>
<div class="myDiv">
Title of area here<div style="float:right;margin:0;padding:0;"><a class="logo" href="#"></a></div>
</div>
</div>
              
</body>


and the css...

.myDiv {
font-family: Verdana; font-size: 11px; 
color: white; 
background:#3399FF url(/images/med_help.gif) no-repeat right center;
padding:3px;
font-weight: bold;
text-align:center;
vertical-align:top;
text-transform:uppercase;
}
.logo {
padding-right:15px;
border:1px solid red;
}


With the nested div floated to the right, the anchor tag sits on to of the image that is in the parent div, and when moused over gives the impression that the image is a link. In IE8 all is well. in IE7 the anchor link disappears???

I'm lost. See the pic if it helps.

Attached Image
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1