January 24, 201016 yr Hi. I was hoping someone could look at my code and tell me how to make my website more consistent across browsers. For the most part, my css works fine. It looks right in most modern browsers as far as I know. In Firefox, for example, the header looks like this (as it should): http://imgur.com/QteZr.png However, in some other browsers, such as MSIE 7, my head appears in the wrong position, as you can see here: http://imgur.com/zEsVV.png Here is the html: <body> <div class="wrapper"> <div id="hwrap"> <div class="header"> <p id="headercontent"> <img alt="..." src="img/header.png" id="headerpng" /> <a href="mailto:..." class="faceover" id="emailface" title="..."></a> Fragmented thoughts, bright colors and scenes of indeterminate consequence presented by one of nature's <span id="worldpop"></span> important snowflakes. </p> </div> </div> <div class="spacer"></div> <div id="main" class="clearfix"> Here is the css: *{ margin:0; padding:0; } html, body, #wrapper{ height:100%; font: 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; color:#666; } body > #wrapper{ height: auto; min-height: 100%; } body{ background:#ebe9e1; } #main{ padding-bottom:396px; margin-left:auto; margin-right:auto; width:1002px; } #dreamtag{ width:1002px; margin:0 auto; top:-49px; position:relative; } #dreamimg{ margin-left:30px; } .footer{ position:relative; margin-top:-396px; height:390px; clear:both; background:white; background-image:url(img/footer-cf4.png); background-position:55% 100%; background-repeat: no-repeat; border-top:1px solid #e1dfd5; } .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ display:inline-block; } * html .clearfix{ height:1%; } .clearfix{ display:block; } .header{ background:white; border:1px solid #e1dfd5; text-align:center; padding:0px 19px 16px 19px; width:962px; margin:0 auto; } .photos, .words{ background:white; border:1px solid #e1dfd5; padding:20px; } .words{ width:638px; } .photos{ width:260px; float:right; text-align:center; } .spacer{ padding:10px; } .spacer2{ padding:40px; } .post{ background-image:url("img/writing.jpg"); background-repeat:no-repeat; } .post p{ line-height:180%; text-indent:26px; } .bullet{ height:33px; width:83px; background-image:url("img/bullet.jpg"); background-repeat:no-repeat; margin:0 auto; padding: 20px 0; background-position:50% 50%; } h1{ font: 36px Georgia, "Times New Roman", Times, serif; color:#000; position:relative; left:54px; } h2{ font: 18px Georgia, "Times New Roman", Times, serif; color:#222; position:relative; left:10px; margin:12px 0px 6px 0px; } ul{ padding:8px 0 22px 0; list-style-type: none; } li{ line-height:180%; font-size:110%; margin:0 0 0 50px; padding-left:18px; margin-right:7px; border-bottom: 1px dotted #ccc; color:#333; } .date{ position: relative; left:34px; padding-bottom:14px; font-size:90%; color:#9f9f9f; width:50%; } blockquote{ width:80%; background:#f5e9fe; margin:20px auto; padding:20px; color:#3a3b33; font-size:100%; border:1px solid #ddd2e6; } a, a:visited{ color:#20211b; text-decoration:none; border:none; } a:hover{ color:#e63838; text-decoration:none; border:none; } a:active{ color:#ff0000; text-decoration:none; border:none; } #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider, #slider li{ width:1000px; background:#fff; height:70px; overflow:hidden; border:none; } #slider{ border:none; color:#444; margin:0 auto; font-size:70%; margin-top:0px; top:-30px; position:relative; } span#prevBtn, span#nextBtn{ font-size:70%; position:relative; bottom:120px; float:left; left:10%; padding:0 8px; } .dream { color:#9f9f9f; font-weight:normal; } Any help would be greatly appreciated. Thank you.
January 25, 201016 yr More than likely an IE box model issue perhaps? or maybe set the two images to (float: left) making sure the width obviously is not wider than your wrap. Just a thought as it is late...
January 27, 201016 yr Author The float left thing worked. I made the image smaller just in case, too. Thanks.
Create an account or sign in to comment