IE not working properly.

Discussion in 'Web Design and Development' started by JackT06, Mar 19, 2011.

  1. JackT06 macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #1
    Hello,

    I noticed that my website does not display correctly in IE, so i ran an online browser screenshot test, so if it flanked up anywhere else, and it didn't.... Does anyone know why it might just be doing it in IE??!?!:S
     

    Attached Files:

  2. v66jack macrumors 6502a

    v66jack

    Joined:
    May 20, 2009
    Location:
    London, UK
    #2
    Is the problem that the header and body aren't lining up? Is the website supposed to align in the centre?

    Must say though for a d of e website - very nice.

    I can't see your code because I'm on an iPad, but should imagine there is a difference in either the two section widths or the margins, which is causing IE a problem.
     
  3. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #3
    Yup, all should be centre.

    thankyou:)

    my CSS is:
    Code:
    /
    body 
    {	margin: 0;
    	padding: 0;
    	background: #F7F7F7 url(images1/img01.jpg) repeat left top;
        font-family: Verdana;
    	font-size: 14px;}
    
    h1, h2, h3 
    {	margin: 0;
    	padding: 0;
    	font-weight: normal;
    	color: #990033;
    	font-family: Georgia, "Times New Roman", Times, serif;}
    
    h1 
    {    font-size: 2em;}
    
    h2 
    {	font-size: 2.4em;}
    
    h3 
    {	font-size: 1.6em;}
    
    p, ul, ol 
    {	margin-top: 0;
    	line-height: 200%;
    	font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;}
    
    ul, ol 
    {	margin: 0px;
    	padding: 0px;
    	list-style: none;}
    
    a 
    {	text-decoration: underline;
    	color: #516C00;}
    	
    a:hover 
    {	text-decoration: none;}
    
    h2 a 
    {	text-decoration: none;}
    
    #wrapper 
    {	margin: 0px;
    	padding: 0px;
    	background: url(images1/img02.jpg) repeat-x left top;}
    
    /* Header */
    #header 
    {	width: 1000px;
    	height: 235px;
    	margin: 0 auto;
    	padding: 0px;
    	background: url(images1/img03.jpg) no-repeat left top;}
    
    /* Logo */
    #logo 
    {	float: left;
    	margin: ;
    	padding: 40px 0px 0px 50px;
    	color: #000000;}
    	
    #logo h1, #logo p 
    {	margin: 0;
    	padding: ;
    	font-family: Georgia, "Times New Roman", Times, serif;}
    
    #logo h1 
    {	letter-spacing: -1px;
    	font-size: 35px;}
    
    #logo h1 a 
    {	color: #FFFFFF;}
    
    #logo p 
    {	margin: -30px 0px 0px 0px;
    	padding: 26px 0 0 25px;
    	font: normal 19px Georgia, "Times New Roman", Times, serif;
    	color: #C5E8FF;} 
    
    #logo a 
    {   border: none;
    	background: none;
    	text-decoration: none;
    	color: #C5E8FF;}
    
    /* Search */
    #search
    {	float: right;
    	width: 280px;
    	height: 60px;
    	padding: 20px 0px 0px 0px;
    	background: #E2E2E2;
    	border-bottom: 4px solid #FFFFFF;}
    
    #search form 
    {	height: 41px;
    	margin: 0;
    	padding: 10px 0 0 20px;}
    
    #search fieldset 
    {	margin: 0;
    	padding: 0;
    	border: none;}
    
    #search-text 
    {	width: 170px;
    	padding: 6px 5px 2px 5px;
    	border: 1px solid #DEDEDE;
    	background: #FFFFFF;
    	text-transform: lowercase;
    	font: normal 11px Arial, Helvetica, sans-serif;
    	color: #5D781D;}
    
    #search-submit 
    {	width: 50px;
    	height: 22px;
    	border: none;
        background: #B9B9B9;
        color: #000000;}
    
    #banner 
    {	margin-bottom: 20px;
    	border: 12px #ECECEC solid;}
    
    /* Menu */
    #menu 
    {	width: 1000px;
    	height: 65px;
    	margin: 0 auto;
    	padding: 0;
    	background: url(images1/img04.jpg) no-repeat left top;}
    
    #menu ul 
    {	float: right;
    	margin: 0;
    	padding: 0px 25px 0px 0px;
    	list-style: none;
    	line-height: normal;}
    
    #menu li 
    {	float: left;}
    
    #menu a 
    {	display: block;
    	width: 120px;
    	height: 39px;
    	margin-left: 10px;
    	padding-top: 15px;
    	background: url(images1/img05.jpg) repeat-x left top;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	text-decoration: none;
    	text-align: center;
    	font-size: 18px;
    	font-weight: normal;
    	color: #FFFFFF;
    	border: none;}
    
    #menu a:hover, #menu .current_page_item a 
    {	text-decoration: none;}
    
    #menu .current_page_item a 
    {	background: url(images1/img06.jpg) no-repeat left top;
    	padding-left: 0;
    	color: #493E2B;}
    
    /* Page */
    #page 
    {	width: 900px;
    	margin: 0px auto;
    	padding: 40px 50px 0px 50px;
    	background: #FFFFFF;}
    
    /* Content */
    #content 
    {	float: left;
    	width: 570px;
    	padding: 0px 0px 0px 0px;}
    #content123
    {	float: left;
    	width: 900px;
    	padding: 0px 0px 0px 0px;}
    
    .post 
    {	margin-bottom: 15px;}
    
    .post-bgtop 
    {}
    
    .post-bgbtm 
    {}
    
    .post .title 
    {	margin-bottom: 10px;
    	padding: 12px 0 0 0px;
    	letter-spacing: -.5px;
    	font-size: 36px;
    	font-color: #f36523;}
    
    .post .title a 
    {	font-color: #f36523;
    	border: none;}
    
    .post .meta 
    {	margin: -10px 0px 0px 0px;
    	padding: 0px 0px 10px 0px;
    	letter-spacing: -1px;
    	font-size: 23px;
    	font-weight: normal;
    	color: #f36523;
    	font-family: Georgia, "Times New Roman", Times, serif;}
    
    .post .meta .date 
    {	float: left;}
    
    .post .meta .posted 
    {	float: right;}
    
    .post .meta a 
    {}
    
    .post .entry 
    {	background: url(images1/img08.jpg) no-repeat left top;
    	padding: 25px 0px 0px 0px;
    	text-align: justify;}
    
    .links 
    {	padding-top: 20px;
            color: #f36523}
    a.linkText:link {
    padding-top: 20px;
            color: #f36523;
    }
    
    .more 
    {	padding-left: 16px;
    	background: url(images1/img10.gif) no-repeat left 3px;
    	text-decoration: underline;
    	font-size: 12px;
    	font-weight: normal;}
    
    .comments 
    {	padding-left: 18px;
    	background: url(images1/img11.gif) no-repeat left 4px;
    	text-decoration: underline;
    	font-size: 12px;
    	font-weight: normal;}
    
    /* Sidebar */
    #sidebar 
    {	float: right;
    	width: 273px;
    	padding: 0px;
    	color: #787878;}
    
    #sidebar ul 
    {	margin: 0;
    	padding: 0;
    	list-style: none;}
    
    #sidebar li 
    {	margin: 0;
    	padding: 0;}
    
    #sidebar li ul 
    {	margin: 0px 0px;
    	padding-bottom: 20px;}
    
    #sidebar li li 
    {	line-height: 35px;
    	margin: 0px;
    	padding: 2px 0px;
    	border-left: none;}
    
    #sidebar li li span 
    {	height: 19px;
    	margin-right: 16px;
    	padding: 4px 12px;
    	background: #3D2A0B url(images1/img12.jpg) repeat-x left top;
        font-size: 12px;
        color: #FFFFFF;}
    
    #sidebar li li span a 
    {	color: #FFFFFF;}
    
    #sidebar h2 
    {	height: 65px;
    	background: url(images1/img09.jpg) no-repeat left bottom;
    	letter-spacing: -.5px;
    	font-size: 28px;
    	color: #493E2B;}
    
    #sidebar p 
    {	margin: 0 0px;
    	padding: 0px 0px 30px 0px;
    	text-align: justify;}
    
    #sidebar p strong 
    {	color: #4A3E29;}
    
    #sidebar a 
    {	border: none;}
    
    #sidebar a:hover 
    {}
    
    /* Calendar */
    
    #calendar 
    {}
    
    #calendar_wrap 
    {	padding: 20px;}
    
    #calendar table 
    {	width: 100%;}
    
    #calendar tbody td 
    {	text-align: center;}
    
    #calendar #next 
    {	text-align: right;}
    
    
    /* Footer */
    #footer-content 
    {	width: 900px;
    	height: 250px;
    	margin: 0 auto;
    	padding: 60px 50px 0px 50px;
    	background: url(images1/img15.jpg) no-repeat left top;
    	font-size: 12px;
    	color: #887450;}
    
    #footer-content .column1 
    {	float: left;
    	width: 570px;}
    
    #footer-content .column2 
    {	float: right;
    	width: 273px;}
    
    #footer-content h2 
    {	padding-bottom: 10px;
    	font-size: 22px;
    	color: #E3D2B6;}
    
    #footer-content strong 
    {	color: #E3D2B6;}
    
    #footer-content a 
    {	color: #AA8B55;}
    
    #footer-content a:hover 
    {	color: #AA8B55;}
    
    .list li 
    {	margin-bottom: 6px;}
    
    #footer 
    {	height: 50px;
    	margin: 0 auto;
    	padding: 0px 0 15px 0;
    	font-family: Arial, Helvetica, sans-serif;}
    
    #footer p 
    {	margin: 0;
    	line-height: normal;
    	font-size: 12px;
    	text-align: center;
    	color: #82A2B9;}
    
    #footer a 
    {	text-decoration: underline;
    	color: #82A2B9;}
    
    #twitter_div {
    	background-image: url('images1/twitterBG(2).png');
    	background-repeat: no-repeat;
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	border-bottom-color: #5AA5BC;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.9em;
    	margin-top:10px;
    	padding-top: 50px;
    	padding-right: 5px;
    	padding-left: 5px;
            width: 260px;
    }
     
    #twitter_div ul li {
    	color: #0C93BA;
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	border-bottom-color: #A1E8F7;
    }
     
    #twitter_div ul li a {
    	text-decoration: none;
    	color: #DDA84E;
    }
     
    #twitter_div ul li a:hover {
    	text-decoration: none;
    	color: #D78E42;
    }
     
    #twitter_div p {
    	text-align: right;
    	padding-right: 10px;
    	padding-bottom: 10px;
    }
    #twitter_div ul li span {
    	visibility: visible;
    }
     
    #twitter_div ul li span a {
    	color: #D78E42;
    	visibility: visible;
    	display: inherit;
    }
     
    #twitter_div ul li a {
    	display: block; /* creates line-break b/f & after */
    	text-align: right; /*aligns time-stamp to the right */
    	font-family: 'Trebuchet MS'; /* change t-s font */
    	color: #445566; /* change color of time-stamp */
    }
    .grayBox{
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    .box_content {
        position: fixed;
        top: 25%;
        left: 30%;
        right: 30%;
        width: 40%;
        padding: 16px;
        z-index:1002;
        overflow: auto;
    }
    
    #nav{ letter-spacing:1px; } #nav, #nav ul { letter-spacing:1px; list-style: none; line-height: 1; } #nav a {display: block; text-decoration: none; border:none; } #nav a:hover { display: block; text-decoration: none; border:none; background:#30AAFF; color:#FFF } #nav li { background:#EEE; float: left; list-style:none; margin-right:10px} #nav a{ display:block; font-weight:600; color: #000; padding:6px 12px; } #nav a:active, .current_page_item a, #home .on { text-decoration:none } #nav li ul { position: absolute; left: -999em; height: auto; width: 174px; border-bottom: 1px solid #a9a9a9; } #nav li li { width: 172px; border-top: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; border-left: 1px solid #a9a9a9; background: #F5F5F5; } #nav li li a{ font-weight:normal; font-size:1em; color:#000; } #nav li li a:hover, #nav li li a:active { background:#bed261; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } a.main:hover { background:none; } 
     
  4. v66jack macrumors 6502a

    v66jack

    Joined:
    May 20, 2009
    Location:
    London, UK
    #4
    Ok, try Modifying your CSS so that it includes the bits below.

    body {

    text-align: center;

    min-width: 760px;

    }

    #wrapper {

    width: 720px;

    margin: 0 auto;

    text-align: left;

    }

    The min-width bit is for the Netscape 6 browser, if the browser width is less than the width of the wrapper then it just breaks.

    Make sure the entire <body> is wrapped with the div tag <div id="wrapper">

    Im no CSS expert but had similar problems with IE before. Anyway try these changes and hope they work for you.
     
  5. v66jack macrumors 6502a

    v66jack

    Joined:
    May 20, 2009
    Location:
    London, UK
    #5
    Just noticed you'll probably want to change the width numbers in the example i gave so that your header looks right.
     

Share This Page