Dumping Mozilla

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Avick -> Dumping Mozilla (9/30/2004 10:47:41)
Where can I get instruction on setting up a site to work in Mozilla Firefox. I have started to develop sites using CSS only. Since then I have had nothing but trouble trying to get them to work in Mozilla Firefox. All the older sites I have developed work fine as they where built using tables. As I started to progress into CSS I found that more and more problems where appearing in my sites. At this stage I have two options open to me. The first is to ignore Mozilla Forfox when developing my sites or two, Go back to building sites using tables and only some CSS. I don’t really want to take the second option as this is a step backwards. Every time I view my sites in Mozilla I feel like kicking the PC. I have looked at a number of sites in Mozilla and about half of them look the way they should. The rest are clearly not working as they should. This is why I am thinking of going down the “Mozilla can go and get stuffed” route.

bobby -> RE: Dumping Mozilla (9/30/2004 10:57:49)
Avick Of the browsers out there, Mozilla and Firefox are near the top of the list for CSS compliance... unlike IE that ignores or misinterprets the standards and renders some things differently. My guess would be that you're feeling the pains of getting used to using CSS for positioning... it's not an easy thing to get a handle on. Rest assured that Firefox will render the page as it "should be" rendered via the CSS standards. If you can get it working in FF, then the CSS is probably spot on. Post back what you're having problems with, maybe post your CSS file and a link to the site... we'll help you figure out what's causing the mess... B

Avick -> RE: Dumping Mozilla (9/30/2004 11:20:50)

The biggest problem is the nav menu. If you look at it in IE or Opera you can see what it should look like. It should also be the same width as the box below.

I have tried everything to get it working the way I want but just can’t!

The link is www.newebirl.net

the services sections is another good example:
www.newebirl.net/services/hosting.htm

Here is the code for the CSS

body{ 
	background-color: #E0E0E0;
	margin: 0px;
	margin-top: 10px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 0.80em;
	margin:0px;
	margin-top: 10px;
	margin-bottom: 0px;	
	}

#main {
	width: 750px;
	padding: 10px;
	margin: 0px auto;
	background:#BECDC0 url(images/layout/mainBG.gif) top left repeat-y;
	border: 1px solid gray;
	}
	
/* url(images/layout/mainBG.gif) top left repeat-y */
	
#header {
	width: 100%;
	height: 110px;
	background-color: White;
	border: 1px solid #6f8878;
	}
	
#logo {
	width: 150px;
	padding-top: 20px;
	float: left;
	}
#headImage {
	background-color: White;
	float: right;
	}
	 
#leftContainer {
	width: 200px;
	float: left;
	margin-top: 10px;
	}

.nav {
	width: 200px;
	border: 1px solid #6f8878;
	background-color: #F2F2F2;
	padding: 5px 5px;	
	margin-bottom: 20px;
	text-align: left;
	}
	
span.navTitle {
	width: 100%;
  	height: 10px;
	padding: 1px 5px;
	background-color: #FFF;
	background-image: url(images/layout/titlebg.jpg);
	background-position: left;
	background-repeat: no-repeat;
	border: 1px solid #CCC;
	border-top: 2px solid #CCC;
	text-align: left;
	font-size: 87%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #707070;
	font-weight: bold;
	}

span.navLink {
	width: 100%;
  	height: 10px;
	padding: 2px 5px;
	text-align: left;
	font-size: 87%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	}
span.navLink a { color: #629562;}
span.navLink a:hover {color: #FF8C00;}
	
#left1 {
	width: 200px;
	margin: 10px 0px 0px 0px;
	padding: 10px;
	background: #E7F0EE;
	border: 1px solid #6f8878;
	color: #707070;
	text-align: left;
	font-size: 0.89em;
	float: left;
	}
	

.mainContent {
	
} 
.content { 
  background:white url("images/layout/boxBG.gif") top right no-repeat;
  border: 1px solid #6f8878;
  border-top: 3px solid #6f8878;
  padding:20px;
  text-align: left;
  font-size: 95%;
  margin-top:10px;
  margin-left:250px;
  }
  
.content2 { 
  background-color: white;
  border: 1px solid #6f8878;
  padding: 10px 20px;
  text-align: left;
  font-size: 0.87em;
  margin-top:5px;
  margin-left:250px;
  }
 
 .content3 { 
  background-color: white;
  border: 1px solid #6f8878;
  padding: 10px 20px;
  padding-top: 0px;
  padding-bottom: 5px;
  text-align: left;
  font-size: 0.87em;
  margin-top:10px;
  margin-left:250px;
  }

.imgBoxL { 
  width: 200px;
  padding: 0px;
  text-align: left;
  margin-top:5px;
  }
  
 .textBoxR { 
  width: 200px;
  padding: 0px;
  text-align: left;
  margin-top:5px;
  float: right;
  }
  
 
p {color: #707070;}
p.p2 {line-height: 11pt;padding: 10px 0px 0px 0px;margin: 0px 0px 0px 0px; text-align: justify;}
p.p2 a:hover {text-decoration: underline;}

p.p3 {line-height: 10pt;padding: 5px 0px 0px 0px;margin: 0px 0px 0px 0px; text-align: justify;}
p.p3 a:hover {text-decoration: underline;}

a {text-decoration: none;	color: #FF9900;}
a:hover { text-decoration: none; color: #8FBC8F;}
 
 

h3 {font-size:105%; color:#86777e;font-weight:bold;margin-bottom:0px;border-bottom:1px solid #ccc;}

ul {color: #707070; list-style: square;}
.list1 {	line-height: 14pt; }


td { font-size: 0.80em;}















#footer {
	width: 100%;
	margin-top: 5px;
	background-color: #F1F1F1;
	border: 1px solid #6f8878;
	float: left;
	color: #7F7F7F;
	font-size: 8pt;
	padding: 5px;
	}

	
.valid {
	width: 750px;
	margin-top: 5px;
	color: Gray;
	font-size: 0.72em;
	padding: 0px;
	}
.valid a {text-decoration: none; color: Gray;}
.valid a:hover {text-decoration: underline; color: #5A5A5A;}

c1sissy -> RE: Dumping Mozilla (9/30/2004 11:49:33)
I agree with Bobby here on this one 100%. Also if you look HERE in your previous post, I did address this as part of the problem. If you look up the different browsers and how they handle css, you will find that IE is not as compliant as it should be. And it is so forgiving that if you do have a small positioning error, it forgives it, making it seem like you have this correct, until you view it in a browser that is compliant. One major rule of thumb is to use moz or firefox for designing, and then go to IE and figure out what to do for that browser. In the long run, its worth it to learn css. It seems frustrating when you are starting out with it. But the savings on bandwidth is well worth it.[;)]

Avick -> RE: Dumping Mozilla (9/30/2004 11:57:39)
Can you explain what padding needs to be removed or adjusted to make it work correctly? With relation to CSS in Firefox, I am just so sick of it now that I just feel like giving up. I have yet to find a good site where I can get instructions on using positioning in browsers other then IE. I find that they all start well but end up going off on a rant and loosing me in the process. Jesus is it really worth it. [:(]

Donkey -> RE: Dumping Mozilla (9/30/2004 12:50:52)
First thing is don't give up on it, nothing worth doing is ever easy, and visually you aren't that far off perfection anyway. I would suggest the following points for consideration. The navigation would be easier and use less code if you used an unordered list rather than spans. Search the forum for info on how to do this. IE behaves differently from the compliant browsers FF/Moz and Opera. So you need to give it different instructions to make your page look simillar (never identical) in all three browsers. You could use one Style sheet and a lot of IE hacks, but IMHO a much neater way is to use two style sheets; a main one for the compliant browsers and a much smaller sheet of "over-rides" for IE. Use a commented out link to the "over-rides sheet" straight after the link to the original sheet. Make a copy of your style sheet and rename it as IE styles or something simillar. Then using Firefox and or Opera for testing tweak the positioning, padding etc in the original sheet until it looks good. The site already looks OK in IE so you can compare the two sheets and delete everything in the IE sheet that is identical with it's counterpart in the original sheet. You should be able to find a lot of info on operating with two style sheets by searching in this forum. On another point you have a repeated major grammatical error on your homepage. "You're" means "you are" you should change it to "your" .

c1sissy -> RE: Dumping Mozilla (9/30/2004 13:00:00)
I see Donkey has covered just about everythign with his post. If you search the forum for terms you are looking for you will find some information. Also, please look at the css links section, there are many great links for things in there. CSS positioning isn't something that you will grasp in seconds. It takes work to understand it. As Donkey suggested, use the ul for your menu, in the links section there are several links to places that have tutorials on how to do this. And in your other thread where I mentioned the padding. If you look at your style sheet, and see where you have placed the padding, then you will see where you need to play around with it. And don't hesitate to come back with more questions. We will help you out, and let you know where you can find information. One good place, is the css links in here, many have posted excellent information in there.

c1sissy -> RE: Dumping Mozilla (9/30/2004 14:07:23)
additional information regarding this thread can be found Here.

Avick -> RE: Dumping Mozilla (9/30/2004 16:03:21)
I don’t know why the idea of a list never crossed my mind. I think it was a case of not being able to see the woods for the trees and pent up frustration. Thanks a lot for your help guys, really. I know the spelling on the site needs to be checked over. I have a person that will do that for me when I get past the design stage. This will be sooner rather then later thanks to your help! In relation to the padding issue Deb. I have tried tinkering with them all with no joy. I may be looking at the wrong one. I will keep you posted on how i get on.

Avick -> RE: Dumping Mozilla (10/1/2004 6:44:20)
I have made the changes to my site and it seems to be working OK..... Just. [:)] I also made a second style sheet called iefix.css so everything will look "almost" the same in both platforms. I put the second css under the first like so: <!-- <link rel="stylesheet" type="text/css" href="iefix.css"> --> Both sheets look like this <link rel="stylesheet" type="text/css" href="neweb7.css"> <!-- <link rel="stylesheet" type="text/css" href="iefix.css"> --> But IE is not picking it up. Would I be better using the @import instead!!

Donkey -> RE: Dumping Mozilla (10/1/2004 9:59:32)
quote: <!-- <link rel="stylesheet" type="text/css" href="iefix.css"> --> I alway write it like this, it works for me. <!-- > <link href="iefix.css" rel="stylesheet" type="text/css" /> <! -->

Giomanach -> RE: Dumping Mozilla (10/1/2004 10:01:03)
quote: <!-- <link rel="stylesheet" type="text/css" href="iefix.css"> --> That makes the style sheet reference a comment, not a conditional...Just FYI...

Avick -> RE: Dumping Mozilla (10/1/2004 10:42:16)

I tried what you suggested and it just maximised the content to fit the entire screen. This is what I used

<link rel="stylesheet" type="text/css" href="neweb7.css">
<!-- >
<link rel="stylesheet" type="text/css" href="iefix.css"> 
<!-- >

Then I tried this

<link rel="stylesheet" type="text/css" href="neweb7.css">
<!-- -->
<link rel="stylesheet" type="text/css" href="iefix.css"> 
<!-- -->

And it put me back to square one again.

I then tried the @import command and it fixed the IE problem but knocked out the Firefox setting.

Here are the two sheets I am using.

neweb7.css

body{ 
	background-color: #E0E0E0;
	margin: 0px;
	margin-top: 10px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 0.80em;
	margin:0px;
	margin-top: 10px;
	margin-bottom: 0px;	
	}

#main {
	width: 750px;
	padding: 10px;
	margin: 0px auto;
	background:#BECDC0 url(images/layout/mainBG.gif) top left repeat-y;
	border: 1px solid gray;
	}
	
/* url(images/layout/mainBG.gif) top left repeat-y */
	
#header {
	width: 100%;
	height: 110px;
	background-color: White;
	border: 1px solid #6f8878;
	}
	
#logo {
	width: 150px;
	padding-top: 20px;
	float: left;
	}
#headImage {
	background-color: White;
	float: right;
	}
	 
#leftContainer {
	width: 200px;
	float: left;
	margin-top: 10px;
	}

.nav {
	width: 200px;
	border: 1px solid #6f8878;
	border-top: 3px solid #6f8878;
	background-color: #F2F2F2;
	text-align: left;
	}
	
ul.navMenu {list-style-type: none; margin: 0px 0px; padding: 10px 15px 10px 10px; Verdana, Arial, Helvetica, sans-serif;}

li.navTitle {
	margin: 0px auto;
	padding: 0px 2px;
	font-weight: bold; 
	border-style: solid;
	border-width: 3px 1px 1px 1px;
	border-color: #CCC;
	background: #FFF url(images/layout/titlebg.jpg) repeat-y left;
	font-size: 0.87em;
	width: 100%;
	height: 14px;
	}

li.navLink { 
	margin: 0px 0px 0px 10px;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #F2F2F2;
	font-size: 0.87em;
	}
.navLink a { color: #629562;}
.navLink a:hover {color: #ff9900;}
	
#left1 {
	width: 180px;
	margin: 10px auto;
	padding: 10px;
	background: #E7F0EE;
	border: 1px solid #6f8878;
	color: #707070;
	text-align: left;
	font-size: 0.89em;
	float: left;
	}
	

.content { 
  background:white url("images/layout/boxBG.gif") top right no-repeat;
  border: 1px solid #6f8878;
  border-top: 3px solid #6f8878;
  padding:20px;
  text-align: left;
  font-size: 95%;
  margin-top:10px;
  margin-left:250px;
  }
  
.content2 { 
  background-color: white;
  border: 1px solid #6f8878;
  padding: 10px 20px;
  text-align: left;
  font-size: 0.87em;
  margin-top:5px;
  margin-left:250px;
  }
 
 .content3 { 
  background-color: white;
  border: 1px solid #6f8878;
  padding: 10px 20px;
  padding-top: 0px;
  padding-bottom: 5px;
  text-align: left;
  font-size: 0.87em;
  margin-top:10px;
  margin-left:250px;
  }

.imgBoxL { 
  width: 200px;
  padding: 0px;
  text-align: left;
  margin-top:5px;
  }
  
 .textBoxR { 
  width: 200px;
  padding: 0px;
  text-align: left;
  margin-top:5px;
  float: right;
  }
  
 
p {color: #707070;}
p.p2 {line-height: 11pt;padding: 10px 0px 0px 0px;margin: 0px 0px 0px 0px; text-align: justify;}
p.p2 a:hover {text-decoration: underline;}

p.p3 {line-height: 10pt;padding: 5px 0px 0px 0px;margin: 0px 0px 0px 0px; text-align: justify;}
p.p3 a:hover {text-decoration: underline;}

a {text-decoration: none;	color: #FF9900;}
a:hover { text-decoration: none; color: #8FBC8F;}
 
 

h3 {font-size:105%; color:#86777e;font-weight:bold;margin-bottom:0px;border-bottom:1px solid #ccc;}

ul {color: #707070; list-style: square;}
.list1 {	line-height: 14pt; }


td { font-size: 0.80em;}















#footer {
	width: 100%;
	margin-top: 5px;
	background-color: #F1F1F1;
	border: 1px solid #6f8878;
	float: left;
	color: #7F7F7F;
	font-size: 8pt;
	padding: 5px;
	clear: both;
	}

	
.valid {
	width: 750px;
	margin-top: 5px;
	color: Gray;
	font-size: 0.72em;
	clear: both;}
.valid a {text-decoration: none; color: Gray;}
.valid a:hover {text-decoration: underline; color: #5A5A5A;}

iefix.css

	
#left1 {	width: 100%;}

quote:

Update:

I know I had the code wrong above bit I then fixed it and still nothing.

Donkey -> RE: Dumping Mozilla (10/1/2004 10:53:04)
quote: <link rel="stylesheet" type="text/css" href="neweb7.css"> <!-- > <link rel="stylesheet" type="text/css" href="iefix.css"> <!-- > You are still missing the closing slashes; should be - quote: <link rel="stylesheet" type="text/css" href="neweb7.css" /> <!-- > <link rel="stylesheet" type="text/css" href="iefix.css" /> <!-- >

Giomanach -> RE: Dumping Mozilla (10/1/2004 10:59:42)
His pages are coded in HTML, not XHTML Peter.. Can I ask why you change the width of left1 from 180px to 100%? As far as IE is concerned, 100% is right the way across the browser display

Avick -> RE: Dumping Mozilla (10/1/2004 11:20:17)
The reason I changed from 180px to 100% is because IE will only show the box at 100% and firefox at 180px. That way the lower box left1 is inline on both sides with the nav section. The nav section and the left1 box are both inside a div with the ID leftcontainer. In IE 100% makes it fit the leftcontainer perfectly.

Donkey -> RE: Dumping Mozilla (10/1/2004 12:12:44)
quote: His pages are coded in HTML, not XHTML Peter.. Ooops! Missed that. Avick, The links to both sheets seem ok in the html to me, but as you aren't changing the dimensions/positioning/padding etc of the div boxes the second style sheet won't make any difference. The trick is to "tweak" the first sheet to get the page as near as you can to exactly what you want in FF, then in the second sheet make the changes that work in IE. You seem to have made some progress, in FF the page looks OK except for the position of the footer and the width of the log-in box. In IE the only problem appears to be the width of the log-in box. (You stated above that you want it same width as the nav box). I would copy all the first style sheet into the second as it works best in IE, then tweak the first, then delete the duplicated code out of the second and tweak it until it works. I think you'll find that the conditional link will work if you make significant changes, to test it try changing the background colour in one of the divs for the IE sheet only.

Avick -> RE: Dumping Mozilla (10/1/2004 12:19:58)
I will give it a go and get back to you. The footer is another problem but that can wait. I feel like I am making some progress. Slowly getting their

Avick -> RE: Dumping Mozilla (10/1/2004 12:36:41)

I think we could have found the problem.

I made some major changes to the second sheet (iefix.css) and none of the changes are being picked up. Even the lovely Fuchsia background. [:D]Do I have the second sheet linked wrong?

Head section of index page

<head>
<meta http-equiv="Content-Language" content="en-ie">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="keywords" content="Website Design Ireland, Irish web sites">
<title>Neweb Ireland</title>

<link rel="stylesheet" type="text/css" href="neweb7.css">
<!-- >
<link  href="../iefix.css" rel="stylesheet" type="text/css">
<! -->

</head>

changes to iefix.css

body {
	background-color: Fuchsia;
}


#left1 {
	width: 100%;
	margin: 10px auto;
	padding: 10px;
	background-color: blue;
	border: 3px solid #6f8878;
	color: #707070;
	text-align: left;
	font-size: 0.89em;
	float: left;
	}

dpf -> RE: Dumping Mozilla (10/1/2004 12:41:43)
quote: href="../iefix.css" where is the file? in your web root? if so, I would link it href="iefix.css" the ".." says two levels up

Avick -> RE: Dumping Mozilla (10/1/2004 16:13:17)
Its in the same place as neweb7.css I removed the ../ and set it the same as neweb7.css It now looks like this <link rel="stylesheet" type="text/css" href="neweb7.css"> <!-- > <link rel="stylesheet" type="text/css" href="iefix.css"> <! --> I then removed #left1 from neweb7.css and just left it in iefix.css to see what would happen and it did not bring in the settings or style from iefix.css if I try the @import command it just ignores the settings for #left1 in neweb7.css and my problem switches from the box being to small in IE to being to big in FF

Avick -> RE: Dumping Mozilla (10/1/2004 17:48:20)
I think I have cracked it [:D][:D][:D] I tried and tried to get the second sheet working with no joy. Then I changed some items in the CSS code on neweb7.css and bingo. I removed the float tag from #left1 and set the width to auto. it is perfect in IE but about 1px short in Mozilla.... I can live with that. I would still like to get the second sheet working, to fix this 1px and get it spot on. I also changed the aligned the footer by again removing the float tag and putting in a clear tag. Things are looking up. This Mozilla is not so bad after all [:)]

Page: [1]

0.125