CSS height changes when I put an image

Red Squirrel · Mar 23, 2014

I am making a photo gallery section on a site I'm working on, and for whatever reason, the height I set for the cells seems to self adjust so that the height adds the height of the image to it. So say the image is 200px high and I have the cell set to 300px, then the cell becomes 500px. WTF? Why is it doing this? I want the cell it be 300px high total size, not in addition to what's in it. max-weight / max-height does not work either because then the cell becomes too small. Some of the cells are empty.

I've never experienced this before, why is it doing this?

Here is the CSS code:

Code:

table.photogal
{
	border: 2px solid #000000;
}

td.photogalentry
{
	border: 1px solid #000000;
	width: 300px;
	height: 250px;
	background:#F6F6CC;	
	padding: 5px;
	text-align:center;
}

td.photogalentry_empty
{
	border: 1px solid #000000;
	width: 300px;
	height: 250px;	
	background:#999999;
}

And here is the HTML code:

Code:

<center>
<table class="photogal">

<tr>

	<td class="photogalentry">
	<a class="picturelink" href="photos/philly_cheese_steak.jpg"><img src="photos/thumb_philly_cheese_steak.jpg""></a><br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=3">Edit</a>)</font></td>
	
	<td class="photogalentry">
	<a class="picturelink" href="photos/hot_dog___onion_rings.jpg"><img src="photos/thumb_hot_dog___onion_rings.jpg""></a><br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=4">Edit</a>)</font></td>
	

<td class="photogalentry_empty"> &nbsp; </td>


</tr>
</table></center><br><br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=upload">Upload pic</a>)</font>

Red Squirrel · Mar 23, 2014

If I remove the height for photogalentry_empty then it fixes it... Why? The height is set to the same thing, it should not matter. And it only does it if the cells next to it have an image.

suklee · Apr 2, 2014

I don't see any issues on here: http://jsfiddle.net/6qLJW/

Do you have a live URL?

Red Squirrel · Apr 2, 2014

No the site is on my local dev environment at this point as it's not ready to be published.

I managed to "fix" it by not specifying a height for the "empty" class, but that's more of a work around, but guess it will work since those boxes will never be there on their own so the height should get forced by the other boxes.

Still not sure why it was doing that though. I think I've seen this before, actually.

I'll post a link once I publish it, it will probably be within the next few weeks.

Red Squirrel · Apr 2, 2014

Damnit, it also does it if one of the pictures is not the same height as the others. WTF. Is there not a way to set the height so that it only goes bigger if something forces it to? It seems to randomly not include the size of the actual content.

Been a while since I coded a site, but I really don't remember it being this finicky.

Here's a screenshot:

And here's that page's html:

Code:

	<html><head>
	<title>Tiffany's "Home of the Walrus" Photos</title>

	<link rel="stylesheet" type="text/css" href="main.css" />
	</head><body>
	<center>
	<div class="main">
	
	<table style="width:100%">
	<tr><td class="toptitle"> &nbsp; </td></tr>
	<tr><td class="toplinks">
	<b><font class="navlinksmain">[<a class="navlinksmain" href="index.php?module=home">Home</a>]
	[<a class="navlinksmain" href="index.php?module=menu">Menu</a>]
	[<a class="navlinksmain" href="index.php?module=menu&amp;cpage=2">Specials</a>]
	[<a class="navlinksmain" href="index.php?module=photos">Photos</a>]
	</font></b><br>
	
	<font class="navlinkssub"></font>
	</td></tr><table>
	  
  <table class="userbar"><tr>
  <td class="userbarleft">Logged in as: admin | <a class="userbar" href="index.php?module=login&amp;act=logout">logout</a> | <a class="userbar" href="index.php?module=login&amp;act=changepass">Change password</a></td>
  <td class="userbarright">&nbsp;</td> 
  </tr></table>
  
	<div class="content">
	<h1 class="maintitle">Photos</h1><br>
	<center>
<table class="photogal">

<tr>

	<td class="photogalentry">
	<a class="picturelink" href="photos/building2-0.jpg"><img src="photos/thumb_building2-0.jpg"></a><br>test<br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=9">Edit</a>)</font></td>
	
	<td class="photogalentry">
	<a class="picturelink" href="photos/building2.jpg"><img src="photos/thumb_building2.jpg"></a><br>delete<br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=8">Edit</a>)</font></td>
	
	<td class="photogalentry">
	<a class="picturelink" href="photos/wizard_wand_s_wings.jpg"><img src="photos/thumb_wizard_wand_s_wings.jpg"></a><br>Wings<br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=5">Edit</a>)</font></td>
	
</tr>

<tr>

	<td class="photogalentry">
	<a class="picturelink" href="photos/chicken_fingers___poutine.jpg"><img src="photos/thumb_chicken_fingers___poutine.jpg"></a><br>Chicken fingers and poutine<br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=7">Edit</a>)</font></td>
	
	<td class="photogalentry">
	<a class="picturelink" href="photos/philly_cheese_steak.jpg"><img src="photos/thumb_philly_cheese_steak.jpg"></a><br>burger<br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=3">Edit</a>)</font></td>
	
	<td class="photogalentry">
	<a class="picturelink" href="photos/hot_dog___onion_rings.jpg"><img src="photos/thumb_hot_dog___onion_rings.jpg"></a><br>Hot dog and onion rings<br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=4">Edit</a>)</font></td>
	
</tr>

<tr>

	<td class="photogalentry">
	<a class="picturelink" href="photos/quesadilla.jpg"><img src="photos/thumb_quesadilla.jpg"></a><br>Quesadillas<br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=edit&amp;phid=6">Edit</a>)</font></td>
	

<td class="photogalentry_empty"> &nbsp; </td>



<td class="photogalentry_empty"> &nbsp; </td>


</tr>
</table></center><br><br><font class="adminlink">(<a class="adminlink" href="index.php?module=admphotos&amp;act=upload">Upload pic</a>)</font>

	</div>
	
	<div class="debug"><font size="4">SQL Queries:</font><br><hr>
	<b>SQL Query: SELECT uname, upass, upasssalt, uemail, u_acc_ordertaker, u_acc_webmaster, u_acc_admin FROM users WHERE uid='1' LIMIT 1;</b><br>
	<b>SQL Query: SELECT phid, phdesc,phfilename FROM photos ORDER BY phorder ASC;</b><br><hr></div>
	
	</div>
	<font class="smalltext">Script execution time: 0.0014sec</font></center>
	</body></html>

Red Squirrel · Apr 2, 2014

This seems EXTREMELY sporadic, actually. As I add/edit pictures or change CSS properties, the results are random.

I also tried the site in IE when I was booted in Windows, and it's a huge disaster, but I wont even worry about that for now, one thing at a time.

Crusty · Apr 2, 2014

1) Quit using tables for layout. You will never get it to work right.
2) You need to specify a doctype
3) I would suggest using a frontend framework like Bootstrap or Zurb Foundation and use their grid system for layout

purbeast0 · Apr 2, 2014

yeah i was wondeirng why you were using a table too.

also, why are you trying to write your own gallery software? there are literally hundreds out there that already do what you are trying to do. no need to reinvent the wheel.

and i 2nd using bootstrap if you want to do it yourself. i'm using the grid system at work and it's a piece of cake to use.

here's a gallery thing using bootstrap - http://blueimp.github.io/Bootstrap-Image-Gallery/

Red Squirrel · Apr 2, 2014

I never understood the anti table crowd, trying to do stuff without tables is like pulling teeth, especially if it's dynamic content. Doing position absolute stuff works ok for simple sites or sites that don't have dynamic content or text (text fonts change from machine to machine so you can't depend on a paragraph taking up the same space from one machine to the other) but if you need things to flow well you pretty much need tables.

This is just a basic gallery, I don't want to use a full blown gallery software and have to try to make it look the same when I can just code it straight into the site, and no need to have a separate admin interface. The client will be able to go in and make changes so it has to be easy and not require a bunch of different logins.

There's probably legal issues charging someone for code I did not write as well, so I rather just code everything myself and not have to worry about it.

Oddly it seems ok now, but I did not change anything other than the actual entries.

Only change I made is set vertical-align to top. That should have no affect on the height though.

Also, what am I suppose to put for doctype? Will this work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

purbeast0 · Apr 3, 2014

heh if you think tables are easier you are just out of the loop then. there is a reason they aren't used anywhere anymore. tables are NOT easy to make "flow" and you are having an issue with it right now. you are just thinking old school instead of new school.

also, things on github are open source and you don't have to pay anyone. you could very easily install bootstrap and install that gallery software probably 15 minutes and you wouldn't be having this headache and it would look much nicer.

just this alone looks better than what you are doing, and note that isn't not using tables, and would take about 5 seconds to implement because they literally have the code you can copy/paste on the page.

http://getbootstrap.com/components/#thumbnails

bootstrap markup is so lightweight too which is very nice. very minimal html is needed to make it looking nice.

Red Squirrel · Apr 3, 2014

Ok, I just don't want to use 3rd party code period. I just need to figure out why my code is not working. When you have a pipe that leaks do you buy a whole new house? The code behind this is already mostly done, I just need to figure out why it's not behaving the way it's suppose to. Bootstrap does look neat, I may check it out later, but now I just want my stuff to work properly. It seems setting the vertical align to top fixed it though but I really don't know why that would even make a difference.

I'm also trying to figure out how they managed to not use tables and still make it dynamic, or is that all hard coded? Looks like it also uses javascript. I try to avoid that if I can since some people have it off or use noscript etc.

Eventually I want to learn the whole tableless thing but now I just want to get the product to work. Last time I tried to do dynamic content with no tables it was a disaster. IE also butchers divs and spans since it does not really understand most CSS. Then again IE butchers just about everything, I gave up on even bothering trying to make stuff work in it.

Tweak155 · Apr 3, 2014

I did something like this a LONG time ago, and I think my solution to the problem was to assign the width and height to the HTML tag and not use the CSS styling.

purbeast0 · Apr 3, 2014

you should post your exact code on jsfiddle. it's pretty hard to just guess what the problem is when we can't see the whole picture.

Red Squirrel · Apr 3, 2014

Tweak155 said:
I did something like this a LONG time ago, and I think my solution to the problem was to assign the width and height to the HTML tag and not use the CSS styling.

Yeah was afraid of that. Not a huge deal I guess since it's dynamicaly generated, but I should not have to do that. Though it might fix my IE issue too, IE totally butchers the entire layout and adds stuff that's not even suppose to be there.

I did not setup the database on the live site yet but I suppose I could set it up real quick and upload it.

purbeast0 · Apr 3, 2014

the db doesn't have to be live for us to see the problems, you can just put dummy data in there on the jsfiddle so that we can see the problem and try to trouble shoot it.

Red Squirrel · Apr 3, 2014

Well I meant the structure and all that (site wont load without DB, I had no reason to code it that way) I'll put it up later tonight, got other stuff to do now.

Red Squirrel · Apr 3, 2014

Adding <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd"> Seems to have fixed another issue I was having with IE, so maybe it will fix this too. I sat down with the customer today and we went over things and also added all the pictures and it never did it.

beginner99 · Apr 7, 2014

Red Squirrel said:
Ok, I just don't want to use 3rd party code period. I just need to figure out why my code is not working. When you have a pipe that leaks do you buy a whole new house? The code behind this is already mostly done, I just need to figure out why it's not behaving the way it's suppose to. Bootstrap does look neat, I may check it out later, but now I just want my stuff to work properly. It seems setting the vertical align to top fixed it though but I really don't know why that would even make a difference.

I'm also trying to figure out how they managed to not use tables and still make it dynamic, or is that all hard coded? Looks like it also uses javascript. I try to avoid that if I can since some people have it off or use noscript etc.

Eventually I want to learn the whole tableless thing but now I just want to get the product to work. Last time I tried to do dynamic content with no tables it was a disaster. IE also butchers divs and spans since it does not really understand most CSS. Then again IE butchers just about everything, I gave up on even bothering trying to make stuff work in it.

I don't want to offend you but you should seriously reconsider your attitude. Re-inventing the wheel is a waste of time. Using tables was thrown out the window a decade ago.

If your pipe leaks, do you try to fix it with "paper glue" or just use the completely new "ultra-durable super pipe" lying next to you on the floor and given to you for free by an experienced handyman?

These libraries have the issue solved including dealing with IE. JavaScript is basically required if you want a user friendly site.

Red Squirrel · Apr 7, 2014

So what's the point of programming if I'm just told to use something already done? What's the point of programming at all if anything custom is considered reinventing the wheel? I guess all the Linux devs should just give up on Linux too, and either Microsoft or Apple should also give up, they're just all reinventing the wheel arn't they.

This is just a simple site, with one common login. I'm not going to start trying to integrate these huge pieces of software just to solve a tiny little issue. It will take longer to try to integrate everything than to just code it in directly. Or I can do the mistake tons of people do and end up with a site that requires like 3 different logins because they're using 3rd party systems instead of something custom that's integrated.

purbeast0 · Apr 7, 2014

Red Squirrel said:
So what's the point of programming if I'm just told to use something already done? What's the point of programming at all if anything custom is considered reinventing the wheel? I guess all the Linux devs should just give up on Linux too, and either Microsoft or Apple should also give up, they're just all reinventing the wheel arn't they.

This is just a simple site, with one common login. I'm not going to start trying to integrate these huge pieces of software just to solve a tiny little issue. It will take longer to try to integrate everything than to just code it in directly. Or I can do the mistake tons of people do and end up with a site that requires like 3 different logins because they're using 3rd party systems instead of something custom that's integrated.

come on man, now you are just being stubborn. even you said it's an extremely simple site. there is a reason people use libraries when using java or c++ or any programming language. and it's because these libraries have perfected things are are so basic. just simple things like outputting to standard output, or using collections. they are already perfected so why would you re-write an ArrayList or Map class in Java, when you can import the package and use that? if you had to use an array list in a java application you are writing, would you write your own array class and use it? no, you'd import the standard ArrayList class.

what you are doing is very simple and it's been perfected already multiple times. you could have very easily already put up an instance of a site that looks good and is functional in a fraction of the time you have been trying to get your site up. and with javascript stuff it's very easy to customize it to your own personal needs since the source is all there for you to play with, and it's not packaged up in a jar like java stuff.

that said, if you want to do it to just learn then go for it. there is nothing wrong with that if you are just trying to learn so you know how things work and how to do it next time. but you seem to be extremely stubborn and for some reason simply will not just paste your code so those of us who know javascript/css/html can take a look at it and try to help you.

Markbnj · Apr 8, 2014

Red Squirrel said:
So what's the point of programming if I'm just told to use something already done? What's the point of programming at all if anything custom is considered reinventing the wheel? I guess all the Linux devs should just give up on Linux too, and either Microsoft or Apple should also give up, they're just all reinventing the wheel arn't they.

Eh, there's no reason not to do something that you find interesting, unless someone is paying you to get to an end goal. In that case it's definitely better not to reinvent the wheel, and it's not like there is nothing interesting left to focus on. Ironically libraries are valuable because the functionality they provide is of such low value, business-wise. In any domain there are usually much more valuable problems to address.

mrjminer · Apr 8, 2014

Re-inventing the wheel is good. No need to put up with the silly bugs of others and leave yourself in a less than stellar position when it comes time to answer the question of why something doesn't work and only being able to come up with "uh... the framework doesn't do it right, guess we're screwed!" For instance, I usually do about 50% pure JS, then 50% jQuery for because I'm too lazy to write a function that checks for ".addEvent" vs. ".attachEvent" amongst other things.

That being said, though, I agree that for a small problem like this, I don't see where you would need a framework unless you were preparing for mobile, or were not using tables. As others have mentioned, though, I think you'd be better off using DIV / SECTION / ARTICLE (the last two may not be applicable since it looks like you are using HTML 4 though) instead of tables.

If you're looking for stuff to try, though, you could try "margin:0" for your tables / cells / images inside, and maybe specify an inline width/height for the image. It looks like you've gotten most of the issues taken care of though. Probably something with stretching/alignment

beginner99 · Apr 9, 2014

Red Squirrel said:
So what's the point of programming if I'm just told to use something already done? What's the point of programming at all if anything custom is considered reinventing the wheel? I guess all the Linux devs should just give up on Linux too, and either Microsoft or Apple should also give up, they're just all reinventing the wheel arn't they.

The difference between Windows and Linux is pretty obvious, proprietary vs. Open-Source. Linux is about open-source and being libre (free as in freedom and free as in no cost). So just because of that it has a reason for existing. I've used open-source JavaScript libraries and even adjusted them for my use case. That would not be possible with closed-source so again, Linux has pretty good reason for existing.

I don't see an argument for creating yet another Photo Gallery if you have probably thousands to choose from. I bet you would be done with the work in maybe half an hour. How much have you wasted on your solution till now?

The point of programming is to create a solution for a very specific problem to which none already exist. That solution can be achieved by bolting together existing parts in the right way. I mean if you do home improvement you do go buy the wood at a shop and not go into the wood and cut a tree yourself, do you?

This is just a simple site, with one common login. I'm not going to start trying to integrate these huge pieces of software just to solve a tiny little issue. It will take longer to try to integrate everything than to just code it in directly. Or I can do the mistake tons of people do and end up with a site that requires like 3 different logins because they're using 3rd party systems instead of something custom that's integrated.

Photo Galleries do not need another login. I see your point but your exaggerating greatly. Keep in mind that an application is mostly judged by how it looks and how easy it is to use.

Plus if you are worried about bandwidth usage you can always use the versions from a CDN.

Red Squirrel · Apr 9, 2014

I was already done before I even posted this, the only thing I was trying to figure out is why something that should work was not working the way I told it to. The fact that it was a photo gallery is irrelevant to the question in the OP. The php code behind it was already done, this was just aesthetics. I would be dealing with the exact same thing with a 3rd party solution when working to modify it so it can fit into the same look as the site while making my own template for whatever solution I went for. There is nothing more unprofessional than a site that has 5 different layouts and 5 different logins because they used 3rd party scripts for each section of the site and did not bother to properly integrate them. To integrate all of this is often more work than just coding it in especially for something very basic like this case.

Something like a forum? Yeah I'd use a premade script and just template it to blend in, a page that simply shows a couple pictures and has the ability to add more? Really not worth trying to dick around with 3rd party stuff.

nickbits · Apr 9, 2014

i never use libraries outside of the system default ones. stay strong OP.

PS I also still use tables (but I have been trying to limit myself)

CSS height changes when I put an image

No Lifer

No Lifer

Diamond Member

No Lifer

No Lifer

No Lifer

Lifer

No Lifer

No Lifer

No Lifer

No Lifer

Lifer

No Lifer

No Lifer

No Lifer

No Lifer

No Lifer

Diamond Member

No Lifer

No Lifer

Elite Member <br>Moderator Emeritus

Platinum Member

Diamond Member

No Lifer

Diamond Member