Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

IE not working properly.

JackT06

JackT06

macrumors 6502
Original poster
Jul 24, 2009
293
0
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
 

Attachments

  • screenshot.JPG
    screenshot.JPG
    110.4 KB · Views: 175
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.
 
v66jack said:
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.
Click to expand...

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; }
 
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.
 
Just noticed you'll probably want to change the width numbers in the example i gave so that your header looks right.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back