SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Oregon
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE hack - Height difference between IE and Firefox

    Hi,

    I have absolutely no idea how to hack IE. My site looks like it should in Firefox, but my navigation bar in IE is short by 7px. How do I fix it.

    Warren and Watters - Hartford Lane Studio
    The part that needs to be fixed is the div id "cdpic" below at end.

    I have the site set for Firefox now.

    Thanks for any help.

    Jim

    Code:
    #wrap {
      margin: 0 auto;
      width: 750px;
    }
    body {
      background-color: #000000;
      color: #ffffff;
      margin-top: 20px;
    }
    h1,ul,li {
      margin: 0px;
      padding: 0px;
    }
    h1 {
      font-family: "times new roman", times, serif;
      font-size: 4.00em;
      padding-left: 65px;
    }
    #header {
      background-color: #000000;
      border: 4px outset;
      border-color: #43616b;
      color: #ffffff;                             
      padding: 7px 0 0 0;
      height: 85px;
      width: 682px;
    }
    #nav {
      background: url(images/wandw.jpg) no-repeat;
      height: 359px;
      width: 690px;
    }
    ul#navleft {
      list-style: none;
      width: 143px;
    }
      #navleft li {
      border: 4px outset #43616b;
    }
    ul#navleft li a:link, ul#navleft li a:visited {
      background-color: #000000;
      color: #ffffff;
      display: block;
      font: 9pt Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
      text-decoration: none;
      width: 100%;
    }
    ul#navleft li a:hover {
      background-color: #5c6f90;
      color: #000000;
    }
    #cdpict {
      color: #ffffff;
      height: 243px;
      margin: 0px;
      padding: 0px;
      width: 135px;
      text-align: center;
    }
    #cdpict {
      background-color: #000000;
      border: 4px outset #43616b;
    }
    #update {
      background-color: #000000;
      color: #ffffff;
      font-family: "times new roman", times, serif;
      font-size: 10px;
      text-align: center;
    }
    Last edited by Paul O'B; Jun 7, 2011 at 04:37. Reason: code tags added

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Check your HTML:
    Code:
            <div id="cdpict">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/frontcov.jpg" style="margin: 10px 17px 0 0; width: 95px; height: 95px;" alt="Lisa's soon coming ten song CD">
                <span style="text-align: center;">Coming Soon!<br />
                I'm Coming Home<br />
                Music CD</span
            </div>
    (I don't think this is actually affecting you visually tho)

    Also, in IE7 I'm seeing some whitespace errors in the menu (I believe because you've set the anchors to display: block but didn't explicitly set a state for the li's, which you shouldn't *have* to...).
    For me, in IE7, the left box is *taller* than in Firefox, not shorter. Are those two boxes (left side and image) supposed to be the same height? They aren't in any browser I check.

    Anyway I get around whitespace bugs in IE6 and 7 by stating the li's as display: block or something (again, they're display: block by default but IE seems to confuse display: block and display: list-item, which you've removed because you don't want bullets) and I *float* the anchors (but still state them as 100% wide... though then don't set any padding or borders on them if you use that. Otherwise, set a px width).

    Hm, I might be confusing bugs here... floating the anchors will remove whitespace bugs, but I might be thinking of Staircase bug for the display setting of the li's. Start with just floating the anchors and see if you need to set display on the li's... if not, leave it off, less code.

    Code:
    #navleft li {
      display: block;/*you can check if you need this for IE; if not, remove it, it's *supposed* to be default*/
      border: 4px outset #43616b;
    }
    #navleft a {
    background-color: #000;
    color: #fff;
    float: left;
    font: 9pt Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    text-decoration: none;
    width: 100%;
    }
    #navleft a:focus, #navleft a:hover, #navleft a:active  {
    background-color: #5c6f90;
    color: #000;
    }
    Don't leave keyboarders in the dark; use :focus styles. :active is mostly just for IE6 since it thinks :active == :focus. IE7 is a lost cause unless you Javascript it.
    If you're not supporting IE6, leave the :active off.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I prefer to float the list elements and anchors as that always cures the white space bugs in IE but means that you have to supply widths which is a drawback.

    I'd do something like this:

    Code:
    ul#navleft {
        list-style: none;
        width: 143px;              /*175*/
    }
    #navleft li {
        border: 4px outset #43616b;
        float:left;
        width:135px;
        clear:left;
    }
    ul#navleft a {
        background-color: #000;
        color: #fff;
        font: 9pt Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;         /*10pt/1.5*/
        text-decoration: none;
        width: 100%;
        text-indent:15px;
        text-transform:uppercase;
        float:left;
    }
    #navleft a:focus, #navleft a:hover, #navleft a:active {
        background-color: #5c6f90;
        color: #000;
    }
    Don't use non breaking spaces to make space They are meant to hold elements together without breaking (i.e. a non-breaking space). You can use text-indent to move the text and then text-transform to make it capital.

    Code:
    <ul id="navleft">
                <li><a href="htmfiles/about.htm">About W&amp;W</a></li>
                <li><a href="htmfiles/disc.htm">Discography</a></li>
                <li><a href="htmfiles/photos.htm">Photos</a></li>
                <li><a href="htmfiles/contact.htm">Contacts</a></li>
                <li><a href="htmfiles/credits.htm">Credits</a></li>
            </ul>

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    As the others have implied, the HTML really is a lot of your problem here, though the CSS isn't a real winner either.

    Starting in the HTML, I would suggest the following:

    1) use a MODERN doctype instead of being in "transition" from 1997 to 1998. Tranny doctypes are for supporting old/outdated/half-assed coding techniques, not for building new pages.

    2) there's an attribute for LINK called "media", you should use one to target just "screen" so you aren't trying to send screen styling to all devices.

    3) Ease up on the div, and try to be a bit more descriptive with them. "wrap" is pretty vague, usually there are tons of wrappers on a page... I think div#header, div#nav AND div#cdPict (though not sure on the last) are unnecessary elements.

    4) don't use non-breaking spaces to do padding's job!

    5) BMP's have no business being used on a website -- EVER.

    6) names like "navLeft" are also presentational -- if you are saying how things look instead of what things are, you're probably writing your HTML wrong!

    7) .htm is like going for a trip in the wayback machine to 1995... putting all your HTML files in a subdirectory instead of using relational links down-tree? Even worse.

    8) Not sure if the page you linked to is a placeholder or WIP, but given all the subpages have different layouts is not a good thing. Pick a layout, stick with it.

    9) if you are resorting to the style attribute, 99% of the time you're doing something wrong as well.

    10) as cute as the picture is, if that's going to be the entire content then it's just a glorified splash page, a really bad concept from a usability standpoint that also went the way of the dodo a decade ago. (except for the nimrods still building sites in nothing but flash)

    11) your use of dynamic fonts makes the H1 blow down over the content below it on large font/120dpi machines.

    12) you aren't doing anything fancy enough that it should even NEED IE specific hacks.

    13) I advise AGAINST serif fonts on websites since with the low dot pitch of most screen devices they are very difficult to read.

    14) named border styles other than "solid" are unpredictable cross browser since the specification does not explicitly state how they should be used, as such I would NOT declare an "outset" border on a website.

    So the first order of business is cleaning up the HTML.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Warren and Watters - Hartford Lane Studio
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    	<h1>Warren and Watters</h1>
    	
    	<div id="sideBar">
    	
    		<ul id="mainMenu">
    			<li><a href="about.htm">ABOUT W&W</a></li>
    			<li><a href="disc.htm">DISCOGRAPHY</a></li>
    			<li><a href="photos.htm">PHOTOS</a></li>
    			<li><a href="contact.htm">CONTACTS</a></li>
    			<li><a href="credits.htm">CREDITS</a></li>
    		</ul>
    		
    		<img
    			src="http://www.sitepoint.com/forums/images/frontcov.jpg"
    			width="95" height="95"
    			alt="Lisa's soon coming ten song CD"
    			class="plate"
    		/><br />
    		Coming Soon!<br />
    		I'm Coming Home<br />
    		Music CD
    		
    	<!-- #sideBar --></div>
    	 
    	<div id="content">
    		I assume you're going to have content here?
    	</div>
    	
    	<div id="footer">
    		&copy; Warren and Watters / Hartford Lane Studio 2011
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Gimme a couple minutes and I'll belt out the CSS to make that work.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Made a few changes to the HTML for the layout, but nothing major. I REALLY would swing a giant axe at that background image in the 'content' area and get some content in there instead... maybe work a picture of them into the background on the H1 or something.

    But this is what I came up with:

    Warren and Watters - Hartford Lane Studio

    As with all my examples the directory:
    Index of /for_others/warrenJ

    is open for easy access to the bits and pieces. I got aggressive with the image optimization to get it under the '70k' ideal target limit I set for a web page.

    All new markup, all new CSS. Tested working in every browser since IE 5, with not a hack to be found.

  6. #6
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Oregon
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you SO much everybody for the time spent on my behalf. I appreciate it. My daughter will be pleased.

    Again, thanks.


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
  •