Hi All
Ive been trying to design a css/div master page that will work on mozilla and internet explorer and alhtough ive done this before im trying a different template layout and just cant get it to work, basically ive attached the css and the page and what i want is for the navigation to be on the left and my content box to be directly in line with the navigation, my footer below these 2 boxes and my header directly above, i also wanted a background / border around the entire page. Normally i use the navigation at the top and it works fine. If you paste the code into a page you'll see what i mean. It looks the same on both mozilla and internet explorer and at the moment the boxes are sitting below each other. ive tried changing everything and im stuck.
Heres the CSS
1 .outerTable {
2 border: 1px solid #000000;
3 background-color: #FFFFFF;
4 height: auto;
5 width: 960px;
6 margin-left: 27px;
7 margin-top: 1%;
8 margin-right: 27px;
9 }
10 body {
11 background-color: #CCCCCC;
12 }
13 .header {
14 border: 1px solid #000000;
15 height: 150px;
16 width: 900px;
17 margin-left: 30px;
18 margin-top: 10px;
19 margin-right: 30px;
20 padding: 0px;
21 }
22 .navigation {
23 font-family: Verdana, Arial, Helvetica, sans-serif;
24 font-size: 11px;
25 color: #666666;
26 border: 1px solid #000000;
27 height: 300px;
28 width: 200px;
29 margin-top: 30px;
30 margin-left: 30px;
31 }
32
33 .content {
34 font-family: Verdana, Arial, Helvetica, sans-serif;
35 font-size: 11px;
36 color: #666666;
37 height: 300px;
38 width: 680px;
39 border: 1px solid #000000;
40 margin-left: 250px;
41 margin-top: 30px;
42 }
43 .footer {
44 font-family: Verdana, Arial, Helvetica, sans-serif;
45 font-size: 11px;
46 padding: 0px;
47 height: 20px;
48 width: 900px;
49 border: 1px solid #000000;
50 position:relative;
51 margin-left: 30px;
52 margin-top: 10px;
53 margin-bottom: 10px;
54 } Heres the HTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5 <link href="../css/test.css" rel="stylesheet" type="text/css" />
6 </head>
7
8 <body>
9 <div id="outerTable" class="outerTable">
10 <div id="header" class="header"></div>
11 <div id="navigation" class="navigation"></div>
12 <div id="content" class="content"></div>
13 <div id="footer" class="footer"></div>
14 </div>
15 </body>
16 </html>
Your help in this would be greatly appreciated.
No one said it was gonna be easy, then again, nothing worth doing ever is.