Hey guys my site loads perfect in about every other browser... Even safari! But IE (almost all versions) has MAJOR issues. If anyone can help me fix them it would be awesome...
My site is http://www.justalkaboutit.com
My index.php:
Just Talk About It! Online Community
<?php include("http://www.justalkaboutit.com/includes/google_search.php"); ?>
<?php include("http://www.justalkaboutit.com/includes/main_nav.php"); ?>
Thinking about joining our community? Here's a few benefits:
Full access to forums, private messaging and other features.
Browse videos anytime in the multiple theaters.
Read, discuss or submit articles .
Ready to join? Sign up Here
$files = glob($_SERVER['DOCUMENT_ROOT'].'/includes/quick_facts/*');
include $files[array_rand($files)];
?>
<?php include("http://www.justalkaboutit.com/includes/main_footer.php");?>
My main.css
/* CSS Document */
body {
margin: 0;
text-align: center;
background-image:url(/images/backgrounds/bg_gradient.gif);
background-repeat:repeat-x;
background-color:#748498;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#153964;
}
.box-header {
font-weight:900;
font-size:16px;
text-decoration: none;
background: url(/images/main/underline.gif) repeat-x 100% 100%;
padding-bottom: 2px;
white-space: nowrap;
}
a:link {color: #163964}
a:visited {color: #2a6cbe}
a:hover {color: #2a6cbe}
a:active {color: #2a6cbe}
#container {
background-image:url(/images/backgrounds/bg_container.gif);
background-repeat:repeat-y;
position:relative;
text-align:left;
margin-left: auto;
margin-right: auto;
width: 1000px;
height:auto;
}
#content_left {
float:left;
width:608px;
height:auto;
}
#content_right {
float:right;
width:188px;
height:auto;
}
#header
{
width:1000px;
height:118px;
background:url(/images/backgrounds/bg_header.gif);
}
#footer
{
width:1000px;
height:220px;
background-image:url(/images/backgrounds/bg_footer.gif);
clear:both;
}
.copyright
{
text-align:center;
clear:both;
}
.column1
{
width:170px;
height:128px;
margin-top:85px;
margin-left:80px;
float:left;
overflow:hidden;
}
.column2
{
width:170px;
height:128px;
margin-top:85px;
padding-left:50px;
float:left;
overflow:hidden;
}
.column3
{
width:170px;
height:128px;
margin-top:85px;
padding-left:40px;
float:left;
overflow:hidden;
}
.column4
{
width:170px;
height:128px;
margin-top:85px;
padding-left:43px;
float:left;
overflow:hidden;
}
#google_search
{
position:absolute;
left: 660px;
top: 9px;
width: 230px;
height: 36px;
}
/* Side Box Alignment */
.side-box-right {
display:block;
float: right;
margin-right:100px;
margin-top:10px;
max-height:500px;
overflow:auto;
clear:right;
}
.side-box-left {
display:block;
float: left;
margin-left:80px;
margin-top:10px;
max-height:500px;
overflow:auto;
clear:left;
}
.theater-box-center {
display:block;
float: left;
margin-left:85px;
margin-top:10px;
clear:both;
}
/* Side Box Small */
.side-box-small {
width: 188px;
background: url(/images/backgrounds/small_box_middle.gif) top left repeat-y;
}
.side-box-small .side-box-small-title {
background: url(/images/backgrounds/small_box_top.gif) top left no-repeat;
}
.side-box-small .side-box-small-title-contents {
background: url(/images/backgrounds/small_box_middle.gif) bottom left no-repeat;
padding-top:10px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
border: 0;
margin: 0;
}
.side-box-small .side-box-small-contents {
background: url(/images/backgrounds/small_box_bottom.gif) bottom left no-repeat;
padding-top:0px;
padding-right:20px;
padding-bottom:30px;
padding-left:10px;
margin: 0;
}
.side-box-small p {
padding-left:0px;
padding-top:0px;
margin-top: 0;
}
/* Side Box Large */
.side-box-large {
width: 608px;
background: url(/images/backgrounds/large_box_middle.gif) top left repeat-y;
}
.side-box-large .side-box-large-title {
background: url(/images/backgrounds/large_box_top.gif) top left no-repeat;
}
.side-box-large .side-box-large-title-contents {
background: url(/images/backgrounds/large_box_middle.gif) bottom left no-repeat;
padding-top:10px;
padding-right:10px;
padding-bottom:5px;
padding-left:25px;
border: 0;
margin: 0;
}
.side-box-large .side-box-large-contents {
background: url(/images/backgrounds/large_box_bottom.gif) bottom left no-repeat;
padding-top:0px;
padding-right:20px;
padding-bottom:30px;
padding-left:25px;
margin: 0;
}
.side-box-large p {
padding-left:0px;
padding-top:0px;
margin-top: 0;
}
/* Theater Box */
.theater-box {
width: 828px;
background: url(/images/backgrounds/theater_box_middle.gif) top left repeat-y;
}
.theater-box .theater-box-title {
background: url(/images/backgrounds/theater_box_top.gif) top left no-repeat;
}
.theater-box .theater-box-title-contents {
background: url(/images/backgrounds/theater_box_middle.gif) bottom left no-repeat;
padding-top:10px;
padding-right:10px;
padding-bottom:5px;
padding-left:25px;
border: 0;
margin: 0;
}
.theater-box .theater-box-contents {
background: url(/images/backgrounds/theater_box_bottom.gif) bottom left no-repeat;
padding-top:0px;
padding-right:20px;
padding-bottom:30px;
padding-left:25px;
margin: 0;
}
.theater-box p {
padding-left:0px;
padding-top:0px;
margin-top: 0;
}
p.main_story_text
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#153964;
}
.popular_content_text a
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
text-decoration:none;
color:#153964;
}
.popular_content_text a:hover, .popular_content_text a:active
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
text-decoration:underline;
color:#153964;
}
.popular_content_small_text a
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#153964;
}
.popular_content_small_text a:hover, .popular_content_small_text a:active
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:underline;
color:#153964;
}
First, fix up your html
First, fix up your html validation errors - there are 63 of them!
Second, thanks for providing a link to the site, since that makes debugging it ever so much easier. No need to post code if you post a link, since with a link we can easily see it all.
BUT - you no basis complain about how IE or any other browser shows your code until you feed them valid html. That's even more important than valid CSS, which at least you've taken care of. But CSS rules assume valid html! If the assumption isn't true CSS can't be expected to work very well.
You shouldn't be using tables for layout like that, either. We definitely frown on that and it has no place in modern design practices.
So fix the html errors and then if the problems persist (and they may), come on back. Oh, and lose the tables and replace them with appropriate semantic elements, too.
Thanks for the quick reply..
Thanks for the quick reply.. After viewing my site in the HTML validation I am actually confused on how to fix most of the problems... Any easy way to determine what they are saying is wrong?
Thanks,
Bill
Well, you could always get
Well, you could always get the "Html validator" extension for Firefox and run it through that to make your code valid. Then compare the two and see the differences. I prefer to figure out the errors myself because then I learn more.
All your "IMG" tags should have "alt" attributes that describe the image so that someone who can't see it will know what it is, for a start.
Unless this is an old page you are fixing up, I'd change the Doctype to a STRICT one, which will likely create even more errors, but I usually find them easier ones to figure out, and if you start at the top you often find that fixing one fixes others as well so it's less work than you might suppose.
But you have to learn not to use tables the way you do, as well. The goal is to write
POSH code.
Well I actually used HTML
Well I actually used HTML tidy to fix everything in one shot... heres my result: http://www.justalkaboutit.com/test.php Though the tops are gone, the same problem occurs in IE... So this is not going to solve the problem.. :mad:
Any other suggestions? =)
Looks OK in IE6 to me, so
Looks OK in IE6 to me, so perhaps you could explain more clearly what the problem is. All you said in your first message was that there were "major problems", but I don't see anything I would call "major".
Oh, and you are still using tables for layout. :bigoops:
I didnt have a look in ie6
I didnt have a look in ie6 lately but IE7 has my popular topics, quick facts and affilites shifted off of the page to the right. And what do you mean by having the layout in tables... :?
I run Windows 2000 here at
I run Windows 2000 here at home, so I can't have IE7. A lot of other folks still use IE6, in fact it is still, alas, the most popular browser out there. You are using tables for your form and for some of your content, but it is not tabular content so you shouldn't be using them. There are plenty of articles on the web and in this forum about the proper and improper use of tables.
IE 6 doesn't know how to
IE 6 doesn't know how to add, so your page is breaking because IE 6 adds something like width+margin+padding to get the width of a box. I'm probably not 100% right on that, but it's something dumb. Generally you can shave down the width of your box using a conditional style for IE to the point where your boxes take the correct width.
I'll have a look at the other errors now.
If you need information on conditional styles:
http://csscreator.com/node/28011
See my post in that thread.
More solutions:
IE 6 has a white/gray image under your copyright notice because you haven't told your footer background not to repeat. If you add a declaration for background-repeat: no-repeat; you'll see that white go away. You could also use the condensed property of background: url(image url) no-repeat; to do this.
Not sure where your ul#main_nav gets its styles as I don't see it in your CSS, but I don't really even see a need to change it. Sure, it is centered and looks differently than Firefox, but I often have differences between IE and Firefox when necessary.
Not too sure on this one, but you might have better luck with your footer columns if you positioned them with margins and not padding.
Ok thanks, added the
Ok thanks, added the no-repeat to the footer. Not sure if this fixed the problem. But does anyone see why the popular topics, quick facts, and affiliates all shift to the right in IE and Safari?
Ed Seedhouse wrote:I run
I run Windows 2000 here at home, so I can't have IE7. A lot of other folks still use IE6, in fact it is still, alas, the most popular browser out there. You are using tables for your form and for some of your content, but it is not tabular content so you shouldn't be using them. There are plenty of articles on the web and in this forum about the proper and improper use of tables.
The only place that forms are used it the google search and the google ads.
Ed Seedhouse wrote:I run
I run Windows 2000 here at home, so I can't have IE7. A lot of other folks still use IE6, in fact it is still, alas, the most popular browser out there. You are using tables for your form and for some of your content, but it is not tabular content so you shouldn't be using them. There are plenty of articles on the web and in this forum about the proper and improper use of tables.
The only place that forms are used is the google search and the google ads.
They don't "shift to the
They don't "shift to the right" they get pushed down because of widths getting added to padding. I addressed this in my previous post - in the very beginning.
Aequitas wrote:They don't
They don't "shift to the right" they get pushed down because of widths getting added to padding. I addressed this in my previous post - in the very beginning.
oops. missed that! Sorry =P. Let me try to fix that then I will post my results!
Actually, they do
Actually, they do technically shift to the right, they shift too much - but that's just a semantical debate, ultimately they get pushed down.
If you mess with the width and padding in a stylesheet that affects Firefox, you're going to screw yourself up further. Be sure to use conditional styles as I suggested and linked to.
Ok I read
Ok I read http://csscreator.com/node/28011 <-that post on seperate CSS for different browsers. But what CSS should I change for IE then firefox?
As I said previously, IE
As I said previously, IE will calculate the width by adding the padding to the width you defined for the box. So, shave down the widths of the left and right columns in your IE-specific style sheet. You shouldn't see any change in the actual appearance, but they will be side by side once you've cut enough off.
Well, having playing with it
Well, having playing with it I wonder if margin-right:100px is the way to go? It works fine is there any problems with this?
Found it! The answer was not
Found it! The answer was not to shave to the width, but to add to it! It works now fine with one CSS in IE7 but after looking at these http://browsershots.org/http://www.justalkaboutit.com/ it now bumps them all the way down at the bottom of the page & the footer is off a bit..in IE5-6
I am 90% certain that the
I am 90% certain that the problem lies in the width/padding when being interpreted by IE<7. Please try reducing the widths.
When I tried reducing the
When I tried reducing the widths it actually made the right "box's" move further out to the right. I will be sure to try again when I get home. Going to work will be back around 10pm ET.
Thanks alot for your help.
~Bill
It should make the right
It should make the right move further right, eventually it will go far enough right that it will pop up to the right of the left column. I'm leaving work shortly, but I'll have another look at your CSS when I get home to make sure this is the expected outcome.
Aequitas wrote:IE 6 doesn't
IE 6 doesn't know how to add, so your page is breaking because IE 6 adds something like width+margin+padding to get the width of a box.
Well that's what the standards require!!
I'm probably not 100% right on that
But you are 100% wrong! IE6 when you give it a proper standards mode triggering doctype declaration renders widths and heights correctly to the standard.
When you have no doctype or a non standards triggering one it fails to do that for padding.
jagsrocknfl wrote:The only
The only place that forms are used is the google search and the google ads.
Well you shouldn't be using tables within forms unless the form content is actually tabular in nature. Yours isn't. I don't know about the google adds, but the google search stuff can be easily recoded so as not to use a table.
Ok, will be changing that
Ok, will be changing that shortly. Any advice on fixing my site in IE Ed?
jagsrocknfl wrote:Ok, will
Ok, will be changing that shortly. Any advice on fixing my site in IE Ed?
Well as I said I don't have IE7 so it's pretty hard to diagnose what I can't see.
Its in anything below IE7,
Its in anything below IE7, IE7 behaves fine, the screenshots can be seen here: http://csscreator.com/comment/reply/27997#comment-form ( Screenshot Request Group 3)
Ed Seedhouse wrote:Aequitas
Aequitas wrote:IE 6 doesn't know how to add, so your page is breaking because IE 6 adds something like width+margin+padding to get the width of a box.
Well that's what the standards require!!
I'm probably not 100% right on that
But you are 100% wrong! IE6 when you give it a proper standards mode triggering doctype declaration renders widths and heights correctly to the standard.
When you have no doctype or a non standards triggering one it fails to do that for padding.
I always have a good doctype, and I always see problems with IE 6 messing up my two column layouts.
Jags - the site appears to be down. If you get it back up, I'll have another look for you.
*Am transferring hosting
*Am transferring hosting will be done soon
The sites backup!
The sites backup! :thumbsup:
Aequitas wrote:
I always have a good doctype, and I always see problems with IE 6 messing up my two column layouts.
IE6 has many bugs still, and especially with floats and positioning. This does not change the fact that in strict mode it does at least get the box model right.
The box model requires that margins, borders, and padding are all supposed to make the overall box larger. A lot of people don't understand that and think it is wrong, but that's what the CSS standards call for. I didn't understand it myself for quite a long time and wrongly assumed that padding should reduce the text area without changing the box size.
A good doctype may not be enough to trigger standards mode. Some perfectly good doctypes leave IE6 in quirks mode. Also, anything at all before the doctype declaration, even a comment or a blank line, leaves IE6 in quirks mode no matter how correct your doctype is.
But even putting it into standards mode certainly does not fix all of IE6's errors - far from it. It does fix a great big error, but by no means all of it's errors.
So, you're saying that one
So, you're saying that one of two things is happening if IE 6 renders my columns differently than IE 7 and Firefox?
1) I'm in quirks mode
2) My box width+padding+border+margin is too wide
?
I will try to look at your site later today jags.
I apologize for not being of
I apologize for not being of more help, I realize I must sound like a broken record here. The below screenshot outlines the elements that are your two columns. I still believe that if you reduce widths and paddings in an IE 6-only style sheet, you'll see the two columns be side by side.
Will try it. What program
Tried it again, moved to 100px, less than that, more than that, same result... Even the main nav at the top is centered for some reason.. And the footer is thrown off aswell.
Did you shrink the boxes
Did you shrink the boxes within it as well? If not, then they're still forcing the columns to expand.