SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Mac IE 5 <h> tags expanding

    Hi all

    The following page looks fine in every browser we've checked apart from IE 5.2 on a Mac (not an uncommon situation it seems...):
    http://www.educulture.org/new/teachers/customized.htm

    The problem is that the content div doesn't seem to be constraining itself to a width of 440px. All the headings, and body text are expanding across the right hand column of the page.

    Any tweaks that'll fix it? Unfortunately my clients husband uses a Mac with IE 5.2 so I need to get it fixed....

    And, this one is a long shot, if anyone has AOL 8 on a PC could they have a look at the page to see if the text shows as being really tiny?

    Many thanks
    Matt

  2. #2
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have the CSS you can post?

    John

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the relevant css:

    html, body {height:100%}

    body {
    margin: 0;
    padding: 0;
    font: .7em Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    color: #000000;
    background-color: #e0e0e0;
    }

    html>body #container {height:auto;}
    h1{
    font-size: 1.8em;
    margin-right: 35px;
    color: #FFFFFF;
    margin:0 0 10px 0;
    background-color:#87CEEB;
    padding:3px;
    }
    .h1_firstletter{
    color: #000099;
    font-size:1.5em;
    }
    h2{
    font-size: 1.4em;
    color:#4682B4;
    margin:0 0 10px 0;
    padding-bottom:2px;
    border-bottom: 1px solid #4682B4;
    }
    h3{
    font-size: 1.2em;
    font-weight:bolder;
    color:#6495ED;
    border-bottom: 1px dashed #6495ED;
    padding-bottom:2px;
    margin:18px 0 5px 0;
    }

    img{
    border: 0px;
    }

    a {
    color: #0066FF;
    text-decoration:underline;
    }
    a:hover {
    color: #000099;
    text-decoration:underline;
    }
    li {
    padding-top:5px;

    }

    #container {
    margin: 0 auto;
    width: 740px;
    height:99.8%;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    min-height:100%;
    text-align: left;
    position:relative;
    background-image: url(images/body_bg.jpg);
    }
    html>#container {height:auto}

    #container_home {
    margin: 0 auto;
    width: 740px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    text-align: left;
    position:relative;
    background-color:#F5f5f5;
    }


    #top_header {
    height:30px;
    width:720px;
    font-size: 1.2em;
    font-weight:bold;
    color:#3399CC;
    position:relative;
    background-image:url(images/topheader_bg.jpg);
    line-height:30px;
    padding-left:20px;
    z-index:2;
    }
    #header {
    height: 108px;
    width:740px;
    background-image: url(images/header_bg.jpg);
    margin: 0px;
    position:relative;
    z-index:2;
    }

    #top_header_home {
    height:30px;
    width:720px;
    font-size: 1.2em;
    font-weight:bold;
    color:#3399CC;
    position:relative;
    background-image:url(images/topheader_bg.jpg);
    line-height:30px;
    padding-left:20px;
    z-index:2;

    vertical-align:middle;
    }
    #top_header_big_text{
    float:left;
    }
    #header_home {
    height: 154px;
    width:740px;
    background-image: url(images/home/header_bg.jpg);
    margin: 0px;
    position:relative;
    z-index:2;
    }
    #home_top_menu{
    float:right;
    text-align:right;
    font-size:.8em;
    color: black;
    font-weight: lighter;
    padding-top:5px;
    padding-right:25px;
    }

    #small_logo{
    position:relative;
    left:30px;
    top:15px;
    float:left;
    }

    #top_menu {
    float:right;
    border-top: 1px solid white;
    color: #FFFFFF;
    width:153px;
    margin-right:20px;
    margin-top:12px;

    }
    #top_menu p{
    border-bottom: 1px solid white;
    color: #FFFFFF;
    margin: 0px 0 0px 0;
    padding-bottom: 2px;
    padding-left:4px;
    }

    #top_menu a:link{
    color: #FFFFFF;
    text-decoration:none;
    }
    #top_menu a:active{
    color: #FFFFFF;
    text-decoration:none;
    }
    #top_menu a:visited{
    color: #FFFFFF;
    text-decoration:none;
    }
    #top_menu a:hover{
    color: #00FFFF;
    text-decoration:none;
    }

    #breadcrumb {
    width:705px;
    height: 46px;
    background-image: url(images/breadcrumb_bg.jpg);
    position:relative;
    z-index:2;
    line-height:30px;
    padding-left: 35px;
    }
    #breadcrumb_home {
    width:740px;
    height: 32px;
    background-image: url(images/home/light_blue_bar.gif);
    position:relative;
    z-index:2;
    }

    #sidebar {
    float: right;
    width: 220px;
    padding:20px 0;
    }

    #sidebar ul{
    list-style: url(images/side_menu_arrow.gif) none inside;
    margin:0 38px 0 25px;
    vertical-align:middle;
    line-height:1.4em;
    border-top:1px solid #000066;
    padding-left:0px;

    }
    #sidebar li{
    border-bottom:1px solid #000066;
    padding-top:3px;
    padding-bottom:3px;
    }
    #sidebar a:link{
    color:#000066;
    text-decoration:none;

    }
    #sidebar a:active{
    color:#000066;
    text-decoration:none;
    }
    #sidebar a:visited{
    color: #000066;
    text-decoration:none;
    }
    #sidebar a:hover{
    color: #0033FF;
    text-decoration:none;
    }
    .sidebar_title{
    margin: 46px 0 15px 25px;
    color: #0099CC;
    font-weight: bold;
    font-size:1.3em;
    }

    #sidebar img {
    border: 1px solid #4682B4;
    margin-top: 10px;
    margin-left: 25px;
    }
    .sidebar_promobox {
    border: 1px solid #4682B4;
    margin-top: 10px;
    margin-left: 25px;
    width: 137px;
    padding:5px 10px 5px 10px;
    text-align:center;
    color:#000066;
    background-color:#00CCFF;
    }

    #content {
    width: 440px;
    padding:25px 0 0 30px;
    }

    #content p{
    line-height:1.4em;
    }
    .yellow_buttons{
    padding:3px 0px 0px 8px;
    vertical-align: text-bottom;
    }

    #content p, #sidebar p, #mainnav p{margin:0 5px 5px 0px}

    #footer {
    width:725px;
    height: 35px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    background-color: #006699;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin:auto;
    color:#FFFFFF;
    }

    #footer_kmd {
    font-size:.9em;
    position:relative;
    float: right;
    width:220px;
    }
    #footer_tag{
    font-size:1.5em;
    font-weight:bold;
    float: left;
    text-align:left;
    padding-left:10px;
    }

    #news_title{
    float:right;
    }

    .breadcrumb_home {
    line-height:25px;
    padding-left: 0px;
    }

    #clearfooter {height:50px;
    width:100%;
    clear:both;
    }

    .break{
    height:10px;
    width:100%;
    margin:0px;
    padding:0px;
    }
    .itinerary_para{
    border: 1px solid black;
    padding:8px;
    background-color: #6666CC;
    color: #FFFFFF;
    }
    .trip_heading{
    font-size:1.5em;
    color:#40E0D0;
    font-weight:bold;
    }
    .trip_heading_mint{
    font-size:1.5em;
    color:#B0E0E6;
    font-weight:bold;
    }
    .img_right{
    float:right;
    border: 1px solid black;
    margin-left:10px;
    }

    .pics{
    border:1px solid #000000;
    margin:3px;
    }


    --------

    The full file is here:
    http://www.educulture.org/new/2column.css

    Thanks in advance
    Matt

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    My mac isn't connect to the internet so I just copied the code over and it seems that ie5 mac doesn't like the width of your content for some reason.

    However if you float the left content then everything sorts itself out.

    You could just give mac the float if you don't want to change all browsers to float.
    Code:
    * > html #content {float:left}
    I couldn't tell if your images were ok as I didn't have time to copy them across. Anyway the above should sort out the headings.

    Note that ie5 mac doesn't usually like html,body{height:100%} and its best to hid the style although I didn't notice anything untoward in your layout but thats probably beacues your page was longer than the 100%.
    Code:
    /* commented backslash mac hack \*/ 
    html, body{height:100%;} 
    /* end mac hack */
    Hope that helps anyway.

    Paul


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
  •