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="even bbp-parent-forum-22504 bbp-parent-topic-24919 bbp-reply-position-2 user-id-14635 topic-author post-57959 reply type-reply status-publish hentry"> <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://0.gravatar.com/avatar/0094c14f0674dbc8adb0fc534e0f5b9b?s=160&d=mm&r=pg' srcset='https://0.gravatar.com/avatar/0094c14f0674dbc8adb0fc534e0f5b9b?s=320&d=mm&r=pg 2x' 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 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-manage.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">Media Temple</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-ecc60d3d.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/14 queries in 0.009 seconds using apc Object Caching 1317/1353 objects using apc Content Delivery Network via cdn.css-tricks.com Served from: css-tricks.com @ 2015-04-28 13:02:22 by W3 Total Cache -->