• Registered: December 27, 2008
  • Posts: 11

Topic: Firefox is not working again.....

my css code
body {
    margin: 20px 0 0 0;
    padding: 0;
    background: #679966 url(images/img01.jpg);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333333;
}

h1, h2, h3 {
    margin: 0;
    font-weight: normal;
    color: #000000;
}

h1 {
    font-size: 197%;
}

h2 {
    font-size: 167%;
}

h3 {
    font-size: 100%;
    font-weight: bold;
}

p, ol, ul {
    line-height: 180%;
}

p {
}

ol {
}

ul {
}

blockquote {
    margin: 0;
    padding-left: 20px;
    font-style: italic;
}

blockquote * {
    line-height: normal;
}

a {
    color: #000000;
}

a:hover {
    text-decoration: none;
}

img {
    border: none;
}

img.left {
    float: left;
    margin: 0 15px 0 0;
}

img.right {
    float: right;
    margin: 0 0 0 15px;
}

hr {
    display: none;
}

/* Header */

#header {
    width: 700px;
    height: 220px;
    margin: 0 auto;
    background: url(images/img02.jpg) no-repeat right top;
}

/* Logo */

#logo {
    float: left;
    width: 220px;
    height: 220px;
    background: #679966 url(images/img03.jpg);
}

#logo h1, #logo h2 {
    margin: 0;
    text-transform: lowercase;
    text-align: center;
    font-weight: normal;
}

#logo h1 {
    padding: 120px 0 0 0;
    background: url(images/img04.jpg) no-repeat 50% 30px;
    letter-spacing: -1px;
    font-size: 36px;
}

#logo h2 {
    font-size: 18px;
}

#logo a {
    text-decoration: none;
    color: #000000;
}

/* Menu */

#menu {
    float: right;
    width: 470px;
    height: 40px;
    padding: 180px 0 0 0;
}

#menu ul {
    width: 466px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: #000000 url(images/img05.jpg) repeat-x;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    list-style: none;
}

#menu li {
    display: inline;
}

#menu a {
    display: block;
    float: left;
    height: 32px;
    padding: 8px 20px 0 19px;
    background: url(images/img06.gif) no-repeat;
    text-transform: none;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

/* Page */

#page {
    width: 700px;
    margin: 0 auto;
}

/* Content */

#content {
    float: right;
    width: 430px;
    padding: 20px;
    background: #ffffff url(images/img07.gif) no-repeat left bottom;
}

/* Sidebar */

#sidebar {
    float: left;
    width: 220px;
    padding-top: 10px;
}

#sidebar a {
    color: #000000;
}

#sidebar ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    font-size: 92%;
}

#sidebar ul li {
    padding: 5px 14px;
    background: url(images/img13.gif) no-repeat 0px 12px;
    border-top: 1px solid #679966;
}

#sidebar ul li.first {   
    border: none;
}

#sidebar ul li h2 {
    margin: 0;
    font-size: 100%;
}

#sidebar ul li h3 {
    margin: 0;
    font-size: 92%;
}

#sidebar ul li p {
    margin: 0;
}

.boxed {
    margin-bottom: 10px;
    background: #679966 url(images/img10.gif) no-repeat left bottom;
}

.boxed .title {
    height: 30px;
    margin: 0;
    padding: 10px 0 0 10px;
    background: #679966 url(images/img08.jpg) no-repeat;
    font-size: 16px;
    font-weight: bold;
    color: #000000
}

.boxed .content {
    padding: 15px;
    background: url(images/img09.gif) repeat-x;
}

/* Search */

#search {
}

#search form {
    margin: 0;
    padding: 0;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search p {
    margin: 0;
    font-size: 85%;
}

#searchinput {
    float: right;
    width: 174px;
    padding: 2px 5px;
    background: #679966 url(images/img11.gif) repeat-x;
    border: 1px solid #FFFFFF;
    font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#searchsubmit {
    float: right;
    margin-top: 5px;
    background: #679966 url(images/img12.gif) repeat-x;
    border: none;
    font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

/* Footer */

#footer {
    height: 100px;
}

#footer p {
    margin: 0;
    line-height: normal;
    font-size: 85%;
    color: #000000;
}

#footer a {
    color: #000000;
}

Problem nr 1
http://www.flytillbrasilien.se/blieng/d … razil.html
the repeat just didn´t want to work  why?
several pages has the same problem
and i got back the space at the footer again....
ans some aligment problems at the sides.

Kind regards
Derange
(i do not like firefox now)

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: Firefox is not working again.....

Firefox shows you what you wrote, while IE overlooks many mistakes and shows what it thinks you meant - a good website is written with a clean and validating (error free) code, so everything displays in the standard compliant browsers (like Firefox) the way it should - and then you use conditional comments to make things work in IE.

I ran your page through the validator and it shows 1016 Errors.  Fix those first and then take it from there.

It's really NOT Firefox's fault hmm

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: December 27, 2008
  • Posts: 11

Re: Firefox is not working again.....

well i buy that there is error in the html code but for now the problem is in the css code...  last time i asked someone here i got god tips to add things in my css code to fix just margin errors and so on......   and then it all worked...   so yes it is firefox that does not working as it should....    i do not want to rewrite everytning just for firefox....

Vote up Vote down

  • From: Tenerife, Spain
  • Registered: December 29, 2008
  • Posts: 579
  • Reputation: 1

Re: Firefox is not working again.....

It is not only in Firefox either, in Safari your background does not repeat properly.

I looked at your code online and you are mixing tables, internal and external css. All your css styling should be in the external css stylesheet not in the html page. You probably have major conflict going on between the two. I also noticed you specified a height for one of your columns, this may be the cause of your problem in Firefox and Safari.

You cannot afford to ignore the problem in these 2 browsers, at least 25% of people use Firefox. If you had developped your site using Firefox for testing, then you would be hating IE, like all the rest of us....

Good luck with your fix.

Lynne
180virtual

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: Firefox is not working again.....

derange wrote:

so yes it is firefox that does not working as it should....    i do not want to rewrite everytning just for firefox....

If you say so....

Maybe evil Firefox takes the height settings

<div id="content" style="width: 949px; height: 7330px;">
<div id="columnB" style="width: 905px; height: 6876px;>

literally?  If you remove them, at least your content is on the white background.

Btw - the <font> tag has been deprecated for several years now..... (not by Firefox)

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: December 19, 2008
  • Posts: 100

Re: Firefox is not working again.....

FYI, it doesn't display correctly in Chrome or Opera either. Damn all those standards compliant browsers!

If I were you, I'd rethink my approach. You'll be fighting the tide otherwise.

Vote up Vote down

  • Registered: December 27, 2008
  • Posts: 11

Re: Firefox is not working again.....

well i slimed down the css file some....  but still som problems...

/** BASIC */

* { margin:0; padding:0; }

body {
    margin: 0px 0px 0px 0px;
    background-image: url(images/blibackground.gif);

}

/** HEADER */

#header {
    margin: 0px auto;
    background: url(images/logga.gif);
}


/** MENU */

#menu {
    margin: 0px auto;
    background: url(images/img03.gif);
}

/** CONTENT */

#content {
    margin: 0px auto;
    background: url(images/img04.gif) repeat-y;
}

#columnA {
    float: right;
}

#columnB {
    float: left;
    width: 949px;
    padding: 0px 0px 0px 0px;
}

/** FOOTER */

#footer {
    width: 950px;
    margin: 0px auto;
    background: url(images/fot.gif);
}

what should i do to make it more simpel....  (not rewriting the entire page)
Should i post everything in the html code?

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: Firefox is not working again.....

You do realize that there is all kinds of INLINE CSS in your HTML which will override anything you put in your EXTERNAL stylesheet? 

Also 

* { margin:0; padding:0; }

sets EVERY margin and padding to zero, so adding 

body {
    margin: 0px 0px 0px 0px;

is redundant - aside from that, writing 

margin: 0;

would be all you need here - the zero (or whatever number) automatically applies to all 4 sides, and since it's zero, no unit is needed, as 0 px is as much as 0em or 0%.

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: December 27, 2008
  • Posts: 11

Re: Firefox is not working again.....

so might it work better now then?

Vote up Vote down

  • Registered: December 27, 2008
  • Posts: 11

Re: Firefox is not working again.....

http://www.flytillbrasilien.se/blieng/d … razil.html

with css
/** BASIC */

* { margin:0; padding:0; }

body {
    background-image: url(images/blibackground.gif);

}

/** HEADER */

#header {
    margin: 0 auto;
    background: url(images/logga.gif);
}


/** MENU */

#menu {
    margin: 0 auto;
    background: url(images/img03.gif);
}

/** CONTENT */

#content {
    margin: 0 auto;
    background: url(images/img04.gif) repeat-y;
}

#columnA {
    float: right;
}


/** FOOTER */

#footer {
    margin: 0 auto;
    background: url(images/fot.gif);
}

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: Firefox is not working again.....

Using the short forms doesn't actually make it work any better, just makes the code cleaner.

You still have a mix of tables and divisions, missing closing tags, use of deprecated tags, and many other coding errors.

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • From: Noblesville, IN, USA
  • Registered: December 20, 2008
  • Posts: 158

Re: Firefox is not working again.....

Seems to render correctly now. You still have 675 Errors and 8 warnings. Mostly due to closing tags and missing  "alt=" attributes (these are required)

Don't get discouraged. Code is a very finicky thing. You have to follow the ground rules to the letter or things start to break.

A good place to start would be removing the in line styles and adding those rules to your CSS. And adding the "alt=" attribute to your images.

Many times correcting one thing will drastically lower the number of errors the validation finds.

Vote up Vote down

  • Registered: January 3, 2009
  • Posts: 1

Re: Firefox is not working again.....

Wow, I'm scratching my head....this topic was in "beginners"! I'm dizzy! I have such a long ways to go! I'm so greeen at this!

Vote up Vote down

  • Registered: December 27, 2008
  • Posts: 11

Re: Firefox is not working again.....

well i have reduced the errors now but why dont the repeat-y work as it sholud in firefox???   
if i use the quickfix and typing the px to get it to look good in firefox then i get a big white area at the
end of the page in explorer.....
Is the no way to get the repeat to work as is should?

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: Firefox is not working again.....

Which image are you talking about?  I see the orange/rose background that repeats x and y (with a very notifiable seam, btw) - and then I see the border to the right and  left of your content, which repeats nicely unitl it reaches the height limit you have set in your inline styling.

Is there some other image that should be repeating?

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: December 27, 2008
  • Posts: 11

Re: Firefox is not working again.....

i have solved it     i moved content height to the css file and put auto   so now it is working perfect.....

Vote up Vote down