SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box model IE 7 question

    I have some icons that I need to know how to position so hopefully they'll stay in about the same place in Firefox plus IE both pre- and post version 7. I'd love it if someone could help me position these.

    You can see them here -- they're the little add, edit, archive, delete icons beside the 3 headers:

    http://shrink-art.com/susan/school/s...ients.php#tab1

    Right now, they line up the way I want them in IE 6, but they're a bit high in Firefox.

    Here's the relevant HTML:
    HTML Code:
    <div class="toolBar">
    	<div class="float">
    		<img src="_images/trans.gif" width="24px" />
    	</div>
    	
    	<div class="float">
    		<img src="_images/clients.gif" border="0" alt="Clients" />
    		<div class="navcontainer">
    			<ul class="navlist">
    				<li id="active"><a href="#" id="current" title="Add Client"><img src="_images/addIcon.gif" border="0" align="absmiddle" alt="Add Client" /></a></li>
    				<li><a href="#" title="Edit Client"><img src="_images/editIcon.gif" border="0" align="absmiddle" alt="Edit Client" /></a></li>
    				<li><a href="#" title="Archive Client"><img src="_images/archiveIcon.gif" border="0" align="absmiddle" alt="Archive Client" /></a></li>
    				<li><a href="#" title="Delete Client"><img src="_images/deleteIcon.gif" border="0" align="absmiddle" alt="Delete Client" /></a></li>
    			</ul>
    		</div>		
    	</div> <!-- end Clients float -->
    	
    	<div class="float">
    		<img src="_images/trans.gif" width="24px" />
    	</div>
    	
    	<div class="float">
    		<img src="_images/sessions.gif" border="0" alt="Sessions" />
    		<div class="navcontainer">
    			<ul class="navlist">
    				<li id="active"><a href="#" id="current" title="Add Session"><img src="_images/addIcon.gif" border="0" align="absmiddle" alt="Add Session" /></a></li>
    				<li><a href="#" title="Edit Session"><img src="_images/editIcon.gif" border="0" align="absmiddle" alt="Edit Session" /></a></li>
    				<li><a href="#" title="Archive Session"><img src="_images/archiveIcon.gif" border="0" align="absmiddle" alt="Archive Session" /></a></li>
    				<li><a href="#" title="Delete Session"><img src="_images/deleteIcon.gif" border="0" align="absmiddle" alt="Delete Session" /></a></li>
    			</ul>
    		</div>		
    	</div>
    	
    	<div class="float">
    		<img src="_images/trans.gif" width="24px" />
    	</div>
    	
    	<div class="float">
    		<img src="_images/payments.gif" border="0" alt="Payments" />
    		<div class="navcontainer">
    			<ul class="navlist">
    				<li id="active"><a href="#" id="current" title="Add Payment"><img src="_images/addIcon.gif" border="0" align="absmiddle" alt="Add Payment" /></a></li>
    				<li><a href="#" title="Edit Payment"><img src="_images/editIcon.gif" border="0" align="absmiddle" alt="Edit Payment" /></a></li>
    				<li><a href="#" title="Archive Payment"><img src="_images/archiveIcon.gif" border="0" align="absmiddle" alt="Archive Payment" /></a></li>
    				<li><a href="#" title="Delete Payment"><img src="_images/deleteIcon.gif" border="0" align="absmiddle" alt="Delete Payment" /></a></li>
    			</ul>
    		</div>		
    	</div>
    And the relevant CSS:

    Code:
    /******** toolBar styles ******************/	
    	
    .toolBar {
    	position: relative;
    	padding: 0;
    	font-weight: bold;
    	margin: 0;
    	}
    	
    .float {
    	padding: 0;
      	float: left;
    	font-weight: normal;
      	}
      
    .float p {
       text-align: left;
       font-size: 9px;
       vertical-align: middle;
       font-weight: normal;
       line-height: 1.4em;
       margin: 0;
       padding: 0;
       }
       
    .floatFinal {
    	padding: 0;
      	float: right;
    	font-weight: normal;
        vertical-align: middle;
      	}
    	
    .floatRight {
    	float: right;
    	}
       
    .spacer {
      clear: both;
      margin: 0;
      padding: 0;
      height: .1%;
      }
    	
    .clear {
    	clear: both;
    	}	
    	
    /****  Small icon navs within toolBar  ****/
    
    .navcontainer {
    	margin: -45px 0 0 50px;
    	padding: 0;
    	}
    
    .navlist ul {
    	padding: 0;
    	margin: 0;
    	}
    
    .navlist li {
    	display: inline;
    	list-style-type: none;
    	}
    
    .navlist a {
    	padding: 1px 1px 3px 1px;
    	}
    
    .navlist a:link, .navlist a:visited {
    	}
    
    .navlist a:hover {
    	border: 1px solid #E3D9C2;
    	padding: 0px 0px 2px 0px;
    	}
    
    #active a:link, #active a:visited, #active a:hover {
    	}

  2. #2
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why can't we just have one browser, eh!!!

    I feel your pain...

    Here's some info that should help you with ie's obstinate box model:
    http://www.webcredible.co.uk/user-fr...explorer.shtml

    Hope that helps,

    Cheers
    procureNET.biz
    Global B2B Trade & eProcurement

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks -- that's a nice reference page. I don't see anything in it about IE7, though. I never could remember the box model hacks before and with what I read about what IE7 is and isn't supposed to do, I'm even more confused. I've looked at my code some more and the problem may also have something to do with using a ul and list items for my horizontal nav. I think that's the part that needs some tweaking. This is the specific code that's being interpreted differently:

    Code:
    .navcontainer {
    	margin: -45px 0 0 50px;
    	padding: 0;
    	}
    Evidently Firefox's top margin of -45px is greater than IE 6's. And I have no idea what IE7 will do with it. Any ideas on best practices here?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd start by removing every reference to margin: 0; and padding: 0; you have in your stylesheet (make a copy of the stylesheet, THEN do this), and replace them all with this at the top of your file (before ANY other CSS):
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    Also, IE 7 uses the same box model as real browsers do when in standards mode. If you're running into IE's "quirks mode" you're either using no DOCTYPE at all, an improper DOCTYPE (perhaps it wasn't written properly), or (if you're using XHTML) have ANYTHING (and I do mean anything at all) above the DOCTYPE.

    If you have no DOCTYPE, get one; if it's not written properly, fix it; if you have anything above the DOCTYPE (if using XHTML), remove it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Fort Worth, Texas
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Also, IE 7 uses the same box model as real browsers do when in standards mode. If you're running into IE's "quirks mode" you're either using no DOCTYPE at all, an improper DOCTYPE (perhaps it wasn't written properly), or (if you're using XHTML) have ANYTHING (and I do mean anything at all) above the DOCTYPE.

    If you have no DOCTYPE, get one; if it's not written properly, fix it; if you have anything above the DOCTYPE (if using XHTML), remove it.
    I want to reinforce what Dan stated - so many of people's IE related problems can be fixed by simply using a proper DOCTYPE.

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips. I think my doctype is OK and it's the very top line of the document:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    It's just the one Dreamweaver throws up but I've never had problems with it before.

    I want to make sure I understand your other suggestion before I try it. The

    Code:
    * {
        margin: 0;
        padding: 0;
    }
    What I THINK that does is that the * affects that root node that IE refers to that no other browser does, right? So that's effectively setting the margin and padding to 0 for all styles in IE. Then do the other browsers automatically set all margins and padding to 0? Is that why it works? I think that's it, but I also wondered if maybe the * thing is a kind of wildcard that affects every style for all browsers. My stylesheet is really long -- I just want to make sure I understand what I'm doing before I make the change.

  7. #7
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, for now, I've fixed this with the * html thing:

    Code:
    .navcontainer {
    	margin: -40px 0 0 50px;
    	padding: 0;
    	}
    	
    * html .navcontainer {
    	margin: -45px 0 0 50px;
    	padding: 0;
    	}
    I've just read in some places where that may (or may not) throw everything off in IE7. I think that's what I'm trying to find out. Anyone know for sure what's going on with IE7?

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    * { margin: 0; padding: 0; } isn't an IE-specific hack. It's a universal selector at work, stripping the margins and padding from virtually every element in a document. It's essentially a short-hand way to declare that elements will have no margins or padding unless YOU apply them, which gives you near total control over a page (not to mention getting all the browsers to act the same way when it comes to margins and padding; for example, some browers will apply a left margin to lists - to allow for the bullets - while others will apply left padding instead).

  9. #9
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation, Dan. That does sound like a better way of doing things.

  10. #10
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ran across this article that seems excellent if a bit old:

    24ways.org

    I'm not sure if this makes me feel better or worse. Maybe I know more than I thought I did, but from reading the comments, it sounds like there's really no definitive answer. At least this article had a lot of good information.

    If anyone has any newer articles or info on IE7 -- or wants to chime in with opinions, I'd love to hear them.

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Obsolete, out of date, and out of touch (this was written before IE 7 was even close to being released - a YEAR ago).

    Code as well as you can in FireFox, Opera and IE 7 simultaneously. If there are any problems, try adjusting your code so that it will work in IE 7 without breaking the other browsers. Also (and this will come as a shock) try to use the more basic CSS (by basic I mean the building blocks, rather than advanced options like clip and outline). I find that a combination of font sizes, line heights, margins, padding, and floats works best with my layouts.

    If you do this right, any problems remaining will usually have to do with IE 6, and can safely be tucked away inside a conditional comment that targets only older versions of IE.

  12. #12
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't even know there WERE advanced options like clip and outline! LOL

    Ok, so here's another question -- is it possible to D/L IE7 and not have it replace IE6? In the past, it wasn't -- or at least not that I could ever find. I'd love to be able to have several browser versions on one machine.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll have to find a standalone install for IE 7.

  14. #14
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what you mean by a standalone install -- you mean a different computer entirely? Also, I was reading some other posts and saw someone refer to this site:

    browsershots.org

    It certainly sounds like a cool idea. I tried it just now and it only gave me 1 screenshot before it timed out after 30 minutes so I reset it for 4 hours. Looks like it may be getting a lot of traffic.

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A standalone is a program that has been "modified" to "stand alone" while other versions of the program run alongside it.

    For browsers, browsers.evolt.org has a lot of standalones for IE going all the way back to IE 3. Current standalones are 3, 4, 5.01, 5.5 and 6 (EOLAS compliant).

  16. #16
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan. You've been very helpful.


Bookmarks

Posting Permissions

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