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">


    </p> <link rel="stylesheet" type="text/css" href="style.css"/> <p> <!--[if lt IE 7]></p> <style> @import "http://www.site.com/_css/ie6.css"; </style> <p> < ![endif]--></p> <p> </head></p> <style> div.overlay { padding:40px; width:576px; display:none; background-image:url(/img2/white.png); }</p> <p>div.overlay div.close { background:url(/img2/close.png) no-repeat; position:absolute; top:2px; right:5px; width:35px; height:35px; cursor:pointer; }</p> <p>div.overlay a { height:450px; display:block; } </style> <p> <body></p> <div id="page-wrap"> <div class="mainbox"> <img src="mainbox_top.gif" alt="" width="678" height="10"/></p> <div class="imagecenter"> <p> <img src="couple.jpg" alt="" border="0" /> </p> <div id="menucenter"> <div id="videodirective"> <p> <img src="videodirective.gif" alt="videodirective" width="319" height="21"/> </div> <div id="dl_nav"> <!-- link up overlay --></p> <ul> <li><a href="#" rel="div.overlay" <p> title="" >Flash High</a></li> <li><a href=# rel="nofollow">High MP4</a></li> </ul> </p></div> </p></div> <div class="imagecenter"> </p> <p>Content</p> <p>Date</p> <p> <img src="logo.gif" alt="logo" width="655" height="36"/></p></div> <p> <img src="mainbox_bottom.gif" alt="mainbox_bottom" width="678" height="12"/></p></div> </p></div> <div id="footer"> footer </div> </p></div> <p></body><br /> </html></div> </div> <p>Thanks very much for taking a look *</p> <p>Jeff</p> </div><!-- .bbp-reply-content --> </div><!-- .reply --> </div> <div class="forums-module"> <div id="post-57959" class="bbp-reply-header"> <div class="bbp-meta"> <span class="bbp-admin-links"></span> </div><!-- .bbp-meta --> </div><!-- #post-57959 --> <div class="post-57959 reply type-reply status-publish hentry even bbp-parent-forum-22504 bbp-parent-topic-24919 bbp-reply-position-2 user-id-14635 topic-author"> <div class="bbp-reply-author"> <a href="https://css-tricks.com/forums/users/med267/" title="View med267's profile" class="bbp-author-avatar" rel="nofollow"><img alt='' src='https://secure.gravatar.com/avatar/0094c14f0674dbc8adb0fc534e0f5b9b?s=160&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D160&r=PG' class='avatar avatar-160 photo' height='160' width='160' /></a> </div><!-- .bbp-reply-author --> <div class="bbp-reply-content"> <div class="reply-name"> <a href="https://css-tricks.com/forums/users/med267/" title="View med267's profile" class="bbp-author-name" rel="nofollow">med267</a> </div> <div class="reply-date"> <a href="https://css-tricks.com/forums/topic/ie7-problem-safari-3-firefox-3-win-mac-fine/#post-57959" title="Re: IE7 Problem Safari 3 & Firefox 3 Win Mac Fine" class="bbp-reply-permalink">#</a> May 22, 2009 at 7:09 am </div> <p>I guess in my first screenshot of my IE7 problem, it doesnt show very clear. (sorry)</p> <p>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.</p> </div><!-- .bbp-reply-content --> </div><!-- .reply --> </div> </li><!-- .bbp-body --> </ul><!-- #topic-24919-replies --> <div class="bbp-pagination"> <div class="bbp-pagination-count"> Viewing 2 posts - 1 through 2 (of 2 total) </div> <div class="bbp-pagination-links"> </div> </div> <div id="no-reply-24919" class="bbp-no-reply"> <div class="bbp-template-notice"> <p>You must be logged in to reply to this topic.</p> </div> </div> </div> </div> <aside class="grid-1-3"> <div class="module group"> <form name="loginform" id="loginform" action="https://css-tricks.com/wp-login.php" method="post" class="forums-login-form"> <h4>Log In</h4> <div class="login-username login-field"> <label for="user_login" class="screen-reader">Username</label> <input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Username"> </div> <div class="login-password login-field"> <label for="user_pass" class="screen-reader">Password</label> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password"> </div> <div class="login-remember login-field"> <label> <input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me </label> </div> <div class="login-submit"> <input type="hidden" name="redirect_to" value="/forums/"> <input type="submit" name="wp-submit" id="wp-submit" class="button" value="Log In"> </div> </form> <p> Forget you password? You can <a href="/wp-login.php?action=lostpassword">reset it</a>. </p> <p> Not a Member Yet? Registering is free and only takes a second. </p> <a href="/wp-login.php?action=register" class="button"> Register </a> </div> <div class="module"> <select class="topic-select" id="topic-select"> <option value="choose">Choose Forum</option> <option value="css">CSS Combat</option> <option value="design">Design Den</option> <option value="js">JavaScript Jungle</option> <option value="php">PHP Problems</option> <option value="other">Other Discussions</option> </select> <a href="#" class="disabled button full-width-button" id="new-thread-button">Post New Thread</a> </div> <div class="module text"> <h4>Tips</h4> <ul> <li>Use a live demo tool like <a href="http://codepen.io/pen/">CodePen</a> to demonstrate problems.</li> <li>In otherwords, a <a href="http://css-tricks.com/reduced-test-cases/">reduced test case</a>.</li> <li>Be cool.</li> </ul> </div> </aside> </div> </div> <h2 class="pre-footer-title">What now? I have some ideas for you.</h2> <section class="footer-calls-to-action"> <footer class="site-footer site-footer-codepen"> <h4>Go explore CodePen!</h4> <p>As a front end designer and developer, you should have an account on <a href="http://codepen.io/">CodePen</a> so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.</p> <a href="http://codepen.io/pro/" class="button">Go PRO on CodePen</a> </footer> <footer class="site-footer site-footer-newsletter"> <h4>Get the newsletter!</h4> <p>You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an <a href="http://feeds.feedburner.com/CssTricks">RSS feed</a>, <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=273881728">iTunes</a>, and <a href="/subscription-options/">lots of other ways</a> to subscribe.</p> <form action="//chriscoyier.us2.list-manage2.com/subscribe/post?u=155f5a9ccc4e24c318130cace&id=197f127a68" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <p class="mc-field-group"> <label for="mce-EMAIL" class="screen-reader">Email Address</label> <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="your@email.com"> <input type="submit" value="Subscribe" name="Subscribe" id="mc-embedded-subscribe" class="button"> </p> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <div style="position: absolute; left: -5000px;"><input type="text" name="b_155f5a9ccc4e24c318130cace_197f127a68" value=""></div> </form> </footer> <footer class="site-footer site-footer-social"> <h4>Let's be friends!</h4> <p>I'm active on <a href="http://codepen.io/chriscoyier/">CodePen</a>, <a href="https://twitter.com/chriscoyier">Twitter</a>, <a href="http://dribbble.com/chriscoyier">Dribbble</a>, and <a href="https://github.com/chriscoyier/">GitHub</a>. CSS-Tricks is on <a href="http://twitter.com/real_css_tricks">Twitter</a> and <a href="http://facebook.com/CSSTricks">Facebook</a>, which are mostly just a way to follow new content. There is a <a href="http://www.youtube.com/realcsstricks">YouTube channel</a> for the screencasts as well.</p> <a href="https://twitter.com/chriscoyier" class="button">Follow me on Twitter</a> </footer> <footer class="site-footer site-footer-shoptalk"> <h4>Listen to ShopTalk!</h4> <p><a href="http://shoptalkshow.com/">ShopTalk Show</a> is a weekly audio podcast I do with my friend <a href="http://daverupert.com/">Dave Rupert</a>. We have guests on to help us answer <a href="http://shoptalkshow.com/ask/">your questions</a> about all things web design and development.</p> <a class="button" href="http://itunes.apple.com/podcast/id493890455">Subscribe on iTunes</a> </footer> <footer class="site-footer site-footer-lodge"> <h4>Subscribe to The Lodge!</h4> <p><a href="/lodge/">The Lodge</a> is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.</p> <a href="/lodge/signup/" class="button">Signup for The Lodge</a> </footer> <footer class="site-footer site-footer-jobs"> <h4>Peruse Jobs!</h4> <p>Always good to <a href="/jobs/">keep your eye on the field</a>.</p> <p>If you're looking to hire, posting your job on the CodePen job board means it will be shown here on CSS-Tricks and on the ShopTalk job board as well.</p> <a class="button" href="https://codepen.io/jobs/post/">Post a Job</a> </footer> </section> <h2 class="pre-footer-title">We can do the real footer now.</h2> <footer class="site-footer site-footer-links"> <h4>Site Links</h4> <p> <a href="/contact/">Contact</a> <a href="/about/">About</a> <a href="/advertising/">Advertise</a> <a href="/license/">License</a> <a href="/archives/">Archives</a> <a href="/store/">Store</a> <a href="/jobs/">Jobs</a> </p> </footer> <footer class="site-footer site-footer-colophon"> <h4>Colophon</h4> <p>CSS-Tricks* is created, written by, and maintained by <a href="http://chriscoyier.net">Chris Coyier</a>. It is built on <a href="http://wordpress.org/">WordPress</a>, hosted by <a href="http://www.mediatemple.net/#a_aid=4e25c84480ed2">MediaTemple</a>, and the assets are served by <a href="http://tracking.maxcdn.com/c/13088/3982/378">MaxCDN</a>. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to <a href="/lodge/">The Lodge</a> and through advertising for products and services I like.</p> <p class="mega-big-time-warning"><small>*May or may not contain any actual "CSS" or "Tricks".</small></p> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </footer> </div> <svg width="0" height="0" class="screen-reader"> <defs> <path id="shape-link" d="M74.957.955h-15.139c-1.307 0-2.59.1-3.844.293l-.811.151c4.645 2.666 8.469 6.605 10.986 11.343h9.584c7.322 0 13.258 5.937 13.258 13.259 0 7.321-5.938 13.258-13.258 13.258h-16.555c-3.305 0-6.324-1.212-8.645-3.212l-.004.003-.002-.003c-.494-.414-.886-.802-1.206-1.148-.7-.764-1.011-1.303-1.011-1.303l.002-.003-.002-.003c-1.505-2.15-2.389-4.766-2.389-7.589 0-2.746.834-5.296 2.263-7.413l.127-.176c-1.736-1.473-3.978-2.367-6.429-2.367h-5.041c-1.325 3.052-2.067 6.416-2.067 9.956 0 3.538.737 6.903 2.061 9.955.244.562.509 1.11.792 1.651.237.449.482.896.746 1.332l.054.088.147.23c2.792 4.463 6.948 7.98 11.888 9.973.608.246 1.225.473 1.856.67l.104.031.318.09c.27.08.541.162.814.232l.01.003c2 .513 4.096.787 6.254.787h15.137c13.832.001 25.045-11.212 25.045-25.043s-11.211-25.045-25.043-25.045zM25.542 51.045h15.137c1.308 0 2.592-.102 3.846-.294l.811-.151c-4.646-2.664-8.47-6.604-10.987-11.342h-9.585c-7.322 0-13.257-5.936-13.257-13.259 0-7.322 5.935-13.257 13.257-13.257h16.555c3.304 0 6.323 1.212 8.645 3.212l.002-.003.002.003c.495.413.888.801 1.206 1.148.701.762 1.012 1.302 1.012 1.302l-.002.003.002.003c1.506 2.15 2.391 4.766 2.391 7.588 0 2.746-.835 5.297-2.264 7.412l-.127.176c1.735 1.475 3.979 2.369 6.428 2.369h5.043c1.324-3.053 2.064-6.417 2.064-9.957 0-3.539-.736-6.903-2.061-9.955-.244-.561-.51-1.111-.792-1.651-.237-.451-.481-.898-.746-1.332l-.054-.089-.146-.23c-2.792-4.463-6.949-7.981-11.888-9.973-.608-.245-1.226-.471-1.856-.67l-.103-.032-.318-.089c-.27-.081-.541-.162-.816-.232l-.009-.002c-2-.515-4.095-.788-6.255-.788h-15.135c-13.832 0-25.044 11.212-25.044 25.044 0 13.833 11.212 25.046 25.044 25.046z"/> <path id="shape-search" d="M3.327,96.684C5.534,98.895,8.434,100,11.331,100s5.797-1.105,8.004-3.316l21.321-21.322 c5.83,3.188,12.393,4.897,19.223,4.897c10.721,0,20.798-4.172,28.379-11.752c15.646-15.644,15.646-41.105,0.002-56.755 C80.677,4.171,70.598,0,59.877,0C49.159,0,39.08,4.171,31.504,11.752c-7.581,7.576-11.756,17.655-11.756,28.376 c0,6.832,1.71,13.396,4.9,19.226L3.327,80.675C-1.096,85.094-1.096,92.266,3.327,96.684z M59.879,68.938 c-7.695,0-14.93-2.996-20.371-8.435c-5.443-5.442-8.439-12.677-8.439-20.375c0-7.695,2.996-14.933,8.439-20.372 c5.441-5.44,12.676-8.436,20.369-8.436c7.698,0,14.936,2.997,20.378,8.436c11.231,11.236,11.231,29.515,0,40.747 C74.812,65.941,67.575,68.938,59.879,68.938z"/> <path id="shape-arrow-right" d="M0,49.993c0,7.387,6.007,13.394,13.396,13.394h40.691L42.898,74.407c-2.543,2.507-3.94,5.827-3.94,9.36 c0,3.539,1.407,6.863,3.952,9.364C45.428,95.616,48.809,97,52.402,97c3.6,0,6.978-1.384,9.516-3.891l34.159-33.623 c2.53-2.489,3.923-5.81,3.923-9.342v-0.307c0-3.545-1.4-6.867-3.943-9.358L61.914,6.869c-5.243-5.16-13.775-5.16-19.014,0 c-2.539,2.495-3.942,5.821-3.942,9.354c0,3.535,1.403,6.862,3.942,9.354L54.1,36.604H13.396C6.012,36.604,0.001,42.61,0,49.993z"/> </defs> </svg> <script>var pollsL10n = {"ajax_url":"https:\/\/css-tricks.com\/wp-admin\/admin-ajax.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"0","show_fading":"1"};</script><script type='text/javascript' src='https://cdn.css-tricks.com/wp-content/uploads/minqueue-cache/minqueue-cb4ed8f2-7f050370.js'></script> <script src='https://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-12/js/min/global-ck.js?v=6.2'></script> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> <script src="https://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-12/js/min/forums-ck.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-68528-29', 'auto'); ga('send', 'pageview'); </script> </body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/ Page Caching using apc Database Caching 1/13 queries in 0.008 seconds using apc Object Caching 1243/1275 objects using apc Content Delivery Network via cdn.css-tricks.com Served from: css-tricks.com @ 2015-03-03 04:35:35 by W3 Total Cache -->