IE7 text and image issues

Discussion in 'Web Design and Development' started by TartanNeil, Mar 21, 2008.

  1. TartanNeil macrumors newbie

    Joined:
    Feb 5, 2008
    #1
    I've nearly finished my site and all was great until someone pointed out that a couple of pages don't load as I intended on IE7.

    My site is neilleslie.com and the pages that are problematic are Home (text problems) and Portfolio (image problems).

    Any help solving these issues most appreciated.

    p.s. here's my css code.




    /* CSS Document */
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    text-align: center;
    margin: 0px;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    background-color: white

    }
    text1{ color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20pt;
    line-height: 1em;
    }

    thumbtext{ color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 7pt;
    line-height: 1em;
    }
    hellotext{ color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20pt;
    line-height: 1.55em;
    }


    IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }







    #wrapper {
    width: 800px;
    padding: 10px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: 500px;
    text-align: left;
    border: 1px solid #000000;
    }
    #header1 {
    margin: 0px;
    padding: 0px;
    height: 50px;
    width: 800px;
    text-align: center;
    background-color: #ffffff;
    }
    #headerlinksleft {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerhome {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerport {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerstock {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerclients {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerprocess {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerbio {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerblog {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headercontact {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #headerlinksright {
    margin: 0px;
    padding: 0px;
    height: 15px;
    width: 80px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }
    #header11 {
    margin: 0px;
    padding: 0px;
    height: 10px;
    width: 800px;
    float: left;
    text-align: center;
    background-color: #ffffff;
    }

    #header {
    margin: 0px;
    padding: 0px;
    height: 70px;
    width: 800px;
    text-align: center;
    background-color: #ffffff;
    }

    #header a {
    padding: 0px;
    }
    #container {
    padding: 0px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: auto;
    }


    a:link {color:#000000; text-decoration:none }
    a:visited {color:#000000; text-decoration:none }
    a:hover {color:#999999; text-decoration:none }
    a:active {color:#000000; text-decoration:none }

    #spacer {
    margin: 0px;
    width: 800px;
    height: 425px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    background-color: #ffffff;
    }

    #hello {
    margin: 0px;
    width: 314px;
    height: 425px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    background-color: #ffffff;
    }
    #hellospacer {
    margin: 0px;
    width: 20px;
    height: 425px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    background-color: #ffffff;
    }
    #helloright {
    margin: 0px;
    width: 466px;
    height: 425px;
    text-align: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    background-color: #ffffff;
    }

    #top {
    margin: 0px;
    width: 800px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    background-color: #ffffff;
    }

    #left {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 30px;
    width: 70px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }

    #center {
    height: 30px;
    width: 280px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    line-height: 1.8em;
    background-color: #ffffff;
    }

    #mainarea {
    height: 425px;
    width: 800px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    line-height: 1.8em;
    background-color: #ffffff;
    }

    h1 {
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    }
    #right {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 30px;
    width: 450px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }

    #bottom {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 220px;
    width: 800px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }

    #spacer2 {
    margin: 0px;
    width: 800px;
    height: 43px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    float: left;
    background-color: #ffffff;
    }

    .thumbnail
    {
    float: left;
    width: auto;
    border: 0px solid #999;
    margin: 0 0px 0px 0;
    padding-right: 15px;
    padding-bottom: 12px
    }

    #portfolio {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    overflow: auto;
    width: 138px;
    height: 425px;

    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }
    #leftspacer {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 138px;
    height: 425px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }


    #loadarea {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 425px;
    width: 524px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }
    .show { display: block; }
    .hide { display: none; }


    .clearboth { clear: both; }


    #thumbBox{ /*Outermost DIV for thumbnail viewer*/
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    padding: 10px;
    padding-bottom: 0;
    background: #313131;
    visibility: hidden;
    z-index: 10;
    cursor: hand;
    cursor: pointer;
    }

    #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
    font: 12px Verdana;
    letter-spacing: 5px;
    line-height: 1.1em;
    color: white;
    padding: 5px 0;
    text-align: left;
    }


    #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
    background-color: white;
    }

    #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
    position: absolute;
    visibility: hidden;
    border: 1px solid black;
    background-color: #EFEFEF;
    padding: 5px;
    z-index: 5;
    }


    #biobox {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    text-align: left;
    overflow: auto;
    width: 800px;
    height: 425px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }

    #leftspace {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 0px;
    height: 425px;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #ffffff;
    }
    .clearer {
    font-size: 0px;
    line-height: 0px;
    display: block;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 0px;
    width: auto;
    }
    #footer {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 15px;
    padding-left: 0px;
    background-color: #ffffff;
    }
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Just a quick comment; Use the code tag (the # button in the tool bar) when posting this type of code so it doesn't take up so much space.
     
  3. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
  4. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
    #4
    Some more information:

    I've just noticed that in IE every time my css specifies a new font size IE ignores the instruction to do so.

    So my text size problem isn't just limited to my Home page, it occurs on every page of my site.

    Am I missing something basic here?

    Thanks
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    IE will treat px values "statically" meaning that when you tell IE (with the browser controls) to change text size it won't because it's respecting those declarations. IE7 does page zoom though from what I've seen, vut still has the text size controls, which I believe work the same. That may be part of it. You also have some font sizes using pt values, which should only be used for print style sheets because they have no meaning on computer screens.

    Font sizes are declared at a number of spots in the CSS so it's hard to determine if something is causing a cascade effect, and I don't have IE around (not that I'm complaining) to see the problem.
     
  6. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
    #6
    Thanks for pointing out the px/pt issue. I've sorted that, unfortuanately it's not the source of my text size problem.

    I've attached some screen shots that illustrate the problem.

    Here's how my home page should look
    [​IMG]

    And here's how it looks in IE
    [​IMG]

    Here's how my portfolio page should look
    [​IMG]

    And here's how it looks in IE
    [​IMG]

    As always, any help most appreciated.
     
  7. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
    #7
    Ok, there seems to be some problem with the screen grabs. Here we go with a second attempt.



    Here's how my home page should look
    [​IMG]


    And here's how it looks in IE
    [​IMG]


    Here's how my portfolio page should look
    [​IMG]


    And here's how it looks in IE
    [​IMG]


    As always, any help most appreciated.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    On the home page that text area is inside a tag called "hellotext" which is not a real HTML tag of course. This is possibly causing IE to twitch and freak out.

    On your Portfolio page you have "<div id="container"" which is missing the > tag at the end and likely causing the issue on that page.

    As a tip for finding these little issues use a HTML validator, http://validator.w3.org/ Though your pages have tons of validation errors. You should start working on those.
     
  9. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
    #9
    Thanks so much for pointing out the missing > tag. I've now got my portfolio page working as intended.

    I ran my html through the validator suggested. You were not kidding about there being tons of errors. Unfortunately I didn't really understand what the validator was telling me other than that there are errors. Once again, my lack of skill becomes all too obvious.

    I didn't realise that <hellotext> wasn't valid. I've used other tags, i.e. <text1>, on another page of my site to indicate text I wanted in a different size and, of course, that's not appearing correctly in IE either. Can you tell me what the tag should be changed to to make it valid? Or is it not that simple?

    Once again, thanks.
     
  10. TodVader macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #10
    You should define paragraphs with a class such as:
    Code:
    <p class="hellotext">The content of hello text</p>
    Then, in your stylesheet, you can add styles to your "hellotext" class.

    You can't invent tags like you did.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    Yes, like TodVader said, you can use a class, or even a id attribute. Use the id attribute if that will be the only one on the page, and class if it's something that'll exist in multiple places. In your CSS you'll refer to it like so,

    Code:
    /* for an id */
    #hellotext {
     font-size: 3em;
    }
    /* for a class */
    .hellotext {
     font-size: 3em;
    }
     
  12. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
    #12
    Thanks for all the help, not to mention patience, folks. I believe I've now sorted out my issues. Well, the main ones regarding IE7. And learned something about css and html on the way, so that can't be bad.

    Cheers

    Neil
     

Share This Page