|
| |
|
|
Avick
Posts: 181
From: Ireland
Status: offline
 |
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.
_____________________________
Alan
http://www.newebirl.net
|
|
|
|
Avick
Posts: 181
From: Ireland
Status: offline
|
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;}
_____________________________
Alan
http://www.newebirl.net
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Avick
Posts: 181
From: Ireland
Status: offline
|
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.
_____________________________
Alan
http://www.newebirl.net
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 181
From: Ireland
Status: offline
|
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.
< Message edited by Avick -- 10/1/2004 10:49:09 >
_____________________________
Alan
http://www.newebirl.net
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 181
From: Ireland
Status: offline
|
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.
_____________________________
Alan
http://www.newebirl.net
| |
|
|
|
Avick
Posts: 181
From: Ireland
Status: offline
|
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
_____________________________
Alan
http://www.newebirl.net
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
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
_____________________________
Dan
| |
|
|
|
Avick
Posts: 181
From: Ireland
Status: offline
|
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
_____________________________
Alan
http://www.newebirl.net
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
Do I have the second sheet linked wrong? 