Jump to content

my images and text are jumping out side my boxes.


Recommended Posts

I have two problems with my code that I just can not get my head around.

 

1. the images are not within the borders, i am really wanting them to always be no more than 100px high and no more than 90px wide.  in either case.  I tried to use the !important tag but this did not work in firefox or IE. 

 

I have even tried the max-width and max-height but still no luck.

 

2.  when I view the source code in firefox it does not have any of the products in the html code, but it does show up in IE ?!  strange, is there something else wrong with my code that is causing this to happen.

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
/*div { border: 1px solid blue; }*/
.bodyContainer {		border: 0px solid pink; float: left;	width: 600px; }
.header {				width: 100%; text-align: center; font-size: 30px; }
.menu {					width: 100%; text-align: justify; font-size: 12pt; }
.searchCategoryBox {	border-right: 1px solid orange; float: left;	width: 110px;	padding: 3px; font-size: 10pt; }
.results {				border: 0px solid blue; float: left;	width: 443px;	padding: 3px; font-size: 9pt; }
.multiItemBoxes {		border: 1px solid red; float: left; width: 90px; height: 100px; margin: 4px; padding: 4px; text-align: center; }
.footer {				border-top: 1px solid grey; width: 100%; font-size: 12pt; }
.clearfloat {			clear: both; }
.productLineheight {	line-height: 5px; }
-->
</style>
</head>
<body>
<!-- start of pink -->
<div class="bodyContainer">
<div class="header">Header</div>
<div class="menu">Home Product About us Contact us</div>
<form action="" method="post">
	<div class="searchCategoryBox">
	  <p><strong>Search categories</strong><br><input name="query" type="text" size="12"><br><input name="search" type="submit" value="search"></p>
	  <p>a</p><p>b</p><p>c</p>
	  <p><strong>List by category</strong></p>
	  <p>d</p><p>e</p><p>f</p>
	  <p>(all of these are taken from the mysql’s category table)</p>
	</div>
			<div class="results">
			<div>Showing 1</div>							<div class="multiItemBoxes">
						<img class="multiItemBoxesImg" width="84" alt="Fiskars Medium Bypass Pruner" src="pImages/pic_3570.jpg"><br>
						Fiskars Medium Bypass Pruner<br><br class="productLineheight">
						£11.99p<br><br class="productLineheight">
						buying: <select name="3570">
													<option value="0">0</option>
													<option value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
													<option value="6">6</option>
													<option value="7">7</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
													<option value="11">11</option>
													<option value="12">12</option>
													<option value="13">13</option>
													<option value="14">14</option>
													<option value="15">15</option>
													<option value="16">16</option>
													<option value="17">17</option>
													<option value="18">18</option>
													<option value="19">19</option>
													<option value="20">20</option>
													</select>
						</div>
													<div class="multiItemBoxes">
						<img class="multiItemBoxesImg" width="84" alt="Rolcut Digging Spade" src="pImages/pic_3560.jpg"><br>
						Rolcut Digging Spade<br><br class="productLineheight">
						£13.49p<br><br class="productLineheight">
						buying: <select name="3560">
													<option value="0">0</option>
													<option value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
													<option value="6">6</option>
													<option value="7">7</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
													<option value="11">11</option>
													<option value="12">12</option>
													<option value="13">13</option>
													<option value="14">14</option>
													<option value="15">15</option>
													<option value="16">16</option>
													<option value="17">17</option>
													<option value="18">18</option>
													<option value="19">19</option>
													<option value="20">20</option>
													</select>
						</div>
											<br class="clearfloat">
									<br class="clearfloat">
									<br class="clearfloat">
								</div>
</form>
<br class="clearfloat">
<div class="footer">footer</div>
</div><!-- end of pink -->
</body>
</html>

here are the screen shots from Firefox and IE

 

what i was hoping to have is a maximum width and or height

 

IE seems to show a large image and firefox has the text overlap outside the box area

 

what am i doing wrong in my code that causes this ?

 

[attachment deleted by admin]

A suggestion for your image problem:

Don't show the images! Show thumbnails of the images. That a look at this software:

http://www.fookes.com/ezthumbs/

There are others. This one is free does batch conversion and looks like it automatically links to the full size images.

 

For your next problem - where is this list suppose to be? Not in your code. Is it generated by php?

you could put overflow:hidden on the container element.

 

Although the right tool depends on the situation. if you have an online example of this, i am happy to take a look at it.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.