Positioning of text

[greens85]

Hi all,

Im trying to align some text to the top of my image, the problem im having is that it only works on certain resolutions and not others. When it doesnt display correctly it can be anywhere from overlapping the header, to being completely off the screen (obviously, depending on the resolution).

This is the code im currently using:


<div id="content">
<br/>
<img src="Images/spacer.gif" width="1%" height="0" />
<img src="Images/BernardPadFlyers.jpg" alt="Bernard 6 To View Pad Flyers" width="159" height="360" />
<div id="ticketdetails">

<h4>Product Description</h4>

<p></p>

<h4>Product Specification</h4>

<p>The specification for this product is not available.</p>

<h4>Product Price</h4>

<p>If you would like a price on this product, please call us on xxx xxxx xxxx.</p>

<h4>Additional Information</h4>

<p>There is no additional information available for this product.</p>

</div>

</div>

And this is the css for the two div tags (content and ticketdetails):


#content{
background:url(Images/MainBackground.jpg) repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFEA94;
width:auto;
height:851px;
padding-top:1%;
padding-left:1%;
padding-right:1%;
}

#ticketdetails{
margin-top:-38%;
margin-left:21%;
}

I should mention that there is no problem with the content div, but the ticket details div is nested inside this so i thought it might be worth mentioning.

Can anyone offer me any advice on how to get this text to align with the top of the picture on every resolution rather than just the one i am developing the website on. I've tried all the positioning such as absolute etc.

Thanks in advance.

[jcdevelopment]

You can try and using px, pt, or em's for embedded object text. It might work easier cross browser.


#content{
background:url(Images/MainBackground.jpg) repeat;
background-color:#FFEA94;
width:auto;
height:851px;
}

#content h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}


It will also work better to name it seperately from the actual background image.

[greens85]

Hi, thanks for your quick reply.

Its the ticketdetails div that is causing the problems rather than the content div.

So im not sure doing what you suggested would solve the problem im having as there are paragraphs inside the ticketdetails divs aswell as the headers.

[jcdevelopment]

sorry, didnt see that, try applying those to the two seperate selectors. such as


#content h4 {
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}

#content p {
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}



Then change as needed.