CSS - How Do I Make My Site Fire Fox Friendly?

I'm trying to make a simple style sheet that will work with firefox, I can get one to work in Internet Explorer but not in firefox.

I have split up the stylesheet and tried to import it through php but when it came up, things like repeating-x or y factors didn't show up.

I need some help and heres an example of my style rather simple.

Code:

BODY
{
    font-size: small;
    margin: 5px;
    color: black;
    font-family: Courier New;
    background-color: #f1f1f1;
}
.lcolumnt
{
    background-position: right top;
    background: white url(images/css_bg_lcoumn.gif) no-repeat;
    font-size: small;
}
.lcum
{
    background-position: right center;
    background: white url(images/bg_lcoumn.gif) repeat-y;
}
TABLE
{
    font-size: 11.5px;
    COLOR: #000000;
    font-family: Courier New;
}
INPUT
{
    border-right: #a4a4a4 1px solid;
    border-top: #a4a4a4 1px solid;
    font-size: x-small;
    border-left: #a4a4a4 1px solid;
    color: #585858;
    border-bottom: #a4a4a4 1px solid;
    font-family: Courier New;
    background-color: #f4f4f4;
}
.contentheader
{
    background-position: left center;
    background: url(images/main_content_header.gif) no-repeat;
}
.mctop
{
    background-position: left top;
    background: url(images/mc_bg_top.gif) repeat-y;

}
.mcbg
{
    background-position: 0% 50%;
    background: url(images/mc_main_bg.gif) repeat-y;
}
A:link
{
    font-size: small;
    COLOR: black;
    font-family: 'Courier New';
    text-decoration: none;
}
A:visited
{
    font-size: small;
    COLOR: gray;
    font-family: 'Courier New';
    text-decoration: none;

}
A:hover
{
    font-weight: bold;
    text-decoration: underline;
}

I am having a problem with firefox adusting the height of two of the divs that act as containers for the inner most colums.

I have the outer most container (wrapper) and an inner container (contentbox) that will not expand to the height of the inner divs. See attachment

Any suggestions
Here is the CSS

Code:

/* -------------------------- CSS Document :: NGIT NS LAYOUT -------------------- */


.wrapper {
	border: 1px solid #000000;
	background-color: #b94b12;
	height:auto;
	width: 800px;
	margin-left:80px;
	margin-right:auto;
	left: auto;
	top: auto;

}
img {
	border: 0px;
}
body {
	background-color: 999999;
	margin-top: 10px;
	

}
.navbar {
	background-color: #b94b12;
	position: relative;
	height:auto;
	width: 20%;
	float: left;
	clear: right;

}
.leftcolumn {
	background-color: #FFFFCC;	
	height:auto;
	width: 260px;
	float: left;
	clear: right;
}
.rightcolumn {
	background-color: #FFFFCC;
	height:auto;
	width: 244px;
	float: left;
	clear: right;
}
.fullcolumn {
	background-color: #b94b12;
	width: 100%;
	
}
.contBox {
	height:auto;
	width: 800px;
	margin-left: auto;
	padding-top: 12px;
	padding-right: 14px;
	padding-bottom: 16px;
	padding-left: 16px;
	
}

.content {
	background-color: #FFFFCC;
	height:auto;
	width: 90%;
	padding-top: 12px;
	padding-right: 14px;
	padding-bottom: 16px;
	padding-left: 16px;
}

Hi gang,

I am working on a website that is 95% complete - but I am running into one bug. The CSS code that allows the thumbnails to have an information balloon pop-up is not working on Fire Fox or Safari. I have tried everything to the best of my knowledge - but I believe it needs an expert at this point. Any suggestions you can provide would be greatly appreciated.

The site is (URL address blocked: See forum rules) and the CSS file can be found at (URL address blocked: See forum rules)

The clothing thumbnails on the homepage will give you an example of what is happening. Basically - the column that the thumbnail appears in expands beyond its 125 pixel constraint and blows everything to the right. How it looks in IE is how it should look in Fire Fox and Safari as well.

Thanks for your time.

Aloha, Ka'o

I am trying to make a site for a program I am working on and every time I program the curved box threw Fire Fox it looks good. But when IE looks at it and messes it up!
Here is the site: www.bf2editor.org/Doom3Scripter

Here is the CSS code:

Code:

alink      {color: blue;}
ahover     {color: red}
avisisted  {color: blue}
body {background-color: black}

.curved-box
    {
    width: 400px;
    margin: 10px;
    background-color: #898989;
}

.curved-box b
    {
    background: #898989 url(bevel1.jpg) no-repeat left top;
    color: white;
    padding: 10px 20px 30px 343px;
}

.curved-box p
    {
    background: #898989 url(bevel2.jpg) no-repeat left bottom;
    margin: 0px;
    height: 20px;
    padding: 1px 1px 1px 0px;
    text-align: left;
}

.logo {margin-left: 6cm;}

Hi,

I'd like to have each page of my website print out "scaled to fit" on regular letter-sized paper in landscape orientation. The size of the background element that all page content fits on is 950px w x 750px h.

So, even if the user scaled one of the web pages onscreen, when they print it out on their inkjet, it should still print the full page, scaled to fit on the letter-sized paper.

These are the steps I know to take, but I am missing some info. Can anyone help me fill in the missing steps/info? If you would keep it in bulleted (1,2,3) format that'd be easiest for me to understand (still new at web work). I really appreciate it!


1. Put this code in the head section of each html web page:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />


2. Create a print.css file (What code goes in here?)

3. Link the print.css file to each html web page.

4. Upload all html web pages, and put the print.css file in the same root folder

Thank you!

http://www.hybridillusions.com/wordpress/

As you see, the top menu s having issues... One Firefox is displays fine, but on IE7, it is a mess!

What could be wrong? here is the location of the CSS file. I'm willing to compensate with the sell of this design, for any help on this issue. thank you.

(#top-menu CSS is controlling the parts that I'm havign issues with)

Ok look i want to make a dedicate for me and 5 of my freind we are in the same block. and we want a private server for 5 of our friends. so what is the command to do the ak rapid fire.


tyvm.

Dear all,

I want to add a print icon to my pages, which would print an alternate page (a printer friendly version).

I have the following code:
<link href="print.php?cli_id=2" rel="alternate" media="print" />

This works fine if I use the print icon in my browser, but if I use javascript:window.print(); within the page, it seems to ignore the alternate printer friendly page.

My page appears in frames, and I plan to remove the browser toolbar and replace with a custom one in the page once the application is complete.

Any ideas anyone?

many thanks, Mark

Thanks for taking the time to read my question.

I am having problems with my #MenuItem a:hover in IE. I really don't know why. It refers to the left nav on the page.

In IE the links at the bottm of the left nav list act funny. Place the mouse around the area between the text (the line separating the two boxes) It seems that IE is not sure which one to activate for the hover event.

If that makes no sense, just move you mouse over all the links in the left nav from top to bottom and hopefully you'll see what I mean.

It works fine in Fire Fox.... ya I know typical.

Any suggestions?

Brad

Pierced is my band name. I don't have any other URL to post this under for people to view.

http://www.pierced.ca/FeedProductionRecordsHelp.htm
http://www.pierced.ca/FeedProductionRecordsHelp.css

For a project I'm working on, for whatever reason, I cannot get that left side at the top. It appears fine in Opera 6, but in that browser, the content is far to the right.

I've been dealing with this all day. Usually, I do have minor problems with getting the float right, but I usually figure it out. For the life of me, though, I cannot figure out what I'm missing.

Any ideas out there? I appreciate it.

Tim Trice

I am using CSS to generate a printer-friendly webpage for Internet Explorer. The same CSS however is not working with Netscape or FireFox.

I am using the following doctype in my html file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

The contents within the <DIV> and <P> tags I am trying to hide using Print CSS works correctly in Internet Explorer 6.0. However, the contents are getting printed when Netscape 7.1 or FireFox is used.

Can someone help?

This is one of Many issues I have with fire fox, Basically I want a list of hyperlinks with no bullets. Normally I would set list-style-type = "none" for the <uL> tag and that would be it.

In fire fox, the list disappears. Also it appears that FF has issues with hyperlink in a list because even with out the style type set, the list disapears.


CSS Code:

a:link {
	font-family: "Bradley Hand ITC", "Monotype Corsiva";
	color: #999999;
}

ul{
margin:10px;
padding: 10px;
list-style-type: none;

}
li
 {
  font-family: "Bradley Hand ITC", "Monotype Corsiva";
	color: #999999;
}

html Code:

<div id="projects"> 
    <h1>Projects</h1>
    <P> 
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
    </ul></p>
    </div>

I've been trying to work this for 3 hours now, and I need help!!
My problem is that I get cursors on 3 of my links but not the other two.

Link to the site is http://borgweb.se/beta <- try the menu

css is:

Code:

body {
	min-width:1024px;
	background-color: #f5f3ec;
	margin-right: 0px;
	margin-left: 0px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#header {
	height:240px;
	width:100%;
	background-color: #1e1303;
	background-image: url(images/topback.png);
	background-repeat: no-repeat;
	background-position: 50%;
	margin-right: auto;
	margin-left: auto;
}
#header-logo{
	max-width:1024px;
	position:relative;
	width:1024px;
	height:240px;
	background-image: url(images/bw_logo.png);
	background-repeat: no-repeat;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#menu {
	background-image: url(images/menu.png);
	height: 76px;
	width: 75px;
	float: right;
	position: relative;
	top: 80px;
	right: 20%;
}

#home {
	height: 12px;
	position: relative;
	display: block;
	cursor: pointer;
}

#home a {
	background-position: 75px;

}

#aboutme {
	height: 12px;
	position: relative;
	top: -3px;
	cursor: pointer;
}
#portfolio {
	height: 12px;
	position: relative;
	top: -5px;
	cursor: pointer;
}
#blog {
	height: 12px;
	position: relative;
	top: -8px;
	cursor: pointer;
}
#contact {
	height: 12px;
	position: relative;
	top: -10px;
	cursor: pointer;
}
#container {
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	float: left;
}

html is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">

<div id="header-logo">

	
            	<div id="menu">
                
	            <div id="home" onclick="location.url('#');"></div>

                    <div id="aboutme"></div>

                    <div id="portfolio"></div>

                    <div id="blog"></div>

                    <div id="contact"></div>

		</div>

</div>
</div>
</body>
</html>

So I am just getting into designing with CSS, and really enjoying it. I put up this site for a friend, its my first coded by hand. I did it all with BBedit on a mac, and it looks fine on Safari and Firefox. However, as you can see, it looks terrible on IE, totally unusable, and I would accept any advice on how to fix it. The menu came from seco consultants
and uses whatever:hover to work in IE, though in this case it dont work. The layout is all screwed up too. Anyone want to offer some advice? Here's the site: dobsonfarm.com/connaught

Thanks very much,

Robin Turner

I am currently getting back into creating websites and learning new ways to make them. I like using Photoshop to create the graphics, but is there any way that I can use CSS to make it so that on all my pages the main portion on the site remains the same, such as the header, footer and side bars? Appreciate the help. BTW... the site address is Orpheus Designs .