Webdesign - HTML and CSS

[Hagge]

Hello

 

I've been working in a new website, and it's starting to look like something :)

I however got some problems,

I got a contact form in a border, and I want this form to be at the bottom of the screen, at all times.

I've tried margin px but it just puts a space between the "contact" border and the acctual information border...My website is built with lots of borders..:)

 

Anyway, thats the first problem, but other problem is that I cant figure out the "spoiler" code for the css/html..

Can somebody explain this to me, with steps :) Please!

 

And my last question...I open my website with IE and it works great..Then I use Opera and Chrome, and the borders just jumps all over the place..Like my CSS isnt working? Whats up with that?:(

 

I would LOVE some help please!

[Xploda]

I can't help you with the first two problems, but i do know something about the last thing you mentioned.

 

I believe it's something called "responsive design" (someone correct me if i'm wrong).

 

Basically every browser handles your code a little differently. When doing a request, the browser will always send information about its specifications (version etc).

In your code, you can respond to the information that is sent by the browser, meaning you can use an adapted css file for different browsers or devices.

It also means that you can dynamically adjust the layout of your website depending on the resolution of the browser window  ;).

This is a good example of what i'm talking about: http://2012.inspireconf.com/  .

 

Hope this helps  :)

[Hagge]

I can't help you with the first two problems, but i do know something about the last thing you mentioned.

 

I believe it's something called "responsive design" (someone correct me if i'm wrong).

 

Basically every browser handles your code a little differently. When doing a request, the browser will always send information about its specifications (version etc).

In your code, you can respond to the information that is sent by the browser, meaning you can use an adapted css file for different browsers or devices.

It also means that you can dynamically adjust the layout of your website depending on the resolution of the browser window  ;).

This is a good example of what i'm talking about: http://2012.inspireconf.com/  .

 

Hope this helps  :)

I will check it out asap!:)

Hope somebody else got any ideas for my other problems:(

[TheAsian1337]

The first two might be your "<div>"s placement or error. You can quickly fix this by using Dreamweaver from adobe or notepad++ which is free.

 

The Asian is Everywhere

[alpenwasser]

For your first problem, I recommend having a look at "sticky footer" solutions, there's

lots of ways to do that, and some of them might be useful for your problem if I have

understood your intentions correctly.

As for your second problem, you will most likely have to use some Javascript for that.

I have not yet implemented something like that myself, but this tutorial seems to be

something you might be looking for. Same as with the sticky footer, there are many ways

to achieve this.

The third problem might be very tricky to solve without some actual code.

Responsive design is actually not necessarily a browser specific thing, browsers have

always interpreted CSS code slightly differently, that's just a lack of standard

compliance :( (although it used to be a lot worse than it is with modern browsers).

Responsive design is when you have a layout that adjusts itself to the screen size

dynamically (so, it will look great regardless of whether you view the site on a 30"

2560x1600 px or on a mobile screen). See the wiki article for more.

How that is implemented (different style sheets, javascript, etc.) is not really

relevant, what matters is the final product's behavior.

[Hagge]

For your first problem, I recommend having a look at "sticky footer" solutions, there's

lots of ways to do that, and some of them might be useful for your problem if I have

understood your intentions correctly.

As for your second problem, you will most likely have to use some Javascript for that.

I have not yet implemented something like that myself, but this tutorial seems to be

something you might be looking for. Same as with the sticky footer, there are many ways

to achieve this.

The third problem might be very tricky to solve without some actual code.

Responsive design is actually not necessarily a browser specific thing, browsers have

always interpreted CSS code slightly differently, that's just a lack of standard

compliance :( (although it used to be a lot worse than it is with modern browsers).

Responsive design is when you have a layout that adjusts itself to the screen size

dynamically (so, it will look great regardless of whether you view the site on a 30"

2560x1600 px or on a mobile screen). See the wiki article for more.

How that is implemented (different style sheets, javascript, etc.) is not really

relevant, what matters is the final product's behavior.

I now fixed my script for the spoiler, and its working! :)

However, an other problem appeared, I got a background image, which completly covers my page, however, when I press the /show button for my spoiler, the page gets longer, and the background picture copies itself, under..I dont know how to explain it...I got a long text in my Spoiler, and when I open it, I get 3 background pictures under eachother :( I however got this code in css

 

background: url(images/Bpac.png) no-repeat center center fixed;

background-size: 100%;

 

but its not helping:(

And I'm looking for the stickys, still havent found my problem:( Thanks for the Spoiler fix tho:)

[loganryan99]

I now fixed my script for the spoiler, and its working! :)

However, an other problem appeared, I got a background image, which completly covers my page, however, when I press the /show button for my spoiler, the page gets longer, and the background picture copies itself, under..I dont know how to explain it...I got a long text in my Spoiler, and when I open it, I get 3 background pictures under eachother :( I however got this code in css

 

background: url(images/Bpac.png) no-repeat center center fixed;

background-size: 100%;

 

but its not helping:(

And I'm looking for the stickys, still havent found my problem:( Thanks for the Spoiler fix tho:)

 

I would change background to background-image, as only using background is not standards compliant and might be causing the issue.

[alpenwasser]

Regarding the background problem, I have had success with this CSS:

 

background: #000 url(image.png) no-repeat top center fixed;-webkit-background-size:cover;   -moz-background-size:cover;     -o-background-size:cover;        background-size:cover;/* IE Code, because IE is special :) */filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop')";

I'm not sure if you still need the -webkit- stuff at this point, you did when I last

looked into this problem.

As for the sticky footer, it's actually quite a tricky problem, that's why there's

so many articles and tutorials and methods on it out there. When you have some code

to review I'll gladly take a look at it.

EDIT:

 

I would change background to background-image, as only using background is not standards compliant and might be causing the issue.

For the shorthand version I think (I haven't looked it up though, so I might be wrong)

it's actually allowed. background-image is a sub-property of background that can be defined

when using the background shorthand catch-all syntax IIRC.

Alternatively, the full version would be:

background-color: #000;background-image: url(image.png);background-position: top center;background-repeat: no-repeat;background-attachment: fixed;

[Hagge]

Regarding the background problem, I have had success with this CSS:

 

background: #000 url(image.png) no-repeat top center fixed;-webkit-background-size:cover;   -moz-background-size:cover;     -o-background-size:cover;        background-size:cover;/* IE Code, because IE is special :) */filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop')";

I'm not sure if you still need the -webkit- stuff at this point, you did when I last

looked into this problem.

As for the sticky footer, it's actually quite a tricky problem, that's why there's

so many articles and tutorials and methods on it out there. When you have some code

to review I'll gladly take a look at it.

EDIT:

 

For the shorthand version I think (I haven't looked it up though, so I might be wrong)

it's actually allowed. background-image is a sub-property of background that can be defined

when using the background shorthand catch-all syntax IIRC.

Alternatively, the full version would be:

background-color: #000;background-image: url(image.png);background-position: top center;background-repeat: no-repeat;background-attachment: fixed;

Didnt Work, I tried it, and as soon as I Open the "hidden" spoiler, it gets several pictures under eachother:(

[Hagge]

I fixed it by addmin HTML in my CSS folder for my img file..

Now the problem i have left is the browsers..Cant figure out how to solve it..:/

I tried typing Doctype html in every html file, but the problem then appeared in my working browser to...IE..

I tried to design it afterwards..but got nowhere, my CSS file is not responding when I type doctype html in my files..

However, without the doctype code, the pages works in Internet explorer ONLY..

[alpenwasser]

I fixed it by addmin HTML in my CSS folder for my img file..

Great! :)

Now the problem i have left is the browsers..Cant figure out how to solve it..:/

I tried typing Doctype html in every html file, but the problem then appeared in my working browser to...IE..

I tried to design it afterwards..but got nowhere, my CSS file is not responding when I type doctype html in my files..

However, without the doctype code, the pages works in Internet explorer ONLY..

I think this one will be tricky to help with without some actual code. There are so

many things that can go wrong for each browser it's pretty much impossible to tell

what's going on without code.

[Hagge]

Great! :)

I think this one will be tricky to help with without some actual code. There are so

many things that can go wrong for each browser it's pretty much impossible to tell

what's going on without code.

Ofcourse :)

This is my CSS Code :)

 

p {

 font-size: 17;

 color: #000000;

 font-family: times;

}

html {

background-color: #000;

background-image: url(Bpac.png);

background-position: top center;

background-repeat: no-repeat;

background-attachment: fixed;

}

body {

 font-family: times;

 background-image: url(Bpac.png);

 margin: 0 auto;

 text-align: center;

}

.content {

 width: 910px;

 margin: 20px auto 0px auto;

 text-align: center;

}

.header {

 margin 10 auto;

 width: 910px;

 background-color: #999999;

 border: 5px outset #800000;

 font-size: 60px;

 color: #333333;

}

.main {

 width: 720px;

 float: right;

 background-color: #999999;

 border: 5px outset #800000;

 font-size: 22px;

 color: #333333;

 margin-top: 10px;

 padding: 15px;

}

.kontakt {

 width: 680px;

 float: right;

 background-image: url(pacwhite.jpg);

 border: 5px outset #800000;

 font-size: 22px;

 color: #333333;

 margin-top: 10px;

 padding: 15px;

}

.sidebar {

 width: 180px;

 float: left;

 text-align: left;

 padding: 10px;

 background-color: #999999;

 border: 5px outset #800000;

 font-size: 18px;

 color: #333333;

 margin-top: 10px;

}

.sidebar2 {

 width: 180px;

 float: left;

 text-align: left;

 padding: 10px;

 background-color: #999999;

 border: 5px outset #800000;

 font-size: 18px;

 color: #333333;

 margin-top: 10px;

}

.sidebar3 {

 width: 180px;

 float: left;

 text-align: left;

 padding: 10px;

 background-color: #999999;

 border: 5px outset #800000;

 font-size: 18px;

 color: #333333;

 margin-top: 10px;

}

.lis {

 font-size: 16px;

}

.länk {

 font-size: 14px;

}

.bild {

 float: left;

 width: 80px;

 margin: 0 1em 1em 1em;

 display:block;

 padding:1px;

 background: #999999;

}

.bild img{

 float: left;

 border: 5px outset #800000;

 width:100px;

 height:140px;

}

.bild p{

 float: center;

 margin-left: 40px;

 font-family: times;

}

.pray img{

 border: 5px outset #800000;

 height: 260px;

 widght: 320px;

}

.pray1 img{

 border: 5px outset #800000;

 height: 360px;

 widght: 320px;

}

 

And here's my HTML code for my Index page

<html>

<head>

<title> My Site </title>

<link rel="stylesheet" href="pacstyle.css"/>

</head>

<body>

<div class="content">

<div class="header">

My Site

</div>

<div class="sidebar">

» <a href="Index.html">Start</a>

<br>

» <a href="Menu2.html">Livet</a>

<br>

» <a href="Menu3.html">Kändislivet</a>

<br>

» <a href="Menu4.html">Döden</a>

<br>

</div>

<div class="main">

<h2>Intro</h2>

<p> Blablabla

</p>

<div class="pray1">

<img src="myimg.jpg">

</div>

</div>

<div class="sidebar2">

<h3> Skapelser </h3>

<ul class="lis">

<li><a href="Musik.html">Musik</a></li>

<li><a href="Film.html">Film</a></li>

</ul>

</div>

<div class="sidebar3">

» <a href="kontakt.html">Kontakt</a>

</div>

</div>

</body>

</html>

[alpenwasser]

If it's not super duper urgent I'll take a look tomorrow morning; off to watch the

new Star Trek tonight :)

[Hagge]

If it's not super duper urgent I'll take a look tomorrow morning; off to watch the

new Star Trek tonight :)

No problem :)

Have fun, I watched it yasterday :) Gotta love Benedict Cumberbatchs acting!:D

 

 

[alpenwasser]

Gotta love Benedict Cumberbatchs acting! :D

He was awesome! And I liked the rest of the movie quite a lot as well :).

EDIT: Update in lower part of this post :)

Anyway:

Here is what it looks like for me in Chromium:

And Firefox:

I only have an older Windows machine available at the moment, but it looks

quite similar in IE on that machine as well. I should have access to IE9 by

tomorrow and could check in that as well.

I have fixed two minor things so far, I added the character encoding and

the alt attribute for <img>.

The site validates according to the w3c validator now. (link).

I have temporarily uploaded it to my server (my laptop doesn't have a local server

running at the moment, and my main PC is still disassembled ;)).

The current source is:

 

<!doctype html><html><head>    <meta charset="UTF-8">    <title> My Site </title>    <link rel="stylesheet" href="pacstyle.css"/></head><body>    <div class="content">        <div class="header">        My Site        </div>        <div class="sidebar">            » <a href="Index.html">Start</a>            <br>            » <a href="Menu2.html">Livet</a>            <br>            » <a href="Menu3.html">Kändislivet</a>            <br>            » <a href="Menu4.html">Döden</a>            <br>        </div>        <div class="main">            <h2>Intro</h2>            <p> Blablabla            </p>            <div class="pray1">            <img alt="image" src="myimg.jpg">            </div>        </div>        <div class="sidebar2">            <h3> Skapelser </h3>            <ul class="lis">                <li><a href="Musik.html">Musik</a></li>                <li><a href="Film.html">Film</a></li>            </ul>        </div>        <div class="sidebar3">        » <a href="kontakt.html">Kontakt</a>        </div>    </div></body></html>

I haven't changed the css file yet.

So, the first question I have before starting to change stuff would be the following:

How is it supposed to look? I'm assuming all three side column sections should

appear to the left of the main container? If that's the case I'll get crackin' and

start to change stuff. :)

EDIT: Ok, I got a bit bored and started to tinker around anyway. If this is

what you have in mind, here's the new markup and css:

A few remarks: The trick when trying to place multiple items more or less in the same

area is usually to create a container for those elements (side_container in this case),

and then place and style primarily that container.

Aside from that: I have readjusted the width to 1000px, since it's a lot easier to

calculate with that (keep in mind: total width=width+padding+margin+border).

I would usually recommend going with percentages as width values, which would

allow for the page to adjust itself to different display sizes (a retina display

for example might display a pixel-defined website too small when said site has

been configured for normal display pixel densities). But since that approach does

have a few caveats I haven't converted your entire CSS to percentages. If you'd

like to do that I'll be happy to help though.

 

<!doctype html><html><head>    <meta charset="UTF-8">    <title> My Site </title>    <link rel="stylesheet" href="pacstyle.css"/></head><body>    <div class="content">        <div class="header">        My Site        </div>        <div class="side_container">            <div class="sidebar">                » <a href="Index.html">Start</a>                <br>                » <a href="Menu2.html">Livet</a>                <br>                » <a href="Menu3.html">Kändislivet</a>                <br>                » <a href="Menu4.html">Döden</a>                <br>            </div>            <div class="sidebar">                <h3> Skapelser </h3>                <ul class="lis">                    <li><a href="Musik.html">Musik</a></li>                    <li><a href="Film.html">Film</a></li>                </ul>            </div>            <div class="sidebar">            » <a href="kontakt.html">Kontakt</a>            </div>        </div> <!--/side_container-->        <div class="main">            <h2>Intro</h2>            <p> Blablabla            </p>            <div class="pray1">            <img alt="image" src="myimg.jpg">            </div>        </div>    </div></body></html>

p { font-size: 17; color: #000000; font-family: times;}html {background-color: #000;background-image: url(Bpac.png);background-position: top center;background-repeat: no-repeat;background-attachment: fixed;}body { font-family: times; background-image: url(Bpac.png); margin: 0 auto; text-align: center;}.content {    width:1000px;    margin: 20px auto 0px auto;    text-align: center;}.header {    width:990px;    margin 10 auto;    margin:0 auto 0 auto;    background-color: #999999;    border: 5px outset #800000;    font-size: 60px;    color: #333333;}.main { display:block; width: 755px; margin-right:auto; margin-left:220px; background-color: #999999; border: 5px outset #800000; font-size: 22px; color: #333333; margin-top: 10px; padding: 15px 0 15px 15px;}.side_container{ width: 180px; float: left; text-align: left; font-size: 18px; color: #333333;}.sidebar { width:100%; padding: 10px; border: 5px outset #800000; background-color: #999999; margin-top: 10px;}.lis { font-size: 16px;}.länk { font-size: 14px;}.bild { float: left; width: 80px; margin: 0 1em 1em 1em; display:block; padding:1px; background: #999999;}.bild img{ float: left; border: 5px outset #800000; width:100px; height:140px;}.bild p{ float: center; margin-left: 40px; font-family: times;}.pray img{ border: 5px outset #800000; height: 260px; widght: 320px;}.pray1 img{ border: 5px outset #800000; height: 360px; widght: 320px;}

If you want to check out the current version, it's on my server here

[Hagge]

He was awesome! And I liked the rest of the movie quite a lot as well :).

EDIT: Update in lower part of this post :)

Anyway:

Here is what it looks like for me in Chromium:



And Firefox:



I only have an older Windows machine available at the moment, but it looks
quite similar in IE on that machine as well. I should have access to IE9 by
tomorrow and could check in that as well.

I have fixed two minor things so far, I added the character encoding and
the alt attribute for <img>.

The site validates according to the w3c validator now. (link).
I have temporarily uploaded it to my server (my laptop doesn't have a local server
running at the moment, and my main PC is still disassembled ;)).

The current source is:
 

<!doctype html><html><head>    <meta charset="UTF-8">    <title> My Site </title>    <link rel="stylesheet" href="pacstyle.css"/></head><body>    <div class="content">        <div class="header">        My Site        </div>        <div class="sidebar">            » <a href="Index.html">Start</a>            <br>            » <a href="Menu2.html">Livet</a>            <br>            » <a href="Menu3.html">Kändislivet</a>            <br>            » <a href="Menu4.html">Döden</a>            <br>        </div>        <div class="main">            <h2>Intro</h2>            <p> Blablabla            </p>            <div class="pray1">            <img alt="image" src="myimg.jpg">            </div>        </div>        <div class="sidebar2">            <h3> Skapelser </h3>            <ul class="lis">                <li><a href="Musik.html">Musik</a></li>                <li><a href="Film.html">Film</a></li>            </ul>        </div>        <div class="sidebar3">        » <a href="kontakt.html">Kontakt</a>        </div>    </div></body></html>

I haven't changed the css file yet.

So, the first question I have before starting to change stuff would be the following:
How is it supposed to look? I'm assuming all three side column sections should
appear to the left of the main container? If that's the case I'll get crackin' and
start to change stuff. :)

EDIT: Ok, I got a bit bored and started to tinker around anyway. If this is
what you have in mind, here's the new markup and css:

A few remarks: The trick when trying to place multiple items more or less in the same
area is usually to create a container for those elements (side_container in this case),
and then place and style primarily that container.

Aside from that: I have readjusted the width to 1000px, since it's a lot easier to
calculate with that (keep in mind: total width=width+padding+margin+border).
I would usually recommend going with percentages as width values, which would
allow for the page to adjust itself to different display sizes (a retina display
for example might display a pixel-defined website too small when said site has
been configured for normal display pixel densities). But since that approach does
have a few caveats I haven't converted your entire CSS to percentages. If you'd
like to do that I'll be happy to help though.
 

<!doctype html><html><head>    <meta charset="UTF-8">    <title> My Site </title>    <link rel="stylesheet" href="pacstyle.css"/></head><body>    <div class="content">        <div class="header">        My Site        </div>        <div class="side_container">            <div class="sidebar">                » <a href="Index.html">Start</a>                <br>                » <a href="Menu2.html">Livet</a>                <br>                » <a href="Menu3.html">Kändislivet</a>                <br>                » <a href="Menu4.html">Döden</a>                <br>            </div>            <div class="sidebar">                <h3> Skapelser </h3>                <ul class="lis">                    <li><a href="Musik.html">Musik</a></li>                    <li><a href="Film.html">Film</a></li>                </ul>            </div>            <div class="sidebar">            » <a href="kontakt.html">Kontakt</a>            </div>        </div> <!--/side_container-->        <div class="main">            <h2>Intro</h2>            <p> Blablabla            </p>            <div class="pray1">            <img alt="image" src="myimg.jpg">            </div>        </div>    </div></body></html>

p { font-size: 17; color: #000000; font-family: times;}html {background-color: #000;background-image: url(Bpac.png);background-position: top center;background-repeat: no-repeat;background-attachment: fixed;}body { font-family: times; background-image: url(Bpac.png); margin: 0 auto; text-align: center;}.content {    width:1000px;    margin: 20px auto 0px auto;    text-align: center;}.header {    width:990px;    margin 10 auto;    margin:0 auto 0 auto;    background-color: #999999;    border: 5px outset #800000;    font-size: 60px;    color: #333333;}.main { display:block; width: 755px; margin-right:auto; margin-left:220px; background-color: #999999; border: 5px outset #800000; font-size: 22px; color: #333333; margin-top: 10px; padding: 15px 0 15px 15px;}.side_container{ width: 180px; float: left; text-align: left; font-size: 18px; color: #333333;}.sidebar { width:100%; padding: 10px; border: 5px outset #800000; background-color: #999999; margin-top: 10px;}.lis { font-size: 16px;}.länk { font-size: 14px;}.bild { float: left; width: 80px; margin: 0 1em 1em 1em; display:block; padding:1px; background: #999999;}.bild img{ float: left; border: 5px outset #800000; width:100px; height:140px;}.bild p{ float: center; margin-left: 40px; font-family: times;}.pray img{ border: 5px outset #800000; height: 260px; widght: 320px;}.pray1 img{ border: 5px outset #800000; height: 360px; widght: 320px;}

If you want to check out the current version, it's on my server here

 

Yes, I should look like that :) But the problem is, it does not :( I mean It looks alot different in other browsers than IE when I look at it..

If I put Doctype, the site gets destroyed even in IE ..:(

[alpenwasser]

Hm, is the current version also defective for you?

I have just checked that version in Internet Explorer 8, and it looks as it's supposed to look

for me. I'll have to wait until next week to try it in IE9 on my dad's laptop.

That doctype error is very curios, what doctype declaration are you using?

I'm currently using

<!doctype html>

And it works for me (see the uploaded version on my server).

[jetbuster]

Im not sure if this will help any of you but 
Opera

​Internet Explorer 10

[alpenwasser]

Im not sure if this will help any of you but 

Opera

[...img...]

​Internet Explorer 10

[...img...]

Actually that does help, thanks! :)

I've inserted a picture into it to avoid that "broken image" thing. And if the site

is still broken in Hagge's browser I'm starting to think the problem might be on his

local machine (not meant as an insult, but it seems to be working at least for jetbuster

and me ;) ).

Ah well, I shall wait for further feedback and go from there. :)

[Hagge]

Actually that does help, thanks! :)

I've inserted a picture into it to avoid that "broken image" thing. And if the site

is still broken in Hagge's browser I'm starting to think the problem might be on his

local machine (not meant as an insult, but it seems to be working at least for jetbuster

and me ;) ).

Ah well, I shall wait for further feedback and go from there. :)

Ye, I will get back to you as soon as im done with my work :)

[alpenwasser]

Ye, I will get back to you as soon as im done with my work :)

No worries, I'm in no rush ;)

[Hagge]

No worries, I'm in no rush ;)

Ok, tried it now,

Im getting a black background, im not getting my image :(

And the main bar, is not under under the header like ur pictures..its about 10cm below..the sidebars are fine tho :)

 

But now I came upon another small problem..my Å Ä Ö letters are not showing..The swedish letters :O

[alpenwasser]

Im getting a black background, im not getting my image :(

And the main bar, is not under under the header like ur pictures..its about 10cm below..the sidebars are fine tho :)

Is this your local version or the one on my server? And in what browser(s) does this

happen?

Could you upload the background pic? I could then try to play around with that, see

if I can get it to work.

 

But now I came upon another small problem..my Å Ä Ö letters are not showing..The swedish letters :o

Are you using the proper html entities/codes? In the code you gave to me there are the

explicit characters, and some browsers have trouble with those.

Å => Å | Å

Ä => Ä | Ä

etc.

See here for a source, but there's lots of other sources out there.

In a recent web project I did I had to use the numeric codes, because for some reason Internet

Explorer would not display the correct characters when using entities (Ä). No idea why though.

[vlad1500]

I dont know what the current unanswered question is. But for the background stuff try using z-index to let the browser know what the element depth is. example:

 

#1_level {

z-index:1;

}

 

#2_level {

z-index:2;

}

#3_level {

z-index:3;

}

 

 

 

[Hagge]

Is this your local version or the one on my server? And in what browser(s) does this

happen?

Could you upload the background pic? I could then try to play around with that, see

if I can get it to work.

 

Are you using the proper html entities/codes? In the code you gave to me there are the

explicit characters, and some browsers have trouble with those.

Å => Å | Å

Ä => Ä | Ä

etc.

See here for a source, but there's lots of other sources out there.

In a recent web project I did I had to use the numeric codes, because for some reason Internet

Explorer would not display the correct characters when using entities (Ä). No idea why though.

 

Ahh, right those codes :) I will try it right away:)

Here is my background :) http://www.wallpaperup.com/uploads/wallpapers/2013/02/27/45917/566f41d0233721f12a5e748fc649c9c5.jpg

 

Btw, The picture in the Main Container, is now at the right too, I had it in the center of the Main border..:/ Is there a way to fix it? I've tried float: Center and stuff, no work:(

 

 

I dont know what the current unanswered question is. But for the background stuff try using z-index to let the browser know what the element depth is. example:

 

#1_level {

z-index:1;

}

 

#2_level {

z-index:2;

}

#3_level {

z-index:3;

}

 

 

 

 

Tried, didnt work :(