I have been designing a website with Dreamweaver MX 2004, and I have run into a snag. My problem is that when I insert an image that is 1024 pixels in width into one of my pages, and preview that page in IE 6 (Screen resolution of 1024 X 768) there is a horizontal scroll bar. However, when I view the same page in FireFox there is no horizontal scroll bar. I have become so frustrated with this problem, that I opened a blank page, and inserted the following line of code: <img src="../Documents%20and%20Settings/J/My%20Documents/My%20Pictures/basketball.jpg" width="1024" height="147" style="position:absolute; top: 200px; left: 0px"> Here is the code for the entire page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> </head> <body> <img src="../Documents%20and%20Settings/J/My%20Documents/My%20Pictures/basketball.jpg" width="1024" height="147" style="position:absolute; top: 200px; left: 0px"> </body> </html> Yet, even though this is the only line of code on the entire page I still get a horizontal scroll bar in IE. This is my first attempt at creating a website, so I have no idea what, if anything I am doing wrong. I would really appreciate it if anyone could look at my code, and point me in the right direction. Thank you in advance to anyone who offers me some advice.
The picture is too big. IE inserts a small area of padding around the picture, as far as I know, plus you have to remember the browser sides as well, further reducing the display area. You'll find different browsers display things differently. What works in one may not work properly in another, e.g. Firefox is ok but IE breaks up and Opera doesn't like it at all. Make the image smaller. Easiest solution.
Thank you very for you reply mcfox. I had kind of figured that my display problem was based on some kind of quirk with IE, considering that I put the image on a blank page, and I still had a horizontal scroll bar.