CSS problem

  dave_the_red 08:08 09 Sep 06
Locked

I am totally new to CSS and html but have started to design my own site layout, basically i have this really annoying problem where in IE if i resize the window it messes up my columns and the right column moves to the bottom of the page rather than staying where it should be. It works fine in Firefox though.

Will post the code and would really appreciate some guidance on where i am going wrong.

Thanks

  dave_the_red 08:09 09 Sep 06

HTML is below



<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" media="all">
<title></title>
</head>
<body>

<div id="header"> Header</div>
<div id="navbar">Navbar</div>
<div class="leftcol">Leftcol</div>
<div class="midcol">Midcol</div>
<div class="rightcol">Rightcol</Div>
<div id="footer">Footer</div>
</body>

</html>

  dave_the_red 08:10 09 Sep 06

and the CSS



body
{
font-size: small;
font-family: "Times New Roman", Times, serif;
line-height: 180%;
background-color: #e6e6d9;
margin: 0
}

#header
{
text-align: center;
visibility: visible;
height: 10%
}

#navbar
{
background-color: #6b6c5a;
text-align: center;
width: 100%
height: 5%
}

.leftcol
{
background-color: #d2d8c7;
text-align: left;
width: 15%;
height: 80%;
float: left
}

.midcol
{
background-color: #a9ae9f;
text-align: center;
width: 70%;
height: 80%;
float: left
}

.rightcol
{
background-color: #d2d8c7;
text-align: left;
width: 15%;
height: 80%;
float: left
}

#footer
{
background-color: #6b6c5a;
text-align: center;
width: 100%
height: 5%;
}

  harristweed 09:54 09 Sep 06

a couple of suggestions:

1. Make sure you have a closing ';' on every line. The above code is missing some.

2. Alter .rightcol to:
.rightcol
{
background-color: #d2d8c7;
text-align: left;
width: 14.9%;
height: 80%;
float: right;
}
(float changed to right)

3. Alter the width in .leftcol and .rightcol to 14.9% (I.E. is not very good at maths) You may find that it then all works!

  Eric10 18:05 09 Sep 06

Changing the width as suggested by harristweed does indeed work for IE but unfortunately it gives the slightest hint of a right margin when viewed in Firefox and a considerable right margin when viewed in Opera.

I would suggest a slightly different approach. I would change the width of the middle column because that will require the code to be changed in only one place. You need to change the width as seen by IE while leaving other browsers unaffected. To do this add just one line to your stylesheet:
"* html .midcol {width:69.9%; /* This is the Tan hack */ }" without the quotes. This should go between the declarations for midcol and rightcol and is adapted from a workaround for the Box Model problem.

click here for more information on the Box Model problem.

One other potential problem that I don't have an answer for at the moment is that if you add a DOCTYPE to your page then the height declarations no longer have any effect.

  dave_the_red 20:12 09 Sep 06

thanks a lot for the suggestions will try them out now, and thanks for the observations regarding the closing ; i didnt notice some were missing.

  Eric10 20:37 09 Sep 06

The final ; of a style declaration is optional but it is good practice to include it as it isn't then overlooked if extra lines are added to the code. I earlier raised the question of DOCTYPE and height and there is a solution here. click here.

Basically in your case you would add the line:
"html,body { height:100%; }" just below your body declaration then you can use a strict DOCTYPE at the top of your pages.

  dave_the_red 20:42 09 Sep 06

Thanks Eric, i have tried your suggestion and it just seems to mess the columns up totally. Maybe i am putting it in the wrong place? Sorry for this, it is probably me being a little stupid, but i am totally new to this so wouldnt know how to come up with my own solutions just yet :)

  dave_the_red 20:47 09 Sep 06

*update i have tried harristweeds suggestion except i have only changed the width in the right column and changed the float to right and that seems to work great, no hint of a margin in firefox and IE and will check it with opera once i have downloaded it.

  dave_the_red 20:53 09 Sep 06

You were right Eric, just downloaded opera and it is a really obvious margin, oh well back to the drawing board.

  Eric10 21:58 09 Sep 06

This is your modified stylesheet if you want to play around with it:

body
{
font-size: small;
font-family: "Times New Roman", Times, serif;
line-height: 180%;
background-color: #e6e6d9;
margin: 0;
}

html,body
{ height:100%;
background-color: #6b6c5a;
}

#header
{
text-align: center;
visibility: visible;
height: 10%;
background-color: #d2d8c7;
}

#navbar
{
background-color: #6b6c5a;
text-align: center;
width: 100%;
height: 5%;
}

.leftcol
{
background-color: #d2d8c7;
text-align: left;
width: 15%;
height: 80%;
float: left;
}

.midcol
{
background-color: #a9ae9f;
text-align: center;
width: 70%;
height: 80%;
float: left;
}

.rightcol
{
background-color: #d2d8c7;
text-align: left;
width: 15%;
height: 80%;
float: left;
}

* html .rightcol {width:14.9%; /* This is the Tan hack */ }


#footer
{
background-color: #6b6c5a;
text-align: center;
width: 100%;
height: 5%;
}

If you copy and paste it then you will avoid any typing errors. I would suggest backing up your original stylesheet first so that you can revert to it if necessary. With this stylesheet you can use a DOCTYPE on your pages and it will still display correctly.
e.g. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "click here">

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

The Pantone Colour of the Year 2017 is Green

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…