FireFox v. IE CSS Disaster! Need Some Major Help!

[Course-Notes.Org]

Alright, I spent all day yesterday trying to bend Solarflare II to my will. And it actually somewhat worked... for FF that is. I didn't think to check IE to make sure the CSS and HTML changes I was making were working.

The site is located at:

http://www.course-notes.org/globalfusion/

Now after I'm practically done with site design, I realize that IE looks like ****.

Where do I go from here?

Any help would be greatly appreciated

-Chris

[Tattoo]

eek that does look bad in IE. Run your css thru a validator such as http://jigsaw.w3.org/css-validator/validator-uri.html that might shed some light on your problem

[silexian]

Originally Posted by Course-Notes.Org

Alright, I spent all day yesterday trying to bend Solarflare II to my will. And it actually somewhat worked... for FF that is. I didn't think to check IE to make sure the CSS and HTML changes I was making were working.

The site is located at:

http://www.course-notes.org/globalfusion/

Now after I'm practically done with site design, I realize that IE looks like ****.

Where do I go from here?

Any help would be greatly appreciated

-Chris

Hello

well, wahooo ... quite a mess !!!
i can't help you, but i suggest you to use Dreamweaver to help you.
Or Mozilla NVU (which is Open Source and is like Dreamweaver).
Both produce well formed and valid HTML and CSS.

Silexian

[mamboindo]

Originally Posted by Course-Notes.Org

Alright, I spent all day yesterday trying to bend Solarflare II to my will. And it actually somewhat worked... for FF that is. I didn't think to check IE to make sure the CSS and HTML changes I was making were working.

The site is located at:

http://www.course-notes.org/globalfusion/

Now after I'm practically done with site design, I realize that IE looks like ****.

Where do I go from here?

Any help would be greatly appreciated

-Chris

This indeed looks loke S***

Maybe some of this of Tony helps

http://forum.mamboserver.com/showthr...hlight=firefox

good luck
___________________________
Leo Lammerink aka Mamboindo

[Course-Notes.Org]

Here is my CSS document. The w3 wasn't resolving so I looked for another validator. I used this one: http://www.htmlhelp.com/tools/csscheck/

The results were too long to post but if you want to check it just paste the below CSS document in there.

I really don't have much of a clue of what I'm doing with CSS, I'm pretty much just script kiddy-ing it. I understand how it effects the code most of the time, but me coding it from scratch just really doesn't happen.

I only have like $5 in my paypal account, but I would be more than willing to give it to someone if they code fix the error

			/* CSS Document */


.clr {
	clear: both;
}

.outline {
  border: 1px solid #cccccc;
  background: #ffffff;
	padding: 2px;
}

#pathway_outer {
	width: 635px;
  float: left;
  margin-bottom: 2px;
	margin-right: 2px;
}

#pathway_inner {
  float: none !important;
  float: left;
	border: 1px solid #cccccc;
	height: 26px;
background: url(../images/button_top_bg.png) repeat-x;
}

#pathway_text {
  overflow: hidden;
	float: left;
	display: block;
	padding-top: 4px;
	height: 18px;
	padding-left: 5px;

}

a.pathway {
}

#buttons {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 50%;
background: url(../images/button_top_bg.png) repeat-x;
}


ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 12.5;
}

ul#mainlevel-nav li
{
	display: block;
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	width: auto !important;
  width: 15%;
	font-size: 12.5px;
	line-height: 26px;
	white-space: nowrap;
	border-left: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{

	display: block;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #333333;
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #ffcc00;
	background: #D84203;
}


#search_outer {
	float: left;
	width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
	padding: 0px;
  height: 26px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	border: 0px;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 12.5px;
	color: #ff6600;
}

#header_outer {
	text-align: left;
	border: 0px;
	margin: 0px;
}

#header {
	float: left;
	padding: 0px;
	margin-right: 2px;
	width: 800px;
	height: 213px;
	background: url(http://www.course-notes.org/globalfu...ies/usgov2.jpg) no-repeat;
}

#top_outer{
	float: left;
	width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
	margin-top: 2px;
	width: 165px;
}

#left_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-left: 2px;
	/** border: 1px solid #cccccc; **/
	float: left;
	width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	float: left;
	padding: 0px;
	height: 70px;
}

#poweredby_inner {
	float: right;
width: 159px;
height: 70px;
  border: 1px solid #cccccc;
padding: 2px;

}

#right_outer {
	margin-left: 2px;
	width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;
}


.user1_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

.user2_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

table td.body_outer {
	padding: 2px;
	border: 1px solid #cccccc;
}



#active_menu {
	color:#FFCC00;
	font-weight: bold;
}

a#active_menu:hover {
	color: #E15704;
}

.maintitle {
	color: #ffffff;
	font-size: 40px;
	padding-left: 15px;
	padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
	float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
	margin-right: 10px;
	float: right;
}

#footer {
	text-align: center;
	padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png) ;
background-repeat: no-repeat;
background-position: 0px 3px;
}


td {
	text-align: left;
	font-size: 11px;
}



body {
	margin: 15px;
	height: 100%;
	padding: 0px;
	font-family: Arial, Helvetica, Sans Serif;
	font-size: 11px;
	color: #333333;
	background: #ffffff;
}

/* mambo core stuff */
a:link, a:visited {
	color: #ff6600; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #C43C03;	text-decoration: none;
	font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
} 

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-left: 4px;
}

.button {
  color: #ff6600;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
	padding: 2px;
	border:solid 1px #cccccc;
	background-color: #ffffff;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-right: 5px;
}

.contentheading {
	height: 30px;
	background: url(../images/contenthead.png) top left repeat-x;
	color: #666666;
	text-indent: 15px;
	font-weight: bold;
	font-size: 11px;
	white-space: nowrap;
}



.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #cccccc;
	text-align:left;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

table.moduletable th {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
	background-color : #ffffff;
}

.sectiontableentry2 {
	background-color : #f9f9f9;
}

.small {
	color: #999999;
	font-size: 11px;
	font-weight: bold;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #999999;
	font-size: 11px;
	font-weight: bold;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #999999;
	font-size: 11px;
	font-weight: bold;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #333333;
}

a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ff6600;
	text-align: left;
}

a.sublevel:hover {
	color: #C43C03;
	text-decoration: none;
}
.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0px 2px 0px 2px;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

[Course-Notes.Org]

would you think it would be better to just start from scratch and do it step by step and see what screws with the IE formatting?

[ihatesafemode]

Starting from scratch isn't really a good idea.

Just declare different margins and padding for FF and IE.


I'll try replacing the template on my dev machine with yours and see if I can do something.

I'll let you know.

UPDATE: Way too messy without having access to your setup and knowing how you have each module configured.

Anyone here know of some sort of master configuration file that Mambo uses?

Something that says,

Module 'X' goes into Position 'Y'
Module 'B' goes into Postiion 'D' etc....

[mambo_chris_au]

I would think that your CSS won't validate untill such time that you make the pages XHTML valid.
In my opinion that should be your first priority.
That is not very hard to do when using http://validator.w3.org to check your progress in doing so. Do a step at the time. It is very easy but takes time.

[ihatesafemode]

Originally Posted by mambo_chris_au

I would think that your CSS won't validate untill such time that you make the pages XHTML valid.

Chris, Mambo sites don't vaildate with out modification. Some people here have made these changes and they get XHTML 1.o Strict. Mambo without mod is set for XHTML 1.0 Trans.

[mambo_chris_au]

Originally Posted by ihatesafemode

Chris, Mambo sites don't vaildate with out modification. Some people here have made these changes and they get XHTML 1.o Strict. Mambo without mod is set for XHTML 1.0 Trans.

I believe that is what I said.

[ihatesafemode]

Originally Posted by mambo_chris_au

I believe that is what I said.

True True.

I'm fussy too, I want it all to be 1.1 but thats just me.

[Time Clock Guy]

Dealing with a messy firefox vs ie layout. the main thing I am seeing is that ie does not seem to pay attention to padding-left padding-top etc css directives.

I would post the url but the site is changing every few minutes as I work on it. here is the code that seems to be ignored in ie and works like a charm in Firefox:

.blurbtext
{
padding-top: 5px;
padding-left: 18px;
padding-right: 20px;
padding-bottom: 5px;
}

any idea why firefox plays nice an ie ignores me?

[thambi]

hi,

something i did to adjust the header width to display in monitors of different sizes. but my website postion shifted.

www.samratbazaar.com.sg

for fifteen days i am working no result yet. in IE still worse

pls somebody help

thanks

[Elpie]

Originally Posted by Time Clock Guy

any idea why firefox plays nice an ie ignores me?

Yep. Firefox is standards compliant and IE is not. The best way to handle this is to design for Firefox then add a second css file, called through a conditional statement, for IE.

There are a lot of tips and resources about templates on the official Mambo forums so if you need more help please post there. The link to the forums is in my sig, below.

[Elpie]

Originally Posted by thambi

hi,

something i did to adjust the header width to display in monitors of different sizes. but my website postion shifted.

www.samratbazaar.com.sg

for fifteen days i am working no result yet. in IE still worse

pls somebody help

thanks

You have got columns that are too big for their containing divs thambi. If you use Firefox, download the webdeveloper plugin for it and have a look at your page elements - this will make it easy for you to see which sizes need to be adjusted. If you have any more problems please post in the official Mambo forums in the templates forum and people will help out. The link to the official forums is below.

[thambi]

hi elpie, thanks a lot . i would give a serious try thanks again