HTML - Make Image Halt Its Size?

Why are my 1000 pixels wide images are ok in FF and Chrome but seem to be 1.25% larger in IE?

Thanks

I don't know what part of this html is making the pictures in my table compressed width wise but if someone could help that would be fantastic.

Here is the code:



<style type="text/css">
body,table, td, li, p, div, textarea
{font-family:Tahoma; font-size:12pt; color:ffffff; font-weight:none;}

table, td { background-color:transparent; border:none; border-width:0;}
body{background-image:url(http://i7.photobucket.com/albums/y28...onlybkgd.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:bottom right;
background-color:179f99; }

body
{scrollbar-face-color:179f99;
scrollbar-shadow-color:ffffff;
scrollbar-highlight-color:ffffff;
scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff;
scrollbar-track-color:87f5f3;
scrollbar-arrow-color:ffffff;}

.text {font-family:Tahoma; font-size:12pt;
color:000000; font-weight:none}

.redtext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.redbtext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.orangetext15{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.lightbluetext8{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.whitetext12{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.blacktext12{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.nametext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.blacktext10{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold; background-color:transparent}

strong, b {font-weight: bold; color:000000;}

a{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a:link{color:000000;font-weight:bold;font-family:Arial}
a:active{color:000000;font-weight:bold;font-family:Arial}
a:visited{color:000000;font-weight:bold;font-family:Arial}
a:hover{color:000000;font-weight:bold;font-family:Arial}

a.redlink{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a.redlink:link{color:000000;font-weight:bold;font-family:Arial}
a.redlink:active{color:000000;font-weight:bold;font-family:Arial}
a.redlink:visited{color:000000;font-weight:bold;font-family:Arial}
a.redlink:hover{color:000000;font-weight:bold;font-family:Arial}

a.navbar{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a.navbar:link{color:000000;font-weight:bold;font-family:Arial}
a.navbar:active{color:000000;font-weight:bold;font-family:Arial}
a.navbar:visited{color:000000;font-weight:bold;font-family:Arial}
a.navbar:hover{color:000000;font-weight:bold;font-family:Arial}

a.man{font-family:Arial; font-size:10pt;
font-weight:normal;background-color:transparent;}
a:link{color:000000;font-weight:bold;font-family:Arial}
a:active{color:000000;font-weight:bold;font-family:Arial}
a:visited{color:000000;font-weight:bold;font-family:Arial}
a:hover{color:000000;font-weight:bold;font-family:Arial}
</style>

<style> table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 2px;}
table table table {border: 16px dotted; border-color: 87f5f3; background-color: ffffff; background-image:url(); padding:0;}
table table table table{border: 0px;}
table table table table table,
table table table table table </style>

<style>
}
table table table table {border:0px;}
.{content:"Text and Link Properties";}
input {background-color:transparent !important;}
td, div, input, textarea, a, table td div div font,
div table tr td font {font-family:Verdana !important;}
td, div, input, textarea, table td div div font,div table tr td font {color:000000!important; font-size:10pt !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .blacktext12 span,.redtext, .redbtext, .blacktext10, .btext {color:000000!important; font-size:10pt !important;}
a {color:000000!important; font-size:10pt !important;text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000!important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}

<style type="text/css">
table table table
{width:400px; !important;}
table table td img {display:none;}
table table table td img {display:inline;}
table td td {width:0px;}
table {width:500px;}
table table {width:400px; !important;}
table table td {padding:3px;}
table table table td {padding:0px;}
table table table {width:400px !important; height:0px;}
td.text td a img {display: inline !important; }
table table table table table,
table table table table table td {
width:0px !important; padding:0px !important;}
td.text a img {width:130px }
td.text td.text a img {width:100px !important; }
td td td div strong {width:200px !important; display:block;}
.redblackfonttext14{font-weight:normal}
textarea, input, font, a, table, td, div, b {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:lowercase}
span {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:uppercase}
embed, object {display:inline}
.orangetext15, .blacktext10 {
display:block; width:300px; font-size:10pt !important;}
td.text td.text .orangetext15,
td.text td.text table table div {display:none;}
.thanks:mrk{.}
.mct{www.myspace.com/contacttables}
</style>




Yeah it's my myspace page. Sorry I'm such a dummy at html.....

On my web site, I have images displayed in table cells. I have the width set to 100% and the table itself set to 80% width. I do that so that if the browser window size is reduced, then the table's size is reduced to fit the window without having to scroll left or right. That works great, unless the browser window is larger than what I design the page on as in if the end user is using a higher resolution monitor. In that case, the images are stretched rather than reduced to again fill the page.

Code:

<table border="0" width="80%">
  <tr>
    <td width="50%">
      <img src="image1.jpg" width="90%">
    </td>
    <td width="50%">
      <img src="image2.jpg" width="90%">
    </td>
  </tr>
</table>

Is there a way that I can set a maximum size for the images so that they don't get stretched above their intended resolution, while still using the width=xx% attribute to reduce the images to match the window?

I want to limit image uploading size. For example i want to set my image size max. 50kb .

I'm fairly new to making websites, and I want to make a website with a full screen background image jpg, but I'd like it to be full screen in all resolutions. Is this posible? I want to use this image as a background
http://img236.imageshack.us/img236/4...dexbackcu3.jpg
and then add menus and text content.
any tips? thanks!
jdawest

How to set width & height of background image ?
Since generally we set background image for anything like table, div tag etc.
but i need that the image size is very shot while assigning as background image so how can i manage this width & height ?
Please tell me that how can i do it bcoz I am not able to resize it by css also.

OR

Whenever I put any image in background then it must show me full image not a croped image whether cell size is low or very high...Generally it crops image or sometimes it repeats image 2 or more times.
Since i know i can stop the repeating image but I want to know to put the fully image in cell / table / div etc..

Regards....

Hi! I'm new to this site and new to HTML so please don't bash me. I really need help with a problem I have. I have four images as my buttons and links to various pages on my site. They're rectangles that spread out horizontally on my screen. However, not all computer screens are the same size, so at school for example, since the screen is smaller, the order of my links gets messed up. Is there any way to size an image so that it is 25% of a moniter? If so, could someone just like, right the code down so I may copy? I"m really bad at html. Any help would be appreciated. Thanks!

Hi,

I'm currently designing this website:

www.carmelalopez.com

and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user.

This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated.

Thank you.

As a part of a project I am doing I want to display images on a website. The width/height of the image displayed on the screen should depend on the orientation of the image. The idea is to make the longer side 150px, so if width is greater than height then width=150px, else if height > width, then height=150px. Is there a simple way of doing this?

My solution to this is to store the image height and width in a database (I already need to create a database for images), and am using onLoad attribute to change the width/height based on a boolean parameter which tell the orientation of the image, a test version of the code is here (wait for the image to load)
http://www.confusionart.com/public/test.html
However, as you can notice, first the complete image is loaded and then resized to the desired size. i.e. there is a unnecessary switching of sizes on screen. Is there any way to avoid this.

Hi all,

I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read.

I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read.

With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself?

Many thanks

Joe

Hi there, I have put a youtube video source in dreamweaver, and was wondering if anyone could tell me how i make it so the browser window the video is in clings to the video, i.e the frame is the exact size of the video. Also, however this is done, would it be the same code with images? Thanks in advance, Rob

Here is the code

<body>
<td><a href="<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NIktYSst2mw"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NIktYSst2mw" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
</body>
</html>

Hi,

I would like to know if I can make the background image (over which I will write the content of the page) to fit the space I'm using. For example, I don`t how to explain it , but I see sites with the navigation bar image or the content image to adapt its size according to the amount of text on them. And then it seems like they are infinite, again, it adapts to the isze of the page. But my background image stays the same size all the time and I can see the end of it.

I know I didn`t explain it very well but I don`t know exactly what I need to do this so, if someone could help me, thanks a lot.

i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame
now this 1.htm is quite a long frame and has a scrollbar
and 2.htm is a short one
i dont the scroll bar beside my frame 1 but want it to be for my entire parent window
ie i wont to scroll both my left and right frames together
how do i do that

Yeah, it's probably a real simple question but it's bugging the heck out of me.
I'm trying to design my first layout (hence why it looks so simple), but it's not working out.

Here's the layout: http://www.lifeschronicles.net/index_test_brown.html

I want the content boxes (pale brown) to run all down the page.

How do I do that?

Please help.

Edit: Ok I have finally realised what I need to do. So simple! Haha. Can ignore/delete this thread if you want to. Sorry guys!

Hello,
I am making a squad list for my football team and i have created a table containing all the information; squad number, name , position etc. In the last column i want to have it so there is a blank field or a field with a ver small thumbnail in and when the cursor hovers over this an image appears, but only whilst the cursor is over that small part. hope this make sense