SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Explorer issue

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Explorer issue

    Hi...I just noticed something on the new site I am working on.

    The problem is...the <div class="title"><h1>Welcome to the new THON website!</h1></div> on every other browser the title goes over the white text box on either side just a little. in IE on the PC, the div title layer lines up exactly with the white text box.

    It is correct in IE on the Mac, it is correct on safari and firefox on the Mac. It is correct in Firefox on the PC, but incorrect in IE on the pc (of course). It's not that big a deal, but it is just wrong...

    Here is some sample html code:

    <div class="entryLeft">
    <div class="title"><h1>THON STORE</h1></div>
    <p><a class="big" href="#">VISIT THE THON STORE</a>
    </p></div>
    </div>
    <div id="right">
    <div class="entryRight">
    <div class="title"><h1>Welcome to the new THON website!</h1></div>

    Here is relevant css:
    #left{
    float: left;
    width: 33%;
    margin:0;
    padding:0;
    }



    .entryLeft{
    width: 225px;
    border: 1px solid #002773;
    background-color: #FFF;
    padding: 0;
    margin:15px;
    }

    #right{
    float:right;
    width: 66%;
    margin:0;
    padding:0;

    }

    .entryRight{
    width: 475px;
    border: 1px solid #002773;
    background-color: #FFF;
    padding:0;
    margin: 15px 10px;
    }
    .title
    {
    background-image: url(../images/titlebg.gif);
    margin: -5px;
    height:24px;
    border-left: 1px solid #002773;
    border-right: 1px solid #002773;
    }


    .title h1
    {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #002773;
    margin: 0;
    padding: 5px;
    text-align:left;
    height:24px;
    }

    Here is the website I am working on...
    http://www.lazerpro.com/projects/thon.org/index.php

    Any help is appreciated. Like I said it's not that big a deal, but it is just wrong.

    peace
    summer

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

    IE usually likes position:relative added to the element before it will show content when negative margins are used.
    Code:
    .title
    { 
     background-image:  url(http://www.lazerpro.com/projects/tho...es/titlebg.gif);
     margin: -5px;
     height:24px;
     border-left: 1px solid #002773;
     border-right: 1px solid #002773;
     position:relative;
    }
    That should allow the content to show correctly.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought this didn't work and just let it go. I went back and looked at it today, several weeks later, and had spelled position wrong...hah...so it did work
    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
  •