Problems with Firefox

@cogumeloSep 20.2005

Hi.

i’ve recently redesigned my website and i’m having a few issues with firefox. Can anyone have a quick look and help me out on what i’m doing wrong?

1st. it’s not centered on firefox
2nd. borders and background colors don’t seem to be ok

~~[URL=http://corfebol.no.sapo.pt]~~here’s the link to the website[/URL]

[CODE]body { margin: 0px; padding: 0px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; background-image:url(../img/bg.gif); }

a, a:link, a:visited {color: #477AB7;} a:hover {color: #000000;}

#outline { margin-right:auto; margin-left:auto; padding: 0px; text-align:center; }

#header { height: 140px; margin-left: 0px; padding: 0px; text-align: center; background-color: #0E5AA6; border-bottom: 1px solid #ffffff; }

#headerborder { width: 760px; height: 140px; margin-left: 0px; padding: 0px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; }

.menu { background-color: #4883BF; height: 25px; border-bottom: 1px solid #ffffff; }

#search { margin:0px; padding:0px; text-align: center; height: 50px; }

.searchtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; background-color: #ffffff; border: 1px solid #96948B; }

.pub { text-align: center; border: 1px solid #cccccc; background-color: #ffffff; }

#cont { width: 760px; margin: 0px; padding: 0px; background-color: #ffffff; text-align: left; border: 1px solid #ffffff; }

#blog { width: 738px; padding:10px; background-color: #ffffff; }

#left { width:476px; padding:10px; float:left; background-color: #ffffff; }

#right { width:254px; padding:5px; float:left; background-color: #EFEFEF; }

#footer { width:760px; height:20px; clear: both; background-color: #ffffff; border-bottom: 1px solid #ffffff; text-align: center; }

h1 { color: #D3B159; padding: 2px; margin-bottom: 15px; font-size: large; font-weight: bold; text-align: left; text-transform: capitalize; }

h2 { color: #000000; padding: 2px; margin-top: 15px; margin-bottom: 15px; font-size: x-small; font-weight: bolder; text-align: left; text-transform: uppercase; } [/CODE]

thx in advance

to post a comment

CSS

17 Comments(s) _↴

@bathurst_guySep 21.2005 — #in body also add text-align: center; and then in your outline you can reset text-align: left;

borders and background colours dont seem to be ok... ?

@ray326Sep 21.2005 — #There are a number of places where you need to apply margin:0 auto; to get your content centered.

@cogumeloauthorSep 22.2005 — #thx for your quick help.

i think i've sorted most of the issues.

I only have one issue left with firefos. the content divs won't go all the way, so i end up having blue background between the bottom menu and the content (either left or right side). any ideas on why this is happening with firefox? seems ok with IE.

thx in advance

@ray326Sep 23.2005 — #I think I'd start with a wrapper div around the two content columns, setting its background to the same grey as #right.

@WaylanderSep 23.2005 — #IE will automatically balance its size with items that its inside and in-line with i think,

Ive had a problem like yours with menu bars padding and margin will just add to it and it will be out the same proportionate amount.. i got stuck on it for a while

Im pretty sure that if you set a pixel height or width for the div you should be able to get it the same in IE and firefox.

If both the items that should be the same height are within another tag and the same style is used acoss pages for the div you could set the height to 100% and have it fill the remainder of the space.

@drhowarddrfineSep 23.2005 — #why this is happening with firefox? seems ok with IE.[/QUOTE]
See links below.

Never design for IE. Always design for Firefox. IE will screw you quicker than you can say %$@#. IE can't handle standards written in 1999. Firefox is the modern browser.

@cogumeloauthorSep 23.2005 — #I'm not going to get into any arguement on which browser is best.

But i do design with IE in mind and as long as my site stats keep saying over 90% of the people that enjoy my site use it, i'll keep doing it. You can argue all you want but stuff looks the i want it to look on IE and with firefox it doesn't. So keep up with the campaign for firefox and i'll keep designing for the majority of users.

Anyway, what i want is that my websites look the way i want on all browsers, and that is my main goal. People are free to use whatever they want and my obligation is to have my sites working 100% regardless of what they use, so i'm still looking for some help on the issue my site has with firefox.

The white background of the content layer won't go all the way down, can anyone help out?

thx in advance

@drhowarddrfineSep 23.2005 — #what i want is that my websites look the way i want on all browsers[/QUOTE] And the only way you will get that is by coding correctly. To get your code to work right in IE means coding incorrectly. Coding incorrectly means not coding to standards. Not coding to standards means not usable in Firefox, Opera, Netscape, Safari, Konqueror, etc. So your goal is not achievable unless you start learning how to code to standards. You will not learn to code to standards by coding for IE and you are asking us to help you do that.

Microsoft themselves admit to not being standards compliant and are correcting some of this in IE7 (IEBlog). This means what you are trying to hack today may not work when IE7 comes out. But if you code to standards it probably will, as well as working in modern, standards compliant browsers as mentioned above.

@drhowarddrfineSep 23.2005 — #You're webpage is a perfect example of IE not following the standards. It stretches your floated divs to the bottom of the page which is in direct violation of the standard which says the browser should not do this. FF and other browsers correctly do not drop that div to the bottom of the page. To fix this you must clear the div (google for clearing floats).

If IE correctly handled the floats then you would not be asking this question here and would know how to handle it. But IE screwed you up.

@ray326Sep 24.2005 — #HTML problems: http://validator.w3.org/check?verbose=1&uri=http%3A//corfebol.no.sapo.pt/

Javascript problems:

Warning: 08 is not a legal ECMA-262 octal constant

Source File: http://corfebol.no.sapo.pt/core/js/aniv.js

Line: 20, Column: 8

Source Code:

blist[08]= new birthday(0000,9,1,"Setembro Carlos Andrade (7) Pedro Nunes (24) Francisco 'Kiko' Ponciano (25) Jorge Ponciano (25) João Paulo Henriques (28)")

Warning: 09 is not a legal ECMA-262 octal constant

Source File: http://corfebol.no.sapo.pt/core/js/aniv.js

Line: 21, Column: 8

Source Code:

blist[09]= new birthday(0000,10,1,"Outubro Rogério Lourenço (16) Rui Malcata (20) Cláudia Antunes (26) Marc Nunes (27)")

@cogumeloauthorSep 24.2005 — #So, any suggestions on how to have the content background in white all the way to the bottom menu, besides defining the height of the div?

thx in advance

@ray326Sep 24.2005 — #I thought the grey (right col) was the problem. The white div already goes to the bottom.

@cogumeloauthorSep 25.2005 — #Depends on the page you're looking at.

What i have is #cont as a wrapper layer and have the #left and #right inside of it.

Defining the height would solve it, but i don't want grey all the way down. on the home page it goes all the way down because the content is longer than on the white side. But on most pages the white content will be longer and i want to have white after the grey.

[URL=http://equipas.no.sapo.pt/competicoes/compet.htm]See this one as example[/URL]

[CODE]#cont { 
 width: 762px;
 margin:0 auto;
 padding: 0px;
 background-color: #ffffff;
 text-align: left;
 }
 
 
 #left {
 width:478px;
 padding:10px;
 float:left;
 background-color: #ffffff;
 margin:0 auto;
 }
 
 #right {
 width:254px;
 padding:5px;
 float:left;
 background-color: #EFEFEF;
 margin:0 auto;
 }
 [/CODE]

@ray326Sep 26.2005 — #I can't tell off hand but is the footer inside the cont? I think you need something at the bottom of the cont to clear the floats. Putting the footer in there might be one way to do that.

@zero_effectSep 30.2005 — #I think that I have a solution to your problem, here you can see how this problem is solved, a hope that I was helpful ;-)))

http://www.ssi-developer.net/main/templates/temps/2c-hd-ft-fixed.htm

@cogumeloauthorOct 21.2005 — #been away for a while.

i'll check this out during the weekend.

thx for the help

@cogumeloauthorOct 22.2005 — #Nope, can't seem to do it. Although this example zero_effect provided seems to cover this issue i really can't seem to adapt it to my design.

Here are pics of the issue (on firefox):

[URL=http://corfebol.no.sapo.pt/example1.gif]example1[/URL]

[URL=http://corfebol.no.sapo.pt/example2.gif]example2[/URL]

Here's the code:

[CODE]#outline {
 margin-right:auto;
 margin-left:auto;
 padding: 0px;
 margin:0 auto;
 text-align:center;
 }
 
 #header {
 height: 140px;
 margin:0 auto;
 padding: 0px;
 text-align: center;
 background-color: #0E5AA6;
 border-bottom: 1px solid #ffffff;
 }
 
 #headerborder {
 width: 762px;
 height: 140px;
 margin:0 auto;
 padding: 0px;
 text-align: center;
 background-color: #FFFFFF;
 }
 
 #cont { 
 width: 762px;
 margin:0 auto;
 padding: 0px;
 background-color: #ffffff;
 text-align: left;
 }
 
 #left {
 width:478px;
 padding:10px;
 float:left;
 background-color: #ffffff;
 margin:0 auto;
 }
 
 #right {
 width:254px;
 padding:5px;
 float:left;
 background-color: #EFEFEF;
 margin:0 auto;
 }
 
 #footer {
 width:762px;
 height:25px;
 clear: both;
 background-color: #ffffff;
 border-bottom: 1px solid #ffffff;
 text-align: center;
 margin:0 auto;
 }[/CODE]

Can anyone help out?

thx in advance

Also in #CSS _↴

last <ul> element inside <li>Multiple link problems bloodymary

Success!

Help @cogumelo spread the word by sharing this article on Twitter...

Tweet This

Problems with Firefox

17 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Problems with Firefox

17 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #CSS _↴