The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

IE7 Problem Safari 3 & Firefox 3 Win Mac Fine

  • # May 22, 2009 at 6:32 am


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


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


    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:

    * { 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; }


    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">





    Thanks very much for taking a look *


    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed