Forums
This topic is locked
Disjointed Layout
Posted 09 Aug 2006 13:22:19
1
has voted
09 Aug 2006 13:22:19 Richard Wood posted:
When viewing www.brunelrugby.co.uk in anything other than IE the bottom gray bar appears disjointed and smaller than specified in the css. I have include the css for the entire page below. Any help would be appreciated.Rich
#greybar is the name of the div im worried about.
body {
background-image: url(Images/images/backTile.gif);
}
a {
font-size: 12px;
color: #CCCCCC;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}
#Layer2 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:60px;
z-index:1;
background-color: #999999;
}
#greyBar {
position:absolute;
width:100%;
height:18px;
z-index:1;
left:0px;
top:554px;
background-color: #999999;
}
#firstRowOne {
position:absolute;
left:0px;
top:0px;
width:161px;
height:60px;
z-index:2;
background-color: #DBD9D9;
}
#Layer3 {
position:absolute;
left:161px;
top:0px;
width:479px;
height:60px;
z-index:3;
background-color: #CCCCCC;
}
#Layer4 {
position:absolute;
left:640px;
top:0px;
width:160px;
height:60px;
z-index:4;
background-color: #B2B2B2;
}
#Layer5 {
position:absolute;
left:161px;
top:60px;
width:479px;
height:50px;
z-index:1;
background-color: #DBD9D9;
}
#Layer6 {
position:absolute;
left:640px;
top:60px;
width:161px;
height:50px;
z-index:1;
background-color: #662D2D;
}
#Layer7 {
position:absolute;
left:0px;
top:110px;
width:161px;
height:224px;
z-index:1;
background-color: #662D2D;
line-height:60%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
overflow: hidden;
}
#Layer8 {
position:absolute;
left:161px;
top:110px;
width:479px;
height:224px;
z-index:2;
}
#Layer9 {
position:absolute;
left:640px;
top:110px;
width:161px;
height:224px;
z-index:3;
background-image: url(Images/images/webLayout_09.gif);
}
#newsBox {
position:absolute;
left:161px;
top:334px;
width:162px;
height:173px;
z-index:5;
background-color: #DBD9D9;
}
#Layer10 {
position:absolute;
left:327px;
top:367px;
width:156px;
height:173px;
z-index:6;
}
#Layer11 {
position:absolute;
left:322px;
top:334px;
width:162px;
height:173px;
z-index:6;
background-color: #DBD9D9;
}
#Layer12 {
position:absolute;
left:484px;
top:334px;
width:156px;
height:173px;
z-index:7;
background-color: #DBD9D9;
}
#Layer13 {
position:absolute;
left:640px;
top:334px;
width:161px;
height:220px;
z-index:8;
background-color: #662D2D;
}
#Layer14 {
position:absolute;
left:161px;
top:507px;
width:479px;
height:47px;
z-index:9;
background-color: #CCCCCC;
}
.style1 {color: #666666}
#Layer15 {
position:absolute;
left:642px;
top:643px;
width:161px;
height:100%;
z-index:1;
background-color: #662D2D;
}
#Layer16 {
position:absolute;
left:640px;
top:154px;
width:157px;
height:100%;
}
#Layer17 {
position:absolute;
left:640px;
top:614px;
width:161px;
height:300;
z-index:10;
background-color: #662D2D;
}
.style10 {color: #666666; font-size: 14px; }
#Layer18 {
position:absolute;
left:0px;
top:582px;
width:802px;
height:60px;
z-index:10;
background-color: #662D2D;
}
.style11 {font-size: 12px}
.style12 {
color: #333333;
font-weight: bold;
}
-->
body {
background-image: url(Images/images/backTile.gif);
}
a {
font-size: 12px;
color: #CCCCCC;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}
#Layer2 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:60px;
z-index:1;
background-color: #999999;
}
#greyBar {
position:absolute;
width:100%;
height:18px;
z-index:1;
left: 0px;
top: 554px;
background-color: #999999;
}
#firstRowOne {
position:absolute;
left:0px;
top:0px;
width:161px;
height:60px;
z-index:2;
background-color: #DBD9D9;
}
#Layer3 {
position:absolute;
left:161px;
top:0px;
width:479px;
height:60px;
z-index:3;
background-color: #CCCCCC;
}
#Layer4 {
position:absolute;
left:640px;
top:0px;
width:160px;
height:60px;
z-index:4;
background-color: #B2B2B2;
}
#Layer5 {
position:absolute;
left:161px;
top:60px;
width:479px;
height:50px;
z-index:1;
background-color: #DBD9D9;
}
#Layer6 {
position:absolute;
left:640px;
top:60px;
width:161px;
height:50px;
z-index:1;
background-color: #662D2D;
}
#Layer7 {
position:absolute;
left:0px;
top:110px;
width:161px;
height:224px;
z-index:1;
background-color: #662D2D;
line-height:60%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
overflow: hidden;
}
#Layer8 {
position:absolute;
left:161px;
top:110px;
width:479px;
height:224px;
z-index:2;
}
#Layer9 {
position:absolute;
left:640px;
top:110px;
width:161px;
height:224px;
z-index:3;
background-image: url(Images/images/webLayout_09.gif);
}
#newsBox {
position:absolute;
left:161px;
top:334px;
width:162px;
height:173px;
z-index:5;
background-color: #DBD9D9;
}
#Layer10 {
position:absolute;
left:327px;
top:367px;
width:156px;
height:173px;
z-index:6;
}
#Layer11 {
position:absolute;
left:322px;
top:334px;
width:162px;
height:173px;
z-index:6;
background-color: #DBD9D9;
}
#Layer12 {
position:absolute;
left:484px;
top:334px;
width:156px;
height:173px;
z-index:7;
background-color: #DBD9D9;
}
#Layer13 {
position:absolute;
left:640px;
top:334px;
width:161px;
height:220px;
z-index:8;
background-color: #662D2D;
}
#Layer14 {
position:absolute;
left:161px;
top:507px;
width:479px;
height:47px;
z-index:9;
background-color: #CCCCCC;
}
.style1 {color: #666666}
#Layer15 {
position:absolute;
left:642px;
top:643px;
width:161px;
height:100%;
z-index:1;
background-color: #662D2D;
}
#Layer16 {
position:absolute;
left:640px;
top:154px;
width:157px;
height:100%;
}
#Layer17 {
position:absolute;
left:640px;
top:614px;
width:161px;
height:300;
z-index:10;
background-color: #662D2D;
}
.style10 {color: #666666; font-size: 14px; }
#Layer18 {
position:absolute;
left:0px;
top:582px;
width:802px;
height:60px;
z-index:10;
background-color: #662D2D;
}
.style11 {font-size: 12px}
.style12 {
color: #333333;
font-weight: bold;
}
-->
Replies
Replied 09 Aug 2006 19:58:35
09 Aug 2006 19:58:35 John Marsden replied:
Change it to
<pre id=code><font face=courier size=2 id=code>
#greyBar {
position:absolute;
width:100%;
padding:0px 0px 6px 0px;
z-index:1;
left:0px;
top:554px;
background-color: #999999;
}
</font id=code></pre id=code>
It'll add a bit of padding to the IE version but I reckon it's acceptable.
My experience, for what its worth, is that using DW frames is a real pain in the neck and a lot of absolute positioning = Z levels isn't much better (others may have had a better experience - I'm NOT saying I'm right about this). Initially it seems easist but there's too many incompabilites between browser that cause problems.
I suggest when the sites done that you make a second version using more conventional CSS column layouts and hand code it to begin with, its the best way to learn. DW is really good with CSS once you understand how CSS works but is not good giving you the understanding. Try here www.glish.com/css/ if you decide to do that.
<pre id=code><font face=courier size=2 id=code>
#greyBar {
position:absolute;
width:100%;
padding:0px 0px 6px 0px;
z-index:1;
left:0px;
top:554px;
background-color: #999999;
}
</font id=code></pre id=code>
It'll add a bit of padding to the IE version but I reckon it's acceptable.
My experience, for what its worth, is that using DW frames is a real pain in the neck and a lot of absolute positioning = Z levels isn't much better (others may have had a better experience - I'm NOT saying I'm right about this). Initially it seems easist but there's too many incompabilites between browser that cause problems.
I suggest when the sites done that you make a second version using more conventional CSS column layouts and hand code it to begin with, its the best way to learn. DW is really good with CSS once you understand how CSS works but is not good giving you the understanding. Try here www.glish.com/css/ if you decide to do that.