Help!

[M.E.S]

Hello,

I am new to these forums, so if I don't supply enough info or do something wrong, please let me know.

My problem.

My current problem is simple, yet complicated to fix. I have been designing the website for my company for the last few days, and ever since I started, the same problem has been coming up.

I've tried to ignore it, but it makes the web page look so ugly.

The problem: My banner keeps going 'over' the body of the webpage when zoomed in (or when viewed on a mobile device).

This is my website on a normal browser with a high resolution:
http://tinyurl.com/mes-normal

This is my website on a normal browser with a low resolution (small screen):
http://tinyurl.com/mes-not-normal

This is my website on a mobile device:
http://tinyurl.com/mes-phone

(You can also go to my site here: http://www.maranoaelectrical.com.au

I have never seen this problem before on any websites, and have searched google for hours and hours and no one seems to have this problem.

I have tried all sorts of solutions:

•Making a CSS with the banner as the background
•Normally placing an image
•Placing the Image in a table
•Placing the image in an AP
•Placing the image in a <div>

It's just frustrating.

If someone could help me as soon as possible, that would be great, as it is for a popular business and I have had many emails requesting that my site be complete, and I can't complete it until I solve this problem as the banner is on every page.

Thank you so much!

Additional Details:
1.I know it's not a browser based problem, as I have tried it on all browsers, and it works fine as long as the resolution is HIGH
2.The only solution I have come up with is a temporary one, and that is merely zooming out. But some viewers need the page to be zoomed in, so yeah, go figure.

[Dr3am3rz]

Is it possible to put your codes here??

[M.E.S]

Ok here are the ones I've tried....

- Image inside a <div>

<div><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" alt="Banner" width="1260" height="202"></div>

- Banner inside an AP

<div id="apDiv2"><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" width="1261" height="202"></div>

- Banner CSS (Link to CSS File)

<p class="bannerimg">&nbsp;</p>

- Banner in a table

<table width="200" border="0" align="center">
  <tr>
    <td><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" width="1261" height="202"></td>
  </tr>
</table>

If you want the entire code for my current page, just go to http://www.maranoaelectrical.com.au/index.php and look at the source, although it has nothing special.

Thank you!

[newbb]

Maybe it would be better if you use percentage(%) in your height and width.
Example:

<img src="source.jpg" width="10%" height="10%">

so that the picture will automatically fits into the screen resolution.

I hope i gave you some idea..

[Dr3am3rz]

Originally Posted by newbb

Maybe it would be better if you use percentage(%) in your height and width.
Example:

<img src="source.jpg" width="10%" height="10%">

so that the picture will automatically fits into the screen resolution.

I hope i gave you some idea..

Ok. I've just tried newbb's suggestion and it really works! Just in case, put your image in a <div> and set the <div> height to the same height as your image.

Here's the code:

<div width="100%" height="202"><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" width="100%" height="202"></div>

The red ones are the one you need to add.

[M.E.S]

Thank you so so much!
I'll try it now and see how it goes.

Thank you! Arrh you guys are awesome!

Will get back on how I go

[Dr3am3rz]

No problem =)

[M.E.S]

It WORKED! IT'S BRILLIANTTTTTTTTT!
THANK YOU SO MUCH!

Again, thank you.