css firefox problems

Crazyfist · #1 (**permalink**) 10-28-05, 05:23 PM

Hey all, new user to the forums here...

ill get to the point! ive only been using css for about 3-4 days now as i am a web development university student and we only just started to be tought them (haha yes, go easy on me

) To get to grips with the language i decided to make a small "portfolio style" site just for practice.

Everything is displaying exactly how i want it to in internet explorer, trouble is firefox is just not having it.

You can see the site at: www.yabos.net

Open it first with IE then Firefox and notice the obvious differances, any help or advice would be great, and hugely appreciated.

style.css follows:

Quote:

body {font-size:10.0pt;
font-family:arial, sans-serif;
color:white;
background-color:black;
text-align:center;
margin-top:12.0px}

h1 {font-size:14.0pt;
letter-spacing:2.0px}

h2 {font-size:8.0pt;
letter-spacing:2.0px;}

a.main:link {color: #990000;
text-decoration: none}
a.main:active {color: #990000;
text-decoration: none}
a.main:visited {color: #990000;
text-decoration: none}
a.main:hover {color: white;
text-decoration: underline}

a.nav:link {color: white;
text-decoration: none}
a.nav:active {color: white;
text-decoration: none}
a.nav:visited {color: white;
text-decoration: none}
a.nav:hover {color: white;
text-decoration: underline}

div.content {width:600px;
height:570px;
text-align:left;
border:solid 1.0px;
border-color:white;
overflow:hidden;
margin:auto}

div.banner {width:600px;
height:110px;
font-size:7.0pt;
text-align:center;
margin-bottom:-3px}

div.nav {width:600px;
height:20px;
font-size:7.0pt;
color:white;
background-color:#990000;
text-align:center;
padding:4.0px;
letter-spacing:3.0px}

#cssvalid {float:left;
margin-left:-150.0px;
margin-top:3.0px}

div.main {width:600px;
height:415px;
background-color:#999999;
color:black;
text-align:justify;
padding-left:200px;
padding-right:20px;
padding-top:20px;
padding-bottom:20px;
font-size:9.0pt;
border-top:solid 1.0px;
border-bottom:solid 1.0px;
border-color:white}

div.footer {width:600px;
height:10px;
font-size:7.0pt;
color:#990000;
background-color:black;
text-align:center;
padding-top:6.0px}

.floatright {Float:right;
margin-right:3.0px;
margin-top:-112.0px;
font-size:7.0pt;
letter-spacing:2.0px;
color:#990000}

Crazyfist · #2 (**permalink**) 10-29-05, 07:09 AM

any suggestions? anyone???

nugensoftware · #3 (**permalink**) 10-30-05, 03:06 AM

the problem isn't firefox, but IE.

Internet Explorer follows its own standards vs Firefox follows the standards set forth by http://www.w3.org/ (The World Wide Web Consortium) These are the standards that should be followed by all browsers - but we the users, aren't that lucky.

If you want to absolutely make sure your site looks the same in each browser you will have to have 2 seperate CSS files, one for mozilla based browsers and another for Microsofts spin on them - then load the CSS based on the requesting browser.

Bonzo · #4 (**permalink**) 10-30-05, 02:19 PM

Just out of interest Crazyfist search and install the Devolopers tool bars - IE has one and Firefox has as plugin. You can see all sorts of information with them

I also have a html checker plugin installed in Firefox and when you View source it tells you things about your page like:

line 1 column 1 - Warning: missing <!DOCTYPE> declaration - very important

line 5 column 1 - Warning: discarding unexpected <head> - Actualy your <title> is outside the head tags.

line 20 column 33 - Warning: discarding unexpected </img> - <img> dose not need a </img> from memory you end the <img> with <img src etc. />.

line 45 column 3 - Error: <list> is not recognized! - You do not need < list > as < ul > is unordered list.

I also see you do not have any <p> tags, anyway I am getting side tracked, there are some "hacks" about to sort the width and heights try searching for the Tantek Celik hack.

Anthony

sarutv · #5 (**permalink**) 11-15-05, 10:52 AM

If you are fortunate enough to have access to a linux station, then there is a whole array of developer tools there. You can just run Linux of a CD without installation. Google for "Linux Live CD". There are several distributions out there, my favourite is Linux.

rhibbert · #6 (**permalink**) 03-21-06, 11:21 AM

I had the same problem and resolved it with the help of the Web Developer extension. I noted that it was displaying the HTML code for my 404 error page - and then it clicked! The link in my HTML code for the CSS file was wrong. I also had a <STYLE> attribute in my CSS file which messed things up.

So, in summary, Firefox is fussy - IE lets you get away with some errors. Use the W3C validators at http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/

You can download the Web Developer extension from https://addons.mozilla.org/extension...info.php?id=60

My files ended up looking like this... first the HTML file

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>

<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
<link href="css/cssexample.css" rel="StyleSheet" media="screen" type="text/css" >
<title>Example 2</title>
</head>

<body>
<div id="custom1">
<h1>This is the header</h1>
<p>This is an example of a paragraph</p>
</div>
</body>
</html>

and the css file ended up looking like this

Quote:

body {
/* margin is specified as left top [right bottom]*/
margin:10px 0;
padding: 0;
font-style: normal;
font-size: 12px;
font-family: arial, sans-serif;
font-weight: 150;
}
h1 {
/* if we do not specify the font size and type, it will inherit them from body */
size:100%;
color: #0088ff;
margin:0;
padding:10px;
}
/*ID selectors start with # and are used in the DIV statement
Caution: You can only use an ID selector name once in your XHTML document. */
#custom1 {
width: 550px;
margin: auto 0;
/* auto will center column in browser window */
}
/* The class selector is preceded by a period (.) and can be used multiple times in a document
and is used by specifying the class descriptor within an element
<img src="images/mypic.jpg" alt="some text " width="145" height="180" class="leftimage" /> */
.leftimage {
margin-right: 15px;
margin-bottom: 5px;
}
/* T */
p em {
color: #990000;
}

luckyluk · #7 (**permalink**) 04-05-06, 12:20 PM

Thank you very much. I have been making basic web pages for a few years, but like the person who started this thread, am currently taking a class. Your help in pointing to the W3C validators took care of my problems. I see in my class schedule that we are covering that very topic this week. It sure helped me from getting a bigger headache.

Thanks.

taistix · #8 (**permalink**) 04-23-06, 10:33 AM

firefox seems to work great for me, but on IE things don't center as they should and i can't explain it...if its allowed here is where the IE problems are "http://www.afterdarkradio.com"