SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    no borders in firefox

    hi,

    I think this is a css issue. www.jill-piano-teacher.co.uk I have just uploaded a site which i created in IE 6. Looks ok in IE 6 but when viewed in firefox strange things happen. The border on the right column cannot be seen. Nor is the body around the main content. Also, the copyright box and the bottom left box seem to have moved up a few pixels so inteffering with the rest of the page.

    The css for the index page is:


    div.mainbody{position:absolute; width:870px; height:656px; top:293px; left:60px; border:#000000; border:solid; border:thin; z-index:1; background-color: #FFFFFF;
    }

    div.indexpic{ float:left; width:196px; height:545px; z-index:4; margin-top:30px;
    }

    div.welcome{ float:left; margin-left:0; margin-right:0; width:400px; height:600px; background-color: #FFFFFF; margin-top:37px;
    }

    div.signature{ position:absolute; width:61px; height:90px; z-index:1; left: 485px; top: 492px;
    }

    div.musicnews{ float:left; width:160px; background-color:#99CCFF; margin-top:47px; border: #3366CC; border-left-style:inset; border-right-style:inset; border-top-style:inset; border-bottom-style:inset; border: thick; margin-left:25px;
    }

    div.book{ position: absolute; width:381px; height:296px; left:109px; top:754px; z-index:6;
    }

    div.copyind{ position:absolute; font-size:12px; width:339px; height:56px; z-index:7; left: 362px;
    top: 971px;
    }

    div.markets{ position:absolute; width:155px; height:75px; z-index:7; left: 737px; top: 976px;
    }

    Anybody any ideas whats up?

    thanks

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure, mainly through not having enough knowledge, but you have coded in XHTML which often causes browsers to adopt odd procedures.

    In IE7 the left hand column containing 'Recent and Up-coming events' appears a few px down and to the left of the top right corner of the mainbody div.

    There is well documented evidence (see the stickies on this forum) that IE handles margins differently to FF.

    Finally, I love your 'hellotit' class.

    My bumping this thread may attract more knowledgeable people to help out with more practical stuff.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Change the code for .mainbody that says this
    border:#000000; border:solid; border:thin;
    to this
    border:#000000 solid 2px;

    You are not specifying WHICH border property you are setting in the original code. IE, being clever, has made an intelligent guess and was right. Other browsers don't guess as well when the code is wrong.

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Validate for your list of 15 html errors, too.

  5. #5
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SRD View Post
    Finally, I love your 'hellotit' class.
    Yes, I often get rid of my anger with troublesome clients with appropriate class names (so long as they dont understand code!)

    Thanks for the bump!

    You are not specifying WHICH border property you are setting in the original code. IE, being clever, has made an intelligent guess and was right. Other browsers don't guess as well when the code is wrong.
    this was spot on Dr John. Im learning.

    It still leaves what appears to be the absolute positioned divs which seem to be moving up down left or rright a few pixels in firefox. It sounds this is a known problem can anyone point me to a tutorial of ho to deal with this?


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
  •