Transferring a layout to CSS

  Stuart Leyland 18:44 10 Jul 2004

Hi everyone.

I am very new to CSS and I'm having some difficulties in porting a design to CSS. The CSS-less design (done with tables I'm afraid) can be found here: click here. The desired effect can only be seen in Internet Explorer (maybe Firefox but I don't have it installed currently) at the minute due to Opera's inability to deal with tables properly :-( You can see my attempt thus far at click here.

As you can see, the CSS layout does not have the border around it like the tables one does. Also on the CSS layout, I cannot resize the section on the left (the one containing just the homepage link). No doubt there is something wrong with my CSS as I copied it from somewhere on the net and then dismantled it and could not put it back together :-(

Any advice on what is wrong or betters ways to achieve what I want (starting again is no problem).

Thanks in advance.

  PurplePenny 14:03 11 Jul 2004

I don't think that it is Opera's inability to handle tables that is the problem (that was fixed with 7.5 which is what I'm using). It looks more or less the same in Mozilla and Opera so it more likely that the problem is IE not following standards. You also have a proprietary attribute "bordercolor" which will get your page thrown out by validators and cause it to diplay differently in browsers that don't understand it.

I'll have a fiddle with your CSS and see what I can come up with.


  Stuart Leyland 14:09 11 Jul 2004

Hi Penny.

The way IE displays it should, in theory, be the right way because I set up cellspacing which should make it look like it does in IE rather than Opera and Mozilla. Oh well, happy days of cross browser compatibility, hey?!

Thanks for offering to have a play with my, no doubt, appalling attempt at CSS.

  PurplePenny 14:58 11 Jul 2004

I have come up with something that looks like your table layout in Opera and IE but Mozilla is applying the outer border differently <sigh>.

So far I can only get the link background to fill the whole of its side of the page by assigning a specific height. Is that OK?

If I post it on here will it mess up? I'l try it.......

<style type="text/css">

body {
font-family: Trebuchet MS, Arial, Verdana, Microsoft Sans Serif, Times New Roman;
font-size: 12pt;
background: #FFFFFF;
color: #33AF52;
margin: 0;
padding: 0;

width: 95%;
margin: 2.5%;
border: 1px solid #000000;

#top {
background: #4E679F;
margin: 5px;
padding: 5px;
text-align: center;

#links {
float: left;
background: #4E679F;
padding: 5px;
margin: 5px;
width: 20%;
height: 300px;

#content {
float: right;
padding: 5px;
margin: 5px;
background: #FFFFFF;
text-align: left;
width: 75%;




<div id="container">
<div id="top">Banner goes here</div>
<div id="links">Links go here</div>
<div id="content">
<p> </p>
<p>Hello.  Welcome to the Copley High School Council website. 
<a href="index.htm">Back home</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>



  PurplePenny 15:01 11 Jul 2004

I thought that it might - well you know what your content was - I took it from your table layout page.


  PurplePenny 15:03 11 Jul 2004

I used the following DOCTYPE when I was testing it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http: //www.">

(spaces inserted after http: and www. )

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

Elsewhere on IDG sites

Galaxy Note 8 vs iPhone X

The secrets of creating gory VFX

How to update iOS on iPhone or iPad

WhatsApp : comment lire vos messages sans que l’expéditeur le sache