Firefox is not working again.....

[derange]

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/discovernatalbrazil.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)

[Andrea]

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 :/

[derange]

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....

[virtual]

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.

[Andrea]

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

[monkeysaurus]

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.

[derange]

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?

[Andrea]

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%.

[derange]

so might it work better now then?

[derange]

http://www.flytillbrasilien.se/blieng/discovernatalbrazil.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);

}

[Andrea]

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.

[JBall]

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.

[Guest Morbid Andrew]

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!

[derange]

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?

[Andrea]

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?

[derange]

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