18 replies [Last post]
cRaCKh0rN
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2005-11-09
Posts: 10
Points: 0

Hi all,

using an image in a p tag... Same old story. doesnt look like its aligned middle using "middle" but looks sweet with "absmiddle".

absmiddle is not valid xhtml.... Anyone have a suggesstion on how best to do this that works easliy throughout the site as oppose to css hack on the p ?

Cheers

Anonymous
Anonymous's picture
Guru

Re: absmiddle xhtml

Show your work.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 27 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

absmiddle xhtml

Triumph wrote:
Show your work.

Brings back memories...high school math class. Wink

- r

cRaCKh0rN
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2005-11-09
Posts: 10
Points: 0

absmiddle xhtml

Anonymous
Anonymous's picture
Guru

absmiddle xhtml

Just as I suspected, this has absolutely nothing to do with CSS.

cRaCKh0rN
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2005-11-09
Posts: 10
Points: 0

absmiddle xhtml

Excuse me?

It has everything to do with css as its about getting an image to position correctly... I was asking wether anyone had ideas of how to get around this by some possible css etc

Anonymous
Anonymous's picture
Guru

absmiddle xhtml

cRaCKh0rN wrote:
Excuse me?

It has everything to do with css as its about getting an image to position correctly... I was asking wether anyone had ideas of how to get around this by some possible css etcYour example:

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<p>This is my text with middle and my image.. works sweet in FF but is around 2-3px to low in IE &nbsp;<img src="images/generic/btn_downloadPdf.gif" alt="Download" align="middle" /></p>

<p>This is my text with absmiddle. Renders perfect in IE but isnt valid XHTML&nbsp;<img src="images/generic/btn_downloadPdf.gif" align="absmiddle" alt="Download 2" /></p>
</body>
</html>

No css. None.

Had you tried some css (even if it didn't work) your argument would hold water.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 11 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

absmiddle xhtml

Middle aligning something with CSS is near-impossible until CSS3 is finalised and supported by browsers.

Quote:

This is my text with middle and my image.. works sweet in FF but is around 2-3px to low in IE

It doesn't, at least not in my Firefox.

Verschwindende wrote:
  • CSS doesn't make pies

cRaCKh0rN
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2005-11-09
Posts: 10
Points: 0

absmiddle xhtml

Quote:
I was asking wether anyone had ideas of how to get around this by some possible css etc

The idea is that people who have knowledge of css may be able to help right? That ofcourse isnt the page but a mock up as an example...

thepineapplehead:-

Thanks for the reply. Its actually IE where the problem lies. Its just a few pixels high.

Anonymous
Anonymous's picture
Guru

absmiddle xhtml

cRaCKh0rN wrote:
Quote:
I was asking wether anyone had ideas of how to get around this by some possible css etc

The idea is that people who have knowledge of css may be able to help right? That ofcourse isnt the page but a mock up as an example...Alright, sorry then. Google vertical-align.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 11 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

absmiddle xhtml

Do a search on here for "vertical-align", and you should get some helpful pointers.

It's not really worth the hassle though Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

cRaCKh0rN
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2005-11-09
Posts: 10
Points: 0

absmiddle xhtml

Thanks very much.

Embarrasingly that actually worked.. I was sure I had tried it previously... :oops:

Smile

Anonymous
Anonymous's picture
Guru

absmiddle xhtml

Something like this:

p img {
vertical-align: middle;
}

or to adjust it you could:

p img {
position:relative;
top: -2px; /* adjust this to taste */
vertical-align: middle;
}

cRaCKh0rN wrote:
Embarrasingly that actually worked.. I was sure I had tried it previously... :oops:
This is why I was so suspicious. Seemed too obvious. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 11 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

absmiddle xhtml

Triumph wrote:
Something like this:
p img {
vertical-align: middle;
}

This actually works? Seems too easy . . . :?

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

absmiddle xhtml

thepineapplehead wrote:
Triumph wrote:
Something like this:
p img {
vertical-align: middle;
}

This actually works? Seems too easy . . . :?Uh, yeah. I tried it. Laughing out loud Vertical-align works just peachy on inline elements such as text and images. Smile

Example to follow... give me a moment.

Anonymous
Anonymous's picture
Guru

absmiddle xhtml

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

absmiddle xhtml

It's just been discussed on another thread; vertical-align works on the line boxes of inline elements so will adjust text against an image or the other way round or on a table element it will center content.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

absmiddle xhtml

I had a similar problem to this a year ago but I needed the image to hang down at the end of the last line of text within a paragraph, without affecting the line-height of the last line of text (Hugo - you might recall this issue on the site you once helped me with). I also wanted a non-Javascript rollover action on the button.

I used a transparent image of the button's dimensions (19px high) as the inline clickable element, and assigned the button image as a background image to the surrounding anchor tag (this also meant that I could use an alternative image on the hover). I aligned the image thus:

a.button img {
   vertical-align: top;
}

...and then set the anchor tag thus:

a.button {
   position: relative;
   font-size: 19px; 
   line-height: 19px;
   vertical-align: top;
   border: 1px solid white;
   background: url(images/button.gif) no-repeat 0 2px;
}
a.button:hover {
   background: url(images/button_in.gif) no-repeat 0 2px;
}

In order to work correctly, I had to specifically set the font AND the line height, and I also had to set a border else the background image partially disappeared in one browser or the other (I forget which one). In fact, the only way it worked in all browsers was as shown above.

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

absmiddle xhtml

I do to remember Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me