HTML - Image Size V. Content Size

Helllo all,

I'm hoping someone with more HTML skills than I have can see where my problem is with trying to modify a pre-built website. I have an area at the top of my webpage where I'm trying to just add a small iframe that will contain a link to a related website. What happened when I added this in what I thought was the right place, is that it appeared in place of where other content was supposed to be. I then tried to contain the problem by creating a table, and given that each of the two existing pieces of content were in div blocks, I put each div block within a table data element (td). Unfortunately, even with specified column widths, the best of the results I've achieved results in my site search content having the button get pushed onto a new line and thus almost invisible, leaving the text input box in place. It's as if the PHP stuff in that div block is somehow pushing the browser to considerably widen the first cell unless I restrict it's width. The site you can see this on is:

http://debtfreenewsblog.com

The site is somewhat slow - takes 30 to 45 seconds to load (a separate issue, but if you happen to see why, let me know), but once it does, you can use view source and see the very first table and you'll see the resulting HTML. Dreamweaver's design view doesn't do anything to indicate why there's a problem, and kind of hides reality from me. There is a style sheet, or perhaps even more than one, for the site, and as I'm not familiar with exactly how that works together with everything else, that may well be where the problem is. Any and all help will be appreciated. My objective is to just get the search button to come back to the same line as the text input box.

Steve
(aka sgmunson)

Hello everyone,

I am in deep trouble... :-( ...

For some reason Safari does not adapt the table height to the content size.

All other browsers automatically adapt the table height to the content size, but Safari doesn't, and the result of the website I am developing, when seen on Safari, is a mess...

Can someone tell me how to make Safari adapt automatically adapt table height to content size?

Thank you very much in advance and anyway...

Cheers,

John

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?

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....

Instead of using width/height in pixels to make an image smaller, is it possible to make it 50% its size?

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

Ive got this nice 900x600 transparent background for my website.. but its 1,2 MB large......

Im guessing its too large to load in an acceptable amount of time..

So, ive tried saving it for the web & devices.. and, well.. PNG 8bit sucks.
It doesnt support transparancy?

Anyone know what to do? What program to use?
I want to keep the quality, dimension, and format (since PNG is the only one who supports transparent shizz right?)

Cheers,
thank you

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

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.

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 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

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,

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.