...

View Full Version : divs messed up in IE



wojo1086
05-10-2010, 04:26 AM
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


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;}

hdewantara
05-11-2010, 11:23 PM
Hi, your site is in IE quirks mode by default.

Try refine/complete the doctype declaration of your page to:

<!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.

wojo1086
05-12-2010, 06:46 AM
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?

hdewantara
05-12-2010, 08:07 AM
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..

drhowarddrfine
05-12-2010, 04:25 PM
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.

wojo1086
05-12-2010, 05:18 PM
Thank you so much! Both of those solved the issue!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum