<div><img /><p> inlining issue HTML5 - Plz help !!

[amritayadav]

Hi everyone,

I am new (Amrita here ) to this forum so, please, excuse me if I am posting this under the wrong category.

I am writing an HTML5 page and I have code something like this -

<div style="height:75px;width:80%">
		<a href="http://www.somesite.com/" title="" >
			<img src="images/skiptosite.png" class="skiptosite" alt="Logo" /> </a>
		<p id="fade_link"></p></div>

The <p> has a jQuery script running on it wherein there is some fading animation done. The issue is with getting the <p> text aligned beside the img before it.

When I use "float:left", there is a mysterious extra space showing above the div component and since needs to line up right at the top of the page and the background is black, this white space looks annoying.

I have already tried display:block, inline-block, no margin, no padding and what not and I got no-where... I need a new set of eyes.. PLZ help !!

Thanks,
Amrita

[mavigozler]

1. You don't say what element you are applying the float to.
2. A <p> element is normally a block element: did you try display:inline on it?
3. You don't provide an image (screencap) of the visual presentation.
4. Presumably content of some kind is inserted into the <p> element via DOM methods controlled by this jquery library of scripts.
5. Perhaps you want something like a vertical-align:top property applied as style attributes to the <p> elment and either the <a> or <img> element.
6. You don't really provide much to go on, so it is wild guesses as answers.

[amritayadav]

Thanks, I puttered around and something worked. I guess I should have paid more attention to what exactly was wrong there but had a deadline and once it worked, I didn't touch it after that. I appreciate your help though.

Amrita