For context, this is from an earlier PM:
I don't intend to question your coding capabilities but isn't really the command
<p align="something"> or <body align="something"> incorrect?? Because I learned like this (otherwise, me being a designer wouldn't invent code just like that :o)
Anyway, it seems that my website is completely full or mistakes that seriously I don't understand and somehow I have to fix. For instance, Firefox doesn't recognize some of the CSS and therefore my menu appears with a white background when it should be green (which it is in IE and Chrome), and as well, still in Firefox, the size of my cells isn't at all the one it should be (Firefox just stretches the whole website along the whole screen...) and then on IE, somehow the menu gets longer in it's size, making a weird line break, and so on....
Finally, I tried your code for the centering of the contents of the website (which are all inside of a table) and it keeps on only working with Chrome, both offline and online...:confused: Is it possible that it is making some kind of conflict with another code?????? I don't specify anywhere else to center the contents of the <body>...
align is an old attribute - it has been depreciated (http://www.w3.org/TR/html4/present/graphics.html#alignment) for some time (same with the bgcolor attribute, in fact) in favor of CSS.
Regarding my example, yes, there may well be something interfering with it on your actual page - I intended it as an example only, not as a working solution - I did not test it on your page.
Try the example I gave you in a new HTML document and see how it works (you might add more text, or add differently colored borders, to see how everything is positioned).
Sometimes, it really is easier to star over: Start by building a layout, using current methods and practices, that matches (or is close enough) to what you need, and then, start adding the content back in, one piece at a time, stopping when anything breaks.
But why you say it shouldn't look exactly the same in all the browsers? There are millions of pages that look like exactly the same in all the browsers, isn't that the goal of a web designer?
web browsers are all different. they don't all have the same parsers or programming. If you use current, valid code, you should be able to expect good results and very similar layouts, etc., but "pixel-perfect" (meaning "exactly the same") is not a reasonable goal. Beyond the fact that "different browsers are different," you should also consider that users might have things set up "the way they like them" - different fonts, font sizes, margins, and so forth - that would affect how the page is displayed. Different screen (or window) sizes are another issue.
The goal of a web designer should be to make the page look good and be usable.
Now, to clarify, I agree that your webpage has browser-compatibility issues. I'm not saying that the drastic differences you're running into between browsers are acceptable. It's not really the fault of the browsers, however - they have "broken (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbodatradgard.se%2F)" markup and are trying their best to guess at how to fix it.
I would recommend making up a new layout, and adding the content back in a piece at a time to make sure nothing "breaks." The example below has no margins, content, etc., but (visually) is the same basic layout you have - but it doesn't use tables or depreciated attributes, and it functions well cross-browser (the dotted outline is so you can see where all the elements are):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout Example</title>
<style>
*{ outline: 1px dotted red; }
p{ outline: none; }
html{ background: url('http://bodatradgard.se/src/fundo.jpg'); }
body{
background: #fff;
width: 1100px;
margin: 0 auto;
position: relative; /* see John's post, below */
}
.row{
width: 100%;
}
.row.green{ background: #00AE38; }
/* Nicolas Gallagher's micro clearfix */
.row:before,.row:after{ content:""; display:table; }
.row:after{ clear: both; }
.row{ zoom: 1; }
.col{
float: left;
position: relative;
}
.col.main{
width: 800px;
background: #fff;
}
.col.side{
width: 300px;
}
</style>
</head>
<body>
<div class="row">
<p>Banner and navigation go here.
</div>
<div class="row green">
<div class="col main">
<p>Main content column.
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col side">
<p>Side column (for photos).
</div>
</div>
<div class="row green">
Footer goes here.
</div>
</body>
</html>