Treehouse: Grow your CSS skills. Land your dream job.

IE7 Problem Safari 3 & Firefox 3 Win Mac Fine

  • # May 22, 2009 at 6:32 am

    Hi,

    I have a simple page with rounded corners that shows up strange in IE7 (1st image)

    [img]http://img.skitch.com/20090522-md5gxfy6k8aafhu9w4qn48gip8.jpg[/img]

    But shows up fine in Safari 3 & Firefox 3 on Windows or Mac.

    [img]http://img.skitch.com/20090522-e4a2h227epc6rhsf4sb1j794xy.jpg[/img]

    1) I am looking for help how I could get the margin left to show properly in IE7 (Flush left & up with picture above it)
    2) Try to to solve the rounded corners issue in the IE7 screenshot (1st image)

    Here is my css file:

    Code:
    * { margin: 0; padding: 0; }
    body { background-color: #a8bdc6; background-image: url(bgofpage.gif); background-repeat: repeat-x repeat-y; font-size: 82.5%; font-family: Georgia, serif;}
    p { font-size:1.2em; color: #f4f8fb; }
    .floatLeft { float: left; }
    .floatRight { float: right; }
    .clear { clear: both; }
    .imagecenter { text-align: center; }

    div#page-wrap { width: 680px; margin-top: 75px; margin-left: auto; margin-right: auto; }

    #dl_nav { font-size: 70%; text-align: center; }
    #dl_nav ul { list-style: none; margin: 0 0 0 0px; padding: 0; padding-top: .5em; }
    #dl_nav li { display: inline; }
    #dl_nav a:link, #dl_nav a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; background-image: url(buttonbg1.gif); text-decoration: none; border: 1px solid #711515; }

    #dl_nav a:hover { color: #FFFFFF; background-color: #711515; background-image: url(buttonbg1.gif); }
    #videodirective { text-align: center; margin-bottom: 4px; }
    #menucenter { margin-left: 11px; margin-bottom: 0px; margin-right: 0px; margin-top: 0px; background-color: black; width: 654px; min-height: 70px; }

    .mainbox { width: 678px; background: url(mainbox_vertmiddle.gif) center repeat-y; margin: 10px 0; }
    .mainbox .inside { padding: 0 20px; }

    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Content

    Date

    logo

    mainbox_bottom


    Thanks very much for taking a look *

    Jeff

    # May 22, 2009 at 7:09 am

    I guess in my first screenshot of my IE7 problem, it doesnt show very clear. (sorry)

    The #menucenter shows up in IE7 off center to the right & a small amount of pixels down from the 655 x 258 image above it. (I am trying to have it flush to the left & up flush to the large image above it.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.