Hello!

I have watched DnnCreative's brilliant video about how to make tableless skins and after that I decided to be a little creative and make my own css-skin from scratch. I've spend some hours trying out css code. I have studied the css code that following with "Simple Red Leaf Skin 3 Panes" and now I'm trying out a concept with top, left, content, right and bottompanes. I don't attach importance to the dotnetnuke code yet but rather concentrating on how css elements will fit in the different browsers. This code is okey in the Internet Explorer 6.x and Opera 8.x. The problem is Firefox (I use 2.0 now). The rightside seems to be pushed down on another row. I tried out several solutions now but the problem is still here. Can anyone help?

I use for now a link to my css inside the html just for testing purposes.

Here is the HTML code:




And here goes the CSS:

body {
        margin:5 auto;
        padding:0px;
        text-align:center;
        background-color:#FFFF99;
}
       
#wrap
{
    width: 850px;
    border: 1px black solid;
    list-style-type: none;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    overflow:hidden;
}
   
#RightSide {
    width:25%;
    float:left;
    background:#FFCC00;
    padding:5px;
    text-align:left;
}
   
#ContentArea {
    width:50%;
    float:left;
    background:#fff;
    padding:5px;
    text-align:left;
}
   
#LeftSide {
    width:25%;
    float:left;
    background:#CCCCCC;
    padding:5px;
    text-align:left;
}
#BottomArea {
    width:100%;
    float:left;
    background:#fff;
    padding:5px;
    text-align:left;
}
       
#TopArea {
    width:100%;
    float:left;
    background:#fff;
    padding:5px;
    text-align:left;
}

p {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
}

p,h1 {
    margin:0px 10px 10px 10px;
}
   
h1 {
    font-size:14px;
    padding-top:10px;
}

#TopArea h1 { margin:0px; padding:10px}

Hello again!

I had to comment out the html-code. It seems that I cannot paste the code directly: So here it is (disregard the comment-signs):

<!--


-->

Hi again!

Due to some problems with my HTML code in this forum, I have paste that in a webpage. Click to see the HTML and CSS code. Hope someone can help me with this!

The link: http://seaking.page.tl/Code.htm

Hello,

I would try reducing the percentages that you have set for the widths of your content panes.

- Try taking off 5% of each of the percentages as a starting point and see if this fixes the problem.

If it does, you can then increase the percentages until you find the percentage number that works.

Thanks,