Mozilla CSS Not Working!

odntuk · Joined: 29 Aug 2005 Posts: 3

Hello everyone!

I'm a freelance web designer and I have just recently learned and implemented CSS with web design for my clients. I was
I'm new at CSS and have begun using it because I was getting tired of having to completely redesign a table based template anytime a client wanted to make minor changes.

But anyways...

I just got done working on a website for a client at http://www.onlineproposalmanagement.com and it looks perfectly fine on IE yet looks completely distorted on Firefox. He alerted me to this just recently and I kind of freaked out b/c it didn't even cross my mind to check other browsers.

The site runs off a several different CSS files for various portions of the template.

Here's the code for the affected template areas (i'm only including the template fields to save you time looking through things):

/* BEGINNING OF LEFT COLUMN CODE */

#leftcolumn{
width:15%;
height:100%;
padding-top:20px;
float:left;
}

/* END OF LEFT COLUMN CODE */

/*BEGINNING OF MIDDLE COLUMN CODE */

#middlecolumn{
width:55%;
min-width:50%;
height:100%;
float:left;
padding-top:20px;
padding-bottom:20px;
padding-left: 20px;
padding-right: 5px;
background-image:url(images/mc_bckgrnd.gif);
background-position:right;
background-repeat:repeat-y;
}

/*END OF MIDDLE COLUMN CODE*/

/* BEGINNING OF RIGHT COLUMN CODE */

#rightcolumn{
width:15%;
height:100%;
float:left;
padding-left:5px;
}

/* END OF RIGHT COLUMN CODE */

/* BEGINNING OF TEMPLATE CODE */

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

#mainwrap {
margin-left:auto;
margin-right:auto;
width:100%;
min-width:700px;
border:2px solid #000;
border-color:#000000;}

#headervtop {
height:20px;
top:0px;
left:0px;
width:100%;
min-width:700px;
border-bottom:2px solid #fff;
background-color:#333333;
text-align: right; }

#headertop {
height:70px;
left:0px;
width:100%;
min-width:700px;
background-color:#E4E4E4;
text-align: right;
background-image:url(images/checkbox.gif);
background-repeat:no-repeat;
background-position:right; }

#logo {
height:64px;
width:186px;
position:absolute;
top:33px;
left:30px;
background-image:url(images/logo.gif);
background-repeat:no-repeat;}

#contentarea{
width:100%;
height:420px;
background-color:#fff;
text-align: left; }

#footer {
width:100%;
height:15px;
float:left;
min-width:750px;
bottom:0px;
background-color: #333333;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
text-align:center;
padding-top:3px;
font-weight:bold;
}

/* END OF TEMPLATE COLUMN CODE */

I tried loading the code with the following two forms of code but to no avail:

<link rel="stylesheet" type="text/css" href="template.css" media="all" />
<link rel="stylesheet" type="text/css" href="left.css" media="all" />
<link rel="stylesheet" type="text/css" href="middle.css" media="all" />
<link rel="stylesheet" type="text/css" href="right.css" media="all" />
<link rel="stylesheet" type="text/css" href="navigation.css" media="all" />
<link rel="stylesheet" type="text/css" href="general.css" media="all"/>

- and -

<style type="text/css">
@import url(template.css);
@import url(left.css);
@import url(middle.css);
@import url(right.css);
@import url(navigation.css);
@import url(general.css);
</style>

Any help will be greatly appreciated. Also, let me know if you need to see anything else to help me.

Again, the afflicted website is http://www.onlineproposalmanagement.com

Thanks,

OD Ntuk
Freelance Web/Graphic Designer

Corey Bryant · Posted: Mon Aug 29, 2005 6:53 pm

You can put all the CSS in one file. This might be a lot easier.

Your content area, you might add clear: both

I would get rid of the min-wdith in the mainwrap as well. The CSS code is not valid actually - that would be a start. Also - adding float: left to your columns should help as well.

Some other threads to check out for advanced CSS can be found in the International Web Developers Network, otherwise let me know and I can possibly walk you thru re-doing it to delete some of the code that is not needed

odntuk · Joined: 29 Aug 2005 Posts: 3

Thanks for the help!

I added some float lefts and some clears which has made the design more like that of the IE version.

I still have two problems remaining:

1. The menu up top is reversed. In IE I rotated the code to make it the other way around.

Here's the HTML code for the menu:

<div id="headervtop">
<div id="top_navcontainer">
<ul id="top_navlist">
<li><a href="contact.htm">Contact Us</a></li>
<li><a href="sitemap.htm">Site Map</a></li>
<li><a href="privacy.htm">Privacy Policy</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
</div>

Here's the CSS code for the menu:

/*Beginning of Top Navigation */

#top_navcontainer { margin-left: 30px; }

#top_navlist
{
list-style: none;
padding: 0;
margin: 0;
font: 11px Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: right; padding-right: 7px; padding-top: 2px;
}

#top_navlist a:link {
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
#top_navlist a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
#top_navlist a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}

#top_navlist li
{
display: inline;
padding: 0;
margin: 0;
}

#top_navlist li:before { content: "| "; }
#top_navlist li:first-child:before { content: ""; }

/*IE workaround*/
/*All IE browsers*/
* html #top_navlist li
{
border-left: 1px solid white;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #top_navlist { height: 1%; }

* html #top_navlist li
{
display: block;
float: right;
}

/*End hide*/
/*Mac IE 5*/
* html #top_navlist li:first-child { border-left: 0; }

/*End of Top Navigation*/

2. The footer doesn't sit under the content on pages with less content such as the products page, and the about us page.

Here's the CSS code for the footer:

#footer {
width:100%;
height:15px;
float:left;
min-width:750px;
bottom:0px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
text-align:center;
padding-top:3px;
font-weight:bold;
}

Could you advise me on how to get the menu links to be ordered in the same fashion in IE and Firefox and on how to get the footer to remain under the content?

I've added the content to my server available at:
http://opa.mywiredhost.com

Thanks for any help!

OD Ntuk
Web/Graphic Designer

Corey Bryant · Posted: Tue Aug 30, 2005 4:11 am

Can you let me know what is reversed? I mean the text - where it is now and where it should be?

For the footer, check out Footer, never is a footer!

odntuk · Joined: 29 Aug 2005 Posts: 3

Corey,

If you view the code of the top navigation bar in the top right in IE then in Firefox you'll see that the code gets reversed in Firefox.

I listed the information in reverse order to have it show the way I'd like in IE.

Here's the html I used:

<div id="top_navcontainer">
<ul id="top_navlist">
<li><a href="contact.htm">Contact Us</a></li>
<li><a href="sitemap.htm">Site Map</a></li>
<li><a href="privacy.htm">Privacy Policy</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>

I posted the CSS in a previous message. I just don't get why I can't list it as such and have it work:

<div id="top_navcontainer">
<ul id="top_navlist">
<li><a href="index.html">Home</a></li>
<li><a href="privacy.htm">Privacy Policy</a></li>
<li><a href="sitemap.htm">Site Map</a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>
</div>

Any help would be greatly appreciated!

OD Ntuk
Graphic/Web Designer

Corey Bryant · Posted: Tue Aug 30, 2005 2:54 pm

It's just easier for me to know exactly what I am looking for rather than trying to switch back and forth and read line by line, that was why I was asking.

Do you need to use ordered lists in the top nav bar?

There are some other threads in that forum that might be able to help you. I would consider reducing a lot of the CSS actually, or ask at the IWDN and see if they have a hack for IE