By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,955 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

Possible Firefox CSS content problem - Refresh fixes it

P: 2
Ladies and Gentleman,

I have been having this problem that has been driving me insane. I have a website that when viewed in Firefox first, the content in the body area is pushed down. Then when you click refresh, the content on that page is fine. I believe this could possibily a firefox issue. When I load the website in IE6 or IE7 the content is just fine. Any page you visit with IEXporer displays correctly where as if you go to the start page within firefox, you have to click refresh to display correct. If you click on abother link within the website, you again have to click refresh for the page to display correctly. Every page on the site acts the same in Firefox.

I would like to know what might be causing this problem. Here is the source to my CSS. My website is as follows. http://www.securemidwest.com

form {
margin:0px;
padding:0px;
}

ul {margin:0; padding:0; list-style:none;line-height:25px;}
ul li {
background:url(images/marker.gif) center left no-repeat;padding:0 0 0 17px ;
}

body{
margin:0px;
padding:0px;
text-align:center;
background-color:#E7E7E7;
}

div,textarea{
font-size:11px;
font-family:Tahoma;
color:#444444;
line-height:14px;
text-align:left;
margin:0 auto;
}
.m { color:#636363}

a:hover{ text-decoration:none}

.wrap{
margin:0 auto;
padding:0;
width:704px;
height:777px;
text-align:center;
background:URL(images/tall_y.gif) repeat-y;
display:table;
}

.form input{
width:145px;
height:17px;
padding:1 0 0 8px;
color:#9C9C9C;
font-size:10px;
line-height:12px;
vertical-align:middle;
}
.form{
width:234px;
height:87px;
background:URL(images/back_form.gif) no-repeat;
}

.header{
margin:0 auto;
padding:0;
width:704px;
height:263px;
text-align:left;
background:URL(images/header.jpg) no-repeat;
}


.content{
margin:0 auto;
padding:0;
width:704px;
height:413px;
text-align:left;
display:table;
background:URL(images/back_cont.jpg) no-repeat top;
}
.footer a{ color:#2CA7F3; font-size:10px; text-decoration:none}
.footer a:hover{ text-decoration:underline}
.footer_font{
color:#627074;
font-size:10px;
}
.footer_privacy a, .footer_privacy{
color:#8F9B9E;
font-size:10px;
text-decoration:none;
}
a { color:#2CA7F3}
.block a{color:#33576F;}
.block{
color:#33576F;
padding:21 15 16 28px
}
.footer_privacy a:hover{ text-decoration:underline}
.footer{
margin:0 auto;
padding:0;
width:704px;
height:101px;
text-align:center;
background:URL(images/footer.gif) no-repeat bottom;
}
.input_image{
margin-left:7px;
vertical-align:middle;
}
.input1{
width:146px;
height:22px;
background-color:#FFFFFF;
font-size:11px;
font-family:Tahoma;
color:#444444;
line-height:12px;
padding:3 0 0 4px;
vertical-align:middle;
margin-left:10px;
}
.input2{
width:117px;height:20px;
background-color:#FFFFFF;
font-size:11px;
font-family:Tahoma;
color:#33576F;
line-height:12px;
padding:3 0 0 4px;
border-color:#B0B0B0;
border-width:1px;
border-style:solid;
vertical-align:middle;
}
.textarea{
width:127px;height:79px;
background-color:#FFFFFF;
font-size:11px;
font-family:Tahoma;
color:#33576F;
line-height:12px;
padding:3 0 0 4px;
border-color:#B0B0B0;
border-width:1px;
border-style:solid;
overflow:hidden;
}
Feb 28 '07 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
The problem is IE. Never, ever use IE as a guide. It is old, buggy and non-standards compliant. Always use any other browser as a reference as to whether your code is working.

First, validate and fix your css errors. You must always specify units when they are anything but zero.

Second, IE has a bug where is expands divs to contain floated elements. This is incorrect behavior.

Third, your doctype is incomplete and IE is in 'quirks mode' which is like 1998 all over again. Change it to this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Then revalidate your html and see what, if any, errors occur.

Once you fix all that, get it working in Firefox and then we can adjust for IEs quirks and bugs, if necessary.

You may find it helpful to read the stickies at the top of this board.

Feel free to ask for any help along those lines here.
Feb 28 '07 #2

P: 2
Okay, I changed the DOCTYPE and then validated/corrected the CSS errors. As soon as I put the strict doctype in, everything on the left hand page display is not aligned.

The problem with FF still not displaying correctly is still occurring. A simple refresh fixes it or if I just click the navigation link again, the page displays correctly. Any suggestions would be great!

By the way, now the alignment I mentioned that is "off" on the left hand is off when viewed in IE as well.
May 2 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
Ignore the PM I just sent you about opening a new thread. This one is fine but do read the contents. Your html still doesn't validate.
May 2 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.