WEB IE7 ate my website (or: why is padding not working?)

Discussion in 'OT Technology' started by Ubisquo, May 2, 2008.

  1. Ubisquo

    Ubisquo New Member

    Joined:
    May 2, 2002
    Messages:
    644
    Likes Received:
    0
    Location:
    UK
    Hi there. I'm trying to put together a website for an art space my uni are making, but am having some problems with IE when it comes to padding. The two main culprits are these pages, but I imagine the issue extends to anything using my .adInfo class (Mac user, no IE7 to test with).

    Here's what the pages *should* look like:
    http://ubisquo.com/feck.jpg
    http://www.ubisquo.com/gallery.jpg

    And here the pages are.
    http://www.ubisquo.com/functions.html
    http://www.ubisquo.com/gallery.html

    Relevant code for functions:
    Applied to images in the main content div
    Code:
    img.main_content {
    	float: left;
    	margin: 4px;
    	padding: 5px;
    	text-align: center;
    	background-color: #E9E9E9;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px solid #ccc;
    	overflow: hidden;
    }
    
    .adInfo {
    float: right;
    display: block;
    margin: 1em;
    background-color: #dbeacb;
    }
    
    HTML for Functions:
    Code:
    <div id="main_content">
    	<h1 class="content">Functions and the Space</h1>
    	<p>Rar, info about the space as a functional area will go here.</p>
    	<div class="adInfo">
    	<p>
    		<a href="images/functions/inside1.jpg" rel="lightbox[Functions]" title="The Space is suitable for both large and small meetings, offering a fantastic venue for any occasion.">
    			<img class="main_content" src="images/functions/inside1_tn.jpg" alt="Images from inside the Space" />
    		</a>
    			
    	</p>
    </div>
    </div>
    
    

    The main issue with the gallery page is that in Firefox/Safari/everything EVER the text link is displayed underneath the image it represents. In IE, apparently the text is jumbled everywhere and in all of the sections. Here's the code!
    CSS:
    Code:
    #gallerys_container { 
    	background-color: #f4f4f4; 
    	height: 100px;
    }
    #gallerys {
    	position: relative;
    }
     
    #gallerys .gallery {
    	float: left;
    	display: block;
    	width: 117px;
    	height: 100px;
    }
     
     
    /* Naming scheme is year, then the order of appearance at Space */
    #gallery_0801 a {text-decoration: none;}
    #gallery_0802 a {text-decoration: none;}
    #gallery_0803 a {text-decoration: none;}
    #gallery_0804 a {text-decoration: none;}
    #gallery_0805 a {text-decoration: none;}
    HTML:
    Code:
    <div id="main_content">
    			<h1 class="content">The Gallery</h1>
    			<p>Select an event to see the photos.</p>
    			<h2 class="content">2008</h2>
    <div id="gallerys_container">
    	<ul id="gallerys">
    		
    		<li id="gallery_0801" class="gallery"><a href="gallery/2008/regard-ritual/index.html"><img src="gallery/2008/regard-ritual/rar_small.jpg" alt="regard and ritual" /><span>Regard &amp; Ritual</span></a></li>
    		
    		<li id="gallery_0802" class="gallery"><a href="gallery/2008/via/index.html"><img src="gallery/2008/via/via_small.jpg" alt="Via" /><span>Via</span></a></li>
    		
    
    </div>
    <br />
    
    </div>
    

    If any of you pro's know what the dealio is, I'd love to know. I'm starting to dig it when it displays properly, but I'm flummoxed by the odd positioning in IE. :(
     
  2. Limp_Brisket

    Limp_Brisket New Member

    Joined:
    Jan 2, 2006
    Messages:
    48,422
    Likes Received:
    0
    Location:
    Utah
    change those span's to div's.

    span is inline while div's are block level. and since you have a specified width for the list elements it's going to use as much as you specified before wrapping, which means some of the text is ending up by the image and some below. but a div will put the text in its own block.
     
  3. Ubisquo

    Ubisquo New Member

    Joined:
    May 2, 2002
    Messages:
    644
    Likes Received:
    0
    Location:
    UK
    Excellent man, thanks. :) Would you recommend putting in any settings into the div, or is the important thing just having the text in one? With no settings it just seems to have inherited the look it had in Safari beforehand.

    Also: I think the functions page thing is just down to how many images there are there and the resolution. On mine it's a big block, but on bigger screens it fits all the images on like in the galleries. I don't want to force a line-break, so I guess it'll just stay like that. :o
     

Share This Page