CSS problems between FF, IE6 and IE7

[mcvickj]

have been beating my head against the wall for the last week trying to get the alignment issues hashed out between Firefox and IE. I started working on this site using Firefox and everything was going great. That is until I looked at it under IE.

Here is the link to the site. http://www.grdl.org/TEST/

I want to keep the spacing between #top_menu, #header, #content_outer and #footer. When viewing the site under IE the majority of the spacing between the 4 sections disappears. Also the location of the text inside #header moves.

I have been reading about the !important hack but either it is ignoring it or I'm not correcting the right lines in the CSS code. Here is a link to the current CSS code http://docs.google.com/Doc?id=ddth887t_0cddvjb

I am a newbie to HTML/CSS/PHP and I am learning as I go. The Web Developer addon for Firefox has helped me decipher some of the CSS.

I have found the code that I am trying to change so I can get the look to stay consistent between Firefox and IE.

} <---LN 141
#header {
background-color : #FFFFFF;
height : 58px;
background-repeat : repeat-x;
float : left;
background-image : url(../images/header.jpg);
margin-top : 10px !important;
margin-top : 20px;
margin-bottom : 10px !important;
margin-bottom : 20px;
border : 1px solid #000000;
width: 100%;
}



} <---LN 193
#content_outer {
width : 100%;
background-repeat : repeat-x;
float : left;
border : 1px solid #010101;
background-color : #FFFFFF;
color : #666666;
background-image: url(../images/content_bg.gif);
padding-bottom: 25px;
margin-bottom: 10px !important;
margin-bottom: 20px;
}

After reading up on the !important hack I am pretty certain I am using it correctly but IE6 and IE7 are still not displaying the site like I would expect. What is really strange is I used the same hack for the header to get the text aligned properly and it is working it IE6 but IE7 isn't working.

} <---LN 626
.maintitle {
font-family : "Courier New", Courier, monospace;
color : #0D1448;
font-weight : bolder;
float : left;
padding-left : 20px !important;
padding-left : 10px;
font-size : 36px;
padding-top: 19px !important;
padding-top: 2px;

}

Should I be going about this a different way? I'm hoping a fresh pair of eyes will be able to steer me in the right directions.

 

[MrChad]

Have you tried using a proven library such as the Yahoo UI toolkit? It takes a lot of the cross-browser guesswork out of web development.

 

[screw3d]

Get rid of the <?xml ..> thing on the first line. Then like MrChad said, head over to YUI and they do have good advice on this (look for the CSS reset).

 

[skrilla]

Originally posted by: screw3d
(look for the CSS reset).

Agreed... Try that out before you start with the hacks.

Eric Meyer has a decent one too.

 

[mooglekit]

Originally posted by: screw3d
Get rid of the <?xml ..> thing on the first line. Then like MrChad said, head over to YUI and they do have good advice on this (look for the CSS reset).

Very, VERY wrong...that is used by Joomla, necessary for the page to function

What does your template look like prior to Joomla tossing in all the module tables? Are you using tables for layout or CSS? It seems a bit like you're using them together, which can be somewhat counterproductive...

 

[screw3d]

Originally posted by: mooglekit

Originally posted by: screw3d
Get rid of the <?xml ..> thing on the first line. Then like MrChad said, head over to YUI and they do have good advice on this (look for the CSS reset).

Very, VERY wrong...that is used by Joomla, necessary for the page to function

What does your template look like prior to Joomla tossing in all the module tables? Are you using tables for layout or CSS? It seems a bit like you're using them together, which can be somewhat counterproductive...

Do you have any idea what the XML prolog does? Can you point me to wherever in Joomla's docs that says this? i really doubt removing the prolog will break anything.

The XML prolog forces IE to render the page in quirks mode regardless of the DOCTYPE, which means that the OP is going to have a tough time making his CSS look right on IE6.

BTW there's nothing wrong with using tables as long as they are used appropriately (tabular data).

 

[mooglekit]

Originally posted by: screw3d

Originally posted by: mooglekit

Originally posted by: screw3d
Get rid of the <?xml ..> thing on the first line. Then like MrChad said, head over to YUI and they do have good advice on this (look for the CSS reset).

Very, VERY wrong...that is used by Joomla, necessary for the page to function

What does your template look like prior to Joomla tossing in all the module tables? Are you using tables for layout or CSS? It seems a bit like you're using them together, which can be somewhat counterproductive...

Do you have any idea what the XML prolog does? Can you point me to wherever in Joomla's docs that says this? i really doubt removing the prolog will break anything.

The XML prolog forces IE to render the page in quirks mode regardless of the DOCTYPE, which means that the OP is going to have a tough time making his CSS look right on IE6.

BTW there's nothing wrong with using tables as long as they are used appropriately (tabular data).

Joomla is a CMS that uses templates for page layouts, and uses XML to correspond the template HTML to the CSS and image locations, then uses PHP to insert modules into the template...so yes, the XML is necessary, even if it isn't fun with IE. Valid, well-written CSS will work even in quirks mode with IE 6. Beyond that, he really doesn't have a choice to have the prologue or not, as it is inserted by Joomla when it creates the page from the template.

EDIT: Looks like Joomla has caught on to quirks mode and you can leave the xml prologue out somehow now...I'll have to dig up docs on how to do it

I agree with you that tables have their place, but this isn't really tabular data, it's a page layout. Just my personal opinion of course, but I'm of the opinion that CSS should be used for layout and tables should stay out of that arena when possible. 😉

 

[screw3d]

Originally posted by: mooglekit

Originally posted by: screw3d

Originally posted by: mooglekit

Originally posted by: screw3d
Get rid of the <?xml ..> thing on the first line. Then like MrChad said, head over to YUI and they do have good advice on this (look for the CSS reset).

Very, VERY wrong...that is used by Joomla, necessary for the page to function

What does your template look like prior to Joomla tossing in all the module tables? Are you using tables for layout or CSS? It seems a bit like you're using them together, which can be somewhat counterproductive...

Do you have any idea what the XML prolog does? Can you point me to wherever in Joomla's docs that says this? i really doubt removing the prolog will break anything.

The XML prolog forces IE to render the page in quirks mode regardless of the DOCTYPE, which means that the OP is going to have a tough time making his CSS look right on IE6.

BTW there's nothing wrong with using tables as long as they are used appropriately (tabular data).

Joomla is a CMS that uses templates for page layouts, and uses XML to correspond the template HTML to the CSS and image locations, then uses PHP to insert modules into the template...so yes, the XML is necessary, even if it isn't fun with IE. Valid, well-written CSS will work even in quirks mode with IE 6. Beyond that, he really doesn't have a choice to have the prologue or not, as it is inserted by Joomla when it creates the page from the template.

I agree with you that tables have their place, but this isn't really tabular data, it's a page layout. Just my personal opinion of course, but I'm of the opinion that CSS should be used for layout and tables should stay out of that arena when possible. 😉

It has nothing to do with well written CSS, it is about working around a bug in IE6 that's now fixed on IE7. It's just not worth hacking for it when you can have it mostly right on strict. Again, removing the XML prolog will not break the page, but fix it.

OP, just try it and report back 😉

 

[mooglekit]

Originally posted by: screw3d
It has nothing to do with well written CSS, it is about working around a bug in IE6 that's now fixed on IE7. It's just not worth hacking for it when you can have it mostly right on strict. Again, removing the XML prolog will not break the page, but fix it.

OP, just try it and report back 😉

Read my edit, I agree you're right on the XML prologue😀