...

View Full Version : Images busting out of their boxes.



Sjixxxy
02-10-2005, 09:40 PM
I have a feeling this is a really simple soultion, but I'll be damned if I can find a weblink for it.

I'm working on converting one of my older site layouts from a table layout, to a CSS layout. Everything was going absolutly smooth & perfect as I was checking everything in Opera. Then I checked it in firefox & IE, and the layout blew apart. I eventually got the layout to work in all three browsers, but now the box that I use to display each bit of content, won't resize to fit around images, only the text. This has been driving me nuts, the closest I can seem to get is to use overflow:hidden; It actually hides the overflow in Opera, resizes the box to display the whole thing in firefox, and doesn't do anything in IE.

Any ideas?

The issue in question can be seen at http://www.six-something.org/csslayout2.php and the CSS file is at http://www.six-something.org/layoutstyle.css

hemebond
02-10-2005, 11:03 PM
min-height:height_of_imagepx

Sjixxxy
02-10-2005, 11:10 PM
min-height:height_of_imagepx

Not too sure on that. I use images of different sizes throughout the site. If I set it to accomodate the 75px tall images, the 250 tall ones would still break out. If it set it to 250, the boxes with the 75px images would look stupid with all that extra space along the bottom.

hemebond
02-10-2005, 11:21 PM
Well. Another way is to insert an empty div with clear:both.

rmedek
02-10-2005, 11:22 PM
You're floating the images to the left, but not clearing them. The images aren't breaking out of the boxes so much as the other boxes don't recognize the image-- when you float something you take it out of the element flow.

Insert a block level clearing element before the end of each container div and it should work.

<div style="clear: both;"><!-- clearing div --></div>

You could do it better, but there is already tons of non-semantic markup in your code so I don't think this will hurt for now, until it gets cleaned up.

type... too.. much... too... slow...

Sjixxxy
02-10-2005, 11:45 PM
Thanks, the clrear:both; did the trick for me.


You could do it better, but there is already tons of non-semantic markup in your code so I don't think this will hurt for now, until it gets cleaned up.

I've used basic CSS to do my fonts & pagecolors for a long time now, but this is the first time I've finally got around to learning it with regards to layout, and using xhtml standards. This conversion is more just for learning then actually getting it done. Would you mind explaining that above line a little better, or pointing me to an appropriate link? I'm shooting to try and learn things as correct as I can.

rmedek
02-11-2005, 12:08 AM
sure...

The movement to standards is based on the separation of style from the content. It's also based on marking up the structure of the page as semantically as possible. For example, this:


<div class="contentbox">
<div class="clear">
<a href="http://www.six-something.org/2005/01/24/the-majik-man/"><img src="http://www.six-something.org/images/majik_thumb.png" border="0" align="left" /></a>
</div>
<center>
<a href="http://www.six-something.org/2005/01/24/the-majik-man/">
<b>The Majik Man</b>
</a>
<br />
The Minnesota Vikings vs. Don Majkowski in a Tecmo Super Bowl showdown.
</center>
<br />
</div>

sort of translates to a browser as, "a division of the page, surrounding another division of the page with a link and an image (have no idea what it is), a tag that's not supported but I'm pretty sure means I have to center, another link, text I will make bold, with a line break, with text."

Okay, that's a rough overexaggerated example, but you get my point. You could mark up the section like so:



<div class="contentbox">
<a href="http://www.six-something.org/2005/01/24/the-majik-man/"><img src="http://www.six-something.org/images/majik_thumb.png" alt="Don Majkowski" /></a>
<h2><a href="http://www.six-something.org/2005/01/24/the-majik-man/">The Majik Man</a></h2>
<p>The Minnesota Vikings vs. Don Majkowski in a Tecmo Super Bowl showdown.</p>
</div>


This tells the browser something more along the lines of, "okay, I have a division of the page with an image link (if it doesn't display I know it's Don Majkowski), a header, and a paragraph of information."

Again, rough generalization, but you get my point. If you need additional points from which to style, you could always add classes or ids to your structural elements.

The web is overflowing (some would say oversaturated) with web logs and articles on the "semantic web" and standards. Take a look on Google and I'm sure you'll find tons more info...

Hope this helps,



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum