Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Images busting out of their boxes.

    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

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    min-height:height_of_imagepx

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    Code:
    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.

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Well. Another way is to insert an empty div with clear:both.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

    Edit: type... too.. much... too... slow...

  • #6
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, the clrear:both; did the trick for me.

    Quote Originally Posted by rmedek
    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.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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:
    Code:
    <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:

    Code:
    <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,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •