Top of image lopped off & border/space on right hand side of image between text?

[Pheasant Plucker®]

Hi there,

I am designing a webpage - well using a template that came with the package
and modifying it to suit so I can't claim any credit - or knowledge of html
for that matter...;^)

I have a vertical graphic that displays on the left hand side of the page.

Now this displays correctly on my usual 1280 x 1024 display with a small but
clearly defined space/gap/border between the graphic & the text on the page.

When I preview it in a 1024 x 768 display however the text of the webpage
impacts into the graphic.

In addition the top of the graphic is 'lopped off'

I have a stylesheet.css where the picture is defined as follows;

body {
background-color: #FFFFFF;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10pt;
color: #585858;
text-align: left;
background-attachment: fixed;
background-image: url(images/picture.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

The stylesheet is called by the webpage as follows;

<link href="weatherstyle.css" rel="stylesheet" type="text/css">

How best to prevent the text from impacting the graphic?

Also how do I stop the top of the graphic being lopped off on smaller
resolution browser windows please?

Not sure if this is enough to go on but any help/tips/advice would be
appreciated.

 

[Ronx]

The image is a background image - it is fixed to the left and bottom
margins of the browser. The only way to prevent the image being
overwritten of cropped is to ensure all your users have their browsers
opened to 1280x1024 as a minimum.

Alternatively, change the CSS to:
body {
background-color: #FFFFFF;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10pt;
color: #585858;
text-align: left;
background-attachment: fixed;
background-image: url(images/picture.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-left: 200px;
}

Change the 200px in the margin-left: 200px; to the width of the image plus
10px to prevent text overwriting. You may have to change something else
defined elsewhere as well, since the original CSS would cause ALL text to
overwrite the graphic. Also seriously consider changing the 10pt text to a
screen oriented size, such as .8em Points (pt) are for print, not for
screen displays, and will cause problems for IE users who have to adjust
the text size to be able to read any text.