IE7 Problem Safari 3 & Firefox 3 Win Mac Fine

[med267]

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:

• Flash High
• High MP4

Content

Date

footer

Thanks very much for taking a look *

Jeff

[med267]

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.

[Author]

Posts