Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    158
    Thanks
    4
    Thanked 8 Times in 8 Posts

    divs messed up in IE

    I know you have guys have probably answered this question a lot, but I can't seem to find how to fix this. My website is laid out using divs and in FF it looks exactly the way I want it to. But in IE, the width property in my CSS file isn't applying to IE 8 and everything is positioned too far left. I'll show you my CSS file. Here is the link to my site:

    http://www.stuffedpantry.com

    Code:
    body {
    	width:985px;
    	background:white;
    	margin-left:auto;
    	margin-right:auto;
    	background:white;
    	margin-top:0px;
    	text-align:center;
    	text-align:left;}
    #topbarleft {
    	width:215px;
    	position:absolute;
    	z-index:1;
    	padding-left:5px;
    	top:0;}
    #topbar {
    	text-align:center;
    	background:white;}
    #navbarbackground {
    	z-index:2;
    	position:relative;
    	padding:0px;}
    
    #navcontainer {
    	text-align: center;
    	white-space:nowrap;}
    #navcontainer1 {
    	margin-left: 0px;
    	padding-left: 0px;
    	white-space:nowrap;}
    #navcontainer2 {
    	margin-left: 0px;
    	padding-left: 0px;}		
    #navcontainer li {
    	display:inline;
    	position:relative;
    	padding-top:10px;
    	top:-57px;
    	z-index:3;}
    #navcontainer1 li {
    	display:inline;
    	position:relative;
    	padding-top:10px;}
    #navcontainer li a {
    	text-decoration:none;
    	color:white;
    	font-weight:bold;
    	font-size:22px;
    	font-family:arial,helvetica,sans-serif;}
    #navcontainer1 li a {
    	font-family:times new roman,helvetica,sans-serif;}
    #rgtBar {
    	width:165px;
    	position:absolute;
    	padding-left:825px;
    	top:168px;
    	background:white;}
    #lftBar {
    	position:absolute;
    	padding-left:0px;
    	width:215px;
    	top:168px;
    	text-align:center;
    	background:white;}
    #main {
    	width:605px;
    	position:absolute;
    	background:white;
    	padding-left:220px;
    	top:168px;}
    #main1 {
    	position:relative;
    	width:605px;
    	background:white;
    	padding-left:220px;}
    #main2 {
    	width:605px;
    	position:absolute;
    	background:white;
    	padding-left:220px;
    	top:185px;}
    p.blocktext {
    	font-size:17px;
    	font-family:arial,helvetica,sans-serif;
    	text-align:center;}
    p.blocktext1 {
    	font-family:arial,helvetica,sans-serif;
    	text-align:center;}
    #level4 {
    	padding-left:220px;
    	width:605px;
    	background:white;
    	position:relative;
    	text-align:center;}
    #level5 {
    	background:white;
    	position:relative;
    	text-align:center;
    	width:500px;}
    #button1 {
    	font-weight:bold;}
    div#allList {
    	position: relative;
    	margin-left:auto;
    	margin-right:auto;}
    div#allList a { 
    	display: block;
    	cursor: pointer;
    	text-decoration: none; 
    	border:none;}
    div#allList a:hover { 
    	color: darkblue;
    	font-weight: bold;}

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Hi, your site is in IE quirks mode by default.

    Try refine/complete the doctype declaration of your page to:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    This would not fix all, but probably is a good start.

  • #3
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    158
    Thanks
    4
    Thanked 8 Times in 8 Posts
    I did what you suggested and it kind of worked except the banner on the right side of the page was now on the left and what was on the left side of the page is below the banner (which is now on the left). Is there a way for the site to determine the web browser and then direct that browser to an appropriate CSS file? Like, should I have more than one CSS file? One for each browser?

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Yes, I see.

    That's because you've set the style for
    the lftbar div as lftBar, and rgtbar as rgtBar
    in main.css

    CSS itself is case insensitive language,
    but not for ids, classes, etc. I think..

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    It's going to be difficult to help you until you correct your doctype on the front page:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

    You will never get IE to attempt to act like other far more modern browsers without a proper doctype.

  • #6
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    158
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Thank you so much! Both of those solved the issue!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •