CSS - Fire Fox Question And Css Help.

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.

I have this proplem on my site where it looks perfect in IE but in Fire Fox it looks like cr@p.
http://www.bf2editor.org/

I want my CSS to look the same way on Fire Fox how can I fix this? This is my CSS doc

Code:

a:link    {color: black; text-decoration: underline}
a:visited {color: black; text-decoration: underline}
input {font-size: 12px; font-weight: bold;}



body      {
background-color: 000000; 
margin:0;
padding:0;
line-height: 1.5em;
}
hr         {color: black}

.top{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top2{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top3{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
margin-top: -48;
}



div#news
{
   background-color: E5E5E5;
   width: 140px;
   margin-top: 30;
   margin-left: 22;
}

div#login
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

div#about
{
   background-color: #CCCCCC;
   width: 797px;
   height: 500;
   margin-top: -2;
   margin-left: 52;
}


div#who
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

}

div#info
{
   background-color: 898989;
   width: 600px;
   margin-top:  1cm;
   margin-left: 4cm;
}
   div#info h2 { background: url( bar.png ); color: #ffffff; 
background-repeat: repeat-x;
}
   div#p { }


/*Page Layout*/



#maincontainer{
width: 969px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}


#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 100px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 160px; /*Width of left column*/
height: 836px;
margin-left: -990px; /*Set left margin to -(MainContainerWidth)*/
background: #898989;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

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

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>

Greetings all,

Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it.

I was wondering if there are any good references/books you'd suggest purchasing or looking at online?

Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this:
___________________________
|[ i m a g e ]....................text |

However, it comes out looking like this:

___________________________
|[ i m a g e ]..........................|
|.....................................text|

I suspect it is due to the align: right of the text, but am not sure how to correct it.

Relevant snippets of code:

testpage.html
Code:

...
<div class=header>
<img src="image.jpg"><h1>TEXT</h1>
</div>
...

style.css
Code:

...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}

#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}

Thanks for any advice.

Hi,

I have three <div>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div id="container" style="width:500px;height:700px;background-color:green;">
     <div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div> 
     <div id="three" style="float:right;width:100px;background-color:red;">three </div> 
     <div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm  vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
    
 </div>
 </BODY>
</HTML>

I noticed when I increased the % width of my <div two> it goes below my <div three>

I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior?

If you would be so kind as to visit www.footbagfreaks.com, you will see a sample site using css. On the main navigation, I am curious about something. What establishes the height of each nav element? They are all uniform. What I would like to do is this, which I hope I can explain. I would like to have a set dimension for each nav element, lets us just say each to be 30px high, by 150px wide. I would like to specify the area, 30 x 150 have a rectangular trans. gif as its background and the initial color of the bg would be the same as the trans. gif. On a mouseover, the bg color would change, and thus would show the the new color through the portion of the trans gif which is transparent. Basically, the same effect as on the logo on the top left of the page. If someone can help me with this, I'd appreciate it so much.

If I have a link that I want to display in the center of a module that no matter what size a user chooses it stays centered..IE. via user config a user can make it 100px or 400px.. [module width]

The question is how can I center a link and no matter what the user picks for a width as stated above the link stays centered?

Hi everyone. I was wondering if it was possible to create a link from already existing text on a page by reworking the styles in the cssstylesheet file? I'm currently editing around a shopping cart for a client but i was wondering if I could take a bit of a shortcut using css instead.

Thanks for your time.

Pablo

OK .. I have 5 layers surrounding each one of my menu links .. the layer over-laps another layer with the main content in. Now if you look here you will see what i mean ....


http://www.geocities.com/jezman2002/index.html

You can see four of the layers but the top one i need to be black AFTER it crosses the line !!!! Do u see what i mean

I just wondered if there was any easy way to do this ???

-Thanks-

i am having a small issue with font size in browsers.

i am using smarty template engine to create websites, i have originally created the html pages using css after slicing in photoshop. the pages look similar with respect to font sizes in all browsers

when i integrate this html page into smarty i am using a copy of a template in smarty to create a website, so this copy also has a css file, i have commented most of the code in this css file which is in the smarty folder and i have used my css code which i initially created.

the problem i am facing is with firefox only and all other browsers work fine

only in firefox the text for h1, h2, p, ul li, a... etc are all appearing 1px smaller in size when compared to all other browsers

i have tried using !important and inline styles however only firefox is displaying the text in the entire page 1px smaller compared to all other browsers which is not consistant.

i have the following in the css file
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #ffffff;
font: normal 12px Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}



please advice.

any help will be greatly appreciated.

thanks.

I am currently working on a site: www.wirelessguy.net

I am trying to get it so that when links are clicked, the pages load in the middle white section. I don't have the links made yet, but I've been messing with it with text only.

I made the site template in a php file, then I include that file on all my pages that I create.

How can I get pages to load in the middle section of the site?

how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly.

Hi,

I have the below css style that I am mostly using my pages, I have a standart anchor style. Anyway I want to attach "the other one" link with another style without touching the current style. How can I do this? Does CSS has a nested thing like c++?

Thank you,
Cem

Code:

<html>
<head>
<style type="text/css">
<!--
a:link {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:active {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:visited {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:hover {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #000000; text-decoration: none;}
-->
</style>
</head>

<body>
<a href="http://url">First one</a><br>
<a href="http://url2">The other one</a><br>
</body>
</html>