...

View Full Version : please help this old school tables man with css :-(



gmnightingale
11-24-2009, 09:34 PM
I have been using tables for years and have recently been trying to teach myself site structure with css, which i have previously only used for decoration.

I have already found myself bodging things with tables and going back to old habits someone please help me :(

for some reason im loosing my inside right border also nothing seems to be at the size i set it and my padding also seems to be going crazy if any one can help I would be very very pleased you can see my bodge up at http://www.actioncomputing.co.uk/index-css-rebuild.html.

here is my code as well. I never have these problems using my old tables :-(

first html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Untitled Document</title>
<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="48" valign="top" background="images/actioncomputing_02repeat_16.jpg"><img src="images/actioncomputing_02.jpg" width="47" height="767"></td>
<td width="922" valign="top" ><div class="contentcontainer">
<div class="Topleftmenu"></div>
<div class="topmenuright"></div>
<div class="menumiddle"></div>
<div class="menubottomimage"></div>
<div class="menubottomright"></div>
<div class="Flashtop"><img src="images/flashback.jpg"></div>
<div class="containerpage">
<div class="insideleftborder"><img src="images/sidegradients.jpg" width="9" height="219"></div>
<div class="insiderightborder"></div>
<div class="leftcontent">
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom">
<p>d df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg</p>
<p>&nbsp;</p>
</div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom">d df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg</div><p>&nbsp;</p>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom">d df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg</div><p>&nbsp;</p>
</div>
<div class="rightcontent">
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">d df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf<hr>
sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf <hr>sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg dgsd sg sdsdg sds s gsgdgs d sd df </div>
</div>


</div></td>
<td width="48" valign="top" background="images/actioncomputing2_07rep_17.jpg"><img src="images/actioncomputing2_07.jpg" width="47" height="767"></td>
</tr>
</table>

</body>
</html>


and secondly css page



@charset "utf-8";

html{height: 100%;
min-height: 100%;}
body { margin:0px;
text-align:center;
background-image:url(images/actioncomputing_01try.jpg);
height: 100%;
min-height: 100%;}
td{height: 100%;
min-height: 100%;}

hr {
margin-top:5px;
margin-bottom:5px;
width: 100%;
height: 2px;
color: blue;
}

.Container{margin-left: auto; margin-right: auto; width:1000px; height:100%; text-align: left; background-color:#FFFFFF; }
.contentcontainer{width:906px; float:left;}
.Leftcolumn{width:47px; height:100%; float:left; background-color:#993300; background-image:url(images/actioncomputing_02repeat_16.jpg); }
.Rightcolumn{width:47px; height:100%; float:right; background-color:#993300; background-image:url(images/actioncomputing2_07rep_17.jpg); }
.Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
.topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
.menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
.containerpage{ width:906px; height:800px; float:left; background-color:#ffffff;}
.menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
.menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}
.Flashtop{width:622px; height:98px; float:right;}
.insideleftborder{width:9px; height:105%; background-color:#6DA7E6; float:left;}
.insiderightborder{width:9px; height:105%; background-color:#6DA7E6; float:right;}
.leftcontent{margin-left:20px; width:590px; height:200px; float:left; }
.rightcontent{width:253px; height:253px; float:right;}
.rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
.rightcontent-bottom{width:253px; background-color:#AAC7E7; padding-left:10px; padding-right:10px; }
.leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
.leftcontent-bottom{width:590px; padding-left:10px; padding-right:20px; background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; }

Rowsdower!
11-24-2009, 09:45 PM
Hello and welcome to the forum!

You've have
at the beginning and end of your code snippets so they aren't getting displayed properly. Please edit your post with a closing tag of at the end of each code block to make things easier to read for starters.

Also, for the CSS I recommend a universal reset like this:

* {margin:0;padding:0;border:0;}

This gets rid of browser default padding, margins, and borders for all elements on the page which makes cross-browser development of CSS much easier. And one more tip for the moment, develop/debug using Firefox and then tweak and hack the display to work in Internet Explorer. If you aren't already doing this it's important to start and it will save you many headaches.

Oh, and download Firebug to use with Firefox. It's absolutely amazing. Anyway, more to come once I can read your code. :D

Excavator
11-24-2009, 11:38 PM
Hello gmnightingale,
The biggest mistake I see is trying to fit two elements that add up to a greater width than the container your putting them in. Have a look at how the box model works (http://www.w3.org/TR/CSS2/box.html)- padding and margin are included in total width.

I've never understood the logic behind slicing up an image and then just putting it all back together again. Just leaving it whole and using it as a background makes a lot more sense in most cases.

Have a look at this to get you a start
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container-out {
width: 1016px;
margin: 0 auto;
background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) no-repeat right top;
}
#container-in {
width: 969px;
background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) no-repeat left top;
overflow: auto;
font-size: 0.8em;
}
#header {
height: 150px;
width: 894px;
margin: 0 0 0 61px;
background: #f00;
}
#containerpage {
width: 894px;
margin: 0 0 0 61px;
background: #fff;
overflow: auto;
}
.leftcontent-tops{
width: 590px;
height: 41px;
float: left;
background: url(http://www.actioncomputing.co.uk/images/sectiontop.jpg);
}
.leftcontent-bottom{
width: 550px;
float: left;
padding: 10px 20px;
background:url(http://www.actioncomputing.co.uk/images/sectionback.jpg) no-repeat;
}
.rightcontent-tops{
height:41px;
margin: 0 0 0 590px;
background: #0f0;
}
.rightcontent-bottom{
margin: 0 0 0 590px;
background-color:#AAC7E7;
padding: 10px;
}
</style>
</head>
<body>
<div id="container-out">
<div id="container-in">
<div id="header">
<!--end header--></div>
<div id="containerpage">
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<!--end containerpage--></div>
<!--end container-in--></div>
<!--end container-out--></div>
</body>
</html>

gmnightingale
11-25-2009, 12:32 AM
its because i intend to use certain parts of the images as flash anim's all these things have never been a problem to me using tables I have always been able to achieve what i want without a problem its the whole cross over thats doing me in :-)

Excavator
11-25-2009, 01:00 AM
its because i intend to use certain parts of the images as flash anim's all these things have never been a problem to me using tables I have always been able to achieve what i want without a problem its the whole cross over thats doing me in :-)

I've no doubt there's a learning curve. I'm lucky, I started out with CSS/XHTML and never learned tables.

gmnightingale
11-25-2009, 02:53 PM
Right thank you once again for the code you sent it showed me a route round,

But, I am still having some serious vertical problems, my main containers just stop and dont go all the way to the bottom of the page?

you can see what i mean by visiting

www.actioncomputing.co.uk/index-css-rebuild.html

and my code is below.

All help is once again very appreciated.

CSS


@charset "utf-8";

* {margin: 0; padding: 0; border: 0; outline: 0;}
html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}


.header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
.Container{margin-left: auto; margin-right: auto; width:1000px; height:100%; min-height:100%; text-align: left; background-color:#FFFFFF;}
.Containerleftborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-x left top; }
.Containerrightborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) no-repeat right top; }
.content1container{width:906px; margin: 0 0 0 47px; height:100%; min-height:100%; background-color:#ffffff; position:relative; }
.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:15px; }
.contentright{width:291px; height:100%; min-height:100%; background:#ffffff; float:right;}
.leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
.leftcontent-bottom{width:560px; padding-left:10px; padding-right:20px; background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; margin-bottom:20px; }
.rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
.rightcontent-bottom{width:233px; background-color:#AAC7E7; padding-left:10px; padding-right:10px; float:right; margin-bottom:20px; }

.insideleftborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:0px;}
.insiderightborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:897px;}

.Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
.topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
.menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
.menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
.menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}

#centralisemenu{ text-align:center;}

a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
a.menu:hover {color: Black !important ; text-decoration: underline; font-weight:bolder; font-size:20px !important }
a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
a.menu:visited {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }







HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="Container">
<div class="Containerleftborder">
<div class="Containerrightborder">


<div class="header">
<div class="Topleftmenu">
<p style="text-align:center; padding-top:7px;">
<a class="menu" href="#">Home &#124;</a> <a class="menu" href="#">Contact &#124;</a> <a class="menu" href="#">About &#124;</a></p>

</div>
<div class="topmenuright"></div>
<div class="menumiddle"></div>
<div class="menubottomimage"></div>
<div class="menubottomright"></div>
<div class="Flashtop"><img src="images/flashback.jpg"></div></div>



<div class="content1container">
<div class="contentleft">
<div class="insideleftborder"></div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom"><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p> </p>
</div>
<div class="leftcontent-tops"></div>
<div class="leftcontent-bottom"><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p></div></p>
</div>
<div class="contentright">
<div class="insiderightborder"></div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="rightcontent-tops"></div>
<div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

</div>
</div>
</div>
</div>
</div>
</body>
</html>

Excavator
11-25-2009, 05:02 PM
Right thank you once again for the code you sent it showed me a route round,

But, I am still having some serious vertical problems, my main containers just stop and dont go all the way to the bottom of the page?

you can see what i mean by visiting

www.actioncomputing.co.uk/index-css-rebuild.html

Yes, that's what they are supposed to do when you specify the heights like that. height:100%; can be misleading, it often doesn't do what you expect it to. You just have to realize what it is 100% of.
If you put a height of 100% on your body, then .Containerrightborder will be the full height of the viewport when it loads. If content is longer than the viewport, .Containerrightborder still ends at the height of the viewport.

In that original code I gave you, I did not address this issue because your shadow .jpg's do not lend themselves well to repeating but that is how you fix this problem. You may need to think about doing some photoshopping on your border shadow images after you try this fix -

@charset "utf-8";

* {margin: 0; padding: 0; border: 0; outline: 0;}
html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}


.header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
.Container {
margin: 0 auto;
width:1000px;
text-align: left;
background:#FFFFFF;
}
.Containerleftborder{
width:1000px;
background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-y left;
}
.Containerrightborder{
width:1000px;
background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) repeat-y right;
overflow: auto; /*to clear the floats*/
}
.content1container{
width:906px;
margin: 0 0 0 47px;
overflow: auto;
background:#fff;
position:relative;
}
.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:15px; }
.contentright{width:291px

The secret is overflow:auto; Here is a site that explains (http://www.quirksmode.org/css/clearing.html)how that clears your floats.

abduraooft
11-25-2009, 05:07 PM
you can see what i mean by visiting

www.actioncomputing.co.uk/index-css-rebuild.html

and my code is below.

All help is once again very appreciated. Don't end up in divitis (http://csscreator.com/divitis)! There are more tags other tags than <div> and <p>, so use them also in their context to make your document semantic (http://boagworld.com/technology/semantic-code-what-why-how).

gmnightingale
11-25-2009, 05:22 PM
Don't end up in divitis (http://csscreator.com/divitis)! There are more tags other tags than <div> and <p>, so use them also in their context to make your document semantic (http://boagworld.com/technology/semantic-code-what-why-how).

what exactly are you saying and in what part of my document would you use different tags for example?

gmnightingale
11-25-2009, 05:28 PM
Yes, that's what they are supposed to do when you specify the heights like that. height:100%; can be misleading, it often doesn't do what you expect it to. You just have to realize what it is 100% of.
If you put a height of 100% on your body, then .Containerrightborder will be the full height of the viewport when it loads. If content is longer than the viewport, .Containerrightborder still ends at the height of the viewport.

In that original code I gave you, I did not address this issue because your shadow .jpg's do not lend themselves well to repeating but that is how you fix this problem. You may need to think about doing some photoshopping on your border shadow images after you try this fix -

@charset "utf-8";

* {margin: 0; padding: 0; border: 0; outline: 0;}
html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}


.header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
.Container {
margin: 0 auto;
width:1000px;
text-align: left;
background:#FFFFFF;
}
.Containerleftborder{
width:1000px;
background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-y left;
}
.Containerrightborder{
width:1000px;
background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) repeat-y right;
overflow: auto; /*to clear the floats*/
}
.content1container{
width:906px;
margin: 0 0 0 47px;
overflow: auto;
background:#fff;
position:relative;
}
.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:15px; }
.contentright{width:291px

The secret is overflow:auto; Here is a site that explains (http://www.quirksmode.org/css/clearing.html)how that clears your floats.

So basically i should stop trying to use things at 100% i read somewhere that if you set the html and body tag to "min-height:100%" that it should work oh well nevermind so just use overflow auto from now on? as for the repeating graphic in the tables I used for the site I had that graphic we are using as a image and the cell had a repeating background that followed on after the image that matched in perfectly. any idea how i can achieve this in css or am I just going to have to bodge a really long graphic to fit?

abduraooft
11-25-2009, 05:42 PM
what exactly are you saying and in what part of my document would you use different tags for example?
Say, your
<div class="insideleftborder"></div> can be completely removed, if you make a single image having dimensions 906X1 px, with a small(8px wide?) blue edges, and applied it as the background of your content1container.

Take a look at the faux column approach (http://www.alistapart.com/articles/fauxcolumns/)

Also, I think you may combine sectiontop.jpg and sectionback.jpg into a single one and apply it as the background of a single div/p with some top-padding.

gmnightingale
11-25-2009, 05:54 PM
Yeah i see your point, the left hand blue border is going to fade from white so its not so sharp I just have not put the graphic in the container yet, And some of the sections are not finished and are just put in there as they are going to be flash anims so I thought I would have to slice it all up. I would really appreciate your input when I get it all done to save me time on future projects :-) thank you for your input

Rowsdower!
11-25-2009, 05:56 PM
Don't make a long graphic. That's a waste of bandwidth on short pages and on long pages you'll be right back where you started.

Instead make an image that is 1px high by the required width and tile it vertically. Use a PNG image type with opacity so that you aren't fighting to keep your top-to-bottom gradient while still trying to keep your side-to-side gradient flowing to the page bottom. This image should only contain the left and right shadow effects (and the blank space in the middle, of course).

Making this single image will also let you re-work the Containerleftborder and Containerleftborder <div> elements. There is no good reason to use two divs to create one background effect. This is an example of "divitis" that abduraooft was talking about.

Rowsdower!
11-25-2009, 06:04 PM
Actually, in looking at your page again I really see 3 backgrounds that are in play:

1) a pattern background (horizontal lines)
2) a gradient that runs horizontally across the page top that darkens the pattern background
3) a gradient that runs on either side of the content box

I would actually create these three backgrounds separately and apply them as follows:

html -> horizontal gradient at page top - repeat-x only
body -> horizontal lines image pattern - repeat
container -> vertical side gradients - repeat-y only

And yes, you can actually apply a background to the <html> element.

gmnightingale
11-25-2009, 06:20 PM
Don't make a long graphic. That's a waste of bandwidth on short pages and on long pages you'll be right back where you started.

Instead make an image that is 1px high by the required width and tile it vertically. Use a PNG image type with opacity so that you aren't fighting to keep your top-to-bottom gradient while still trying to keep your side-to-side gradient flowing to the page bottom. This image should only contain the left and right shadow effects (and the blank space in the middle, of course).

Making this single image will also let you re-work the Containerleftborder and Containerleftborder <div> elements. There is no good reason to use two divs to create one background effect. This is an example of "divitis" that abduraooft was talking about.

Think I will go with the png idea! the thought had crossed my mind but to be 100% honest I already had the graphics and was being a bit lazy. Thanks for your input I think its amazing that people put there time into helping others If only the world was like a forum ;-)

Rowsdower!
11-25-2009, 06:36 PM
I got bored and whipped something up. Take a look at this for a starter:
http://rowsdower.host56.com/background_example.php

gmnightingale
11-25-2009, 07:35 PM
Love that effect looks like the background is curling under, looks great thanks!

gmnightingale
11-26-2009, 07:32 PM
Hello again,

Basically there now, just one final problem the whole site looks completely messed up in IE6 its fine in IE7 and firefox! :-( Any advice?

can be viewed at

http://www.actioncomputing.co.uk

gmnightingale
11-26-2009, 07:34 PM
forgot to add the code here it is.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Design Bournemouth, Graphic Design Hampshire, Logo Design Dorset, Southampton</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Website Design and Graphic Design by Action computing, A leading Website Design Company. Website Design, Ecommerce Web Design & Web Development. Logo Design, Label Design ."/>
<meta name="keywords" content="web design bournemouth, website design, web designers, website optimization, advert design,logo design, pc repair, label design, design, web design company, ecommerce, ecommerce web design, hampshire, dorset, bournemouth, southampton"/>
<meta name="author" content="Website and Graphic Design Company, Action Computing"/>
<meta name="language" content="EN"/>
<meta name="Classification" content="Website Design and Graphic Design Company"/>
<meta name="copyright" content="www.ActionComputing.co.uk"/>
<meta name="robots" content="index, follow"/>
<meta name="revisit-after" content="7 days"/>
<meta name="document-classification" content="Website Design and Graphic Development"/>
<meta name="document-type" content="Public"/>
<meta name="document-rating" content="Safe for Kids"/>
<meta name="document-distribution" content="Global"/>

<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1",
dimensions: [220, 200],
imagearray: [
["images/demos/sdsasbuilt.jpg", "http://www.asbuiltsdsgroup.co.uk/", "_new", "Asbuilt SDS group front portal"],
["images/demos/sdsgroup.jpg", "http://www.sds-group.co.uk/", "_new", "SDS Asbuilt group front portal"],
["images/demos/gillyprint.jpg", "http://www.gillyprinters.com", "_new", "Gilly Print, professional labelling Website"],
["images/demos/firetradeasia.jpg", "http://www.hemminginfo.co.uk/index.cfm?fuseaction=home.products&producttypeid=2", "_new", "Hemming Information Group online Fire Trade Europe Directory ."],
["images/demos/timespace.jpg", "http://www.intensive-driving-schools.co.uk/", "_new", "Time and Space driving schools website"],
["images/partytubhire.jpg", "http://www.partytubhire.co.uk", "_new", "Party Tub Hire Website 'Relax in style'"],
["images/demos/arborventure.jpg", "http://www.arborventure.co.uk/", "_new", "Arbor Venture Website"]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div class="Container">



<div class="header">
<div class="Topleftmenu">
<p style="text-align:center; padding-top:7px;">
<a class="menu" href="index.html">Home</a> <span class="vertline">&#124;</span> <a class="menu" href="contact-action-computing-web-design.php">Contact</a> <span class="vertline">&#124;</span> <a class="menu" href="#">About Us</a> <span class="vertline">&#124;</span></p>

</div>
<div class="topmenuright"></div>
<div class="menumiddle"></div>
<div class="menubottomimage"></div><div class="menubottomright">
<p style="text-align:center; padding-top:7px;"><a class="menu" href="webdesign-web-designer-hampshire-dorset-bournemouth.htm">Web Design</a> <span class="vertline">&#124;</span><a class="menu" href="pc-maintenance-hampshire-dorset.htm"> PC Maintenance</a> <span class="vertline">&#124;</span> <a class="menu" href="logo-Design-hampshire-dorset-bournemouth.htm">Logo Design</a> <span class="vertline">&#124;</span> <a class="menu" href="label-Design-hampshire-dorset-bournemouth.htm">Label Design</a> <span class="vertline">&#124;</span> <a class="menu" href="graphic-Design-hampshire-dorset-bournemouth.htm">Other Graphic Design</a></p>
</div>
<div class="Flashtop">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','622','height','101','src','images/headermov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/headermov' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="622" height="101">
<param name="movie" value="images/headermov.swf" />
<param name="quality" value="high" />
<embed src="images/headermov.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="622" height="101"></embed>
</object></noscript>
</div>
</div>



<div class="content1container">
<div class="contentleft">
<div class="insideleftborder"><img src="images/sidegradients.jpg" width="9" /></div>
<div class="leftcontent-tops">
<h1 class="titles"> Welcome To Action Computing, Bournemouth!</h1>
</div>
<div class="leftcontent-bottom">
<p><br />
<h2>Welcome to Action Computing . We are a <strong>Web Design</strong> and <strong>Graphic Design</strong> studio based near Bournemouth, Dorset on the south coast of the United Kingdom. that specialize in <strong>Web Design</strong>, <strong>Web Optimisation</strong> and all elements of <strong>Graphic Design</strong> including <strong>Stationary Design</strong>, <strong>Logo Design</strong>,<strong> Label Design</strong>, <strong>Advert Design</strong>, <strong>Brochure Design</strong>, <strong>Exhibition Artwork Design</strong> and <strong>Packaging Design</strong>. Action Computing will Design Internationally as well as locally.<br /></h2>
<br />
</p>
<p>Action Computing focuses on three main goals, </p>
<p>&nbsp;</p>
<p ><img src="images/QuestionMark.png" width="53" height="51" style="float:right; padding-right:20px; padding-left:20px" /></p>
<p><strong>One</strong>, making things as simple for the customer as possible using language and explanations that anyone can understand rather than using <strong>Web Design</strong> /<strong> Graphic Design 'jargon'</strong>, this way rather than being confused about the subject matter the client can feel completely Comfortable with exactly what is going on</p>
<p>&nbsp;</p>
<p><img src="images/handshake.jpg" style="float:right; padding-right:10px; padding-left:20px; padding-top:10px;"/><strong>Two</strong>, Building a friendly long term relationship with our customers. Successful web site's are not built overnight, they evolve over a period of months and years and with Action Computing by your side you can guarantee a constant aid to all your <strong>Web Design</strong> and <strong>Graphic Design</strong> needs.</p>
<p>&nbsp;</p>
<p><img src="images/pile_english_money.JPG" width="72" height="59" style="float:right; padding-right:10px; padding-left:20px;" /><strong>Three</strong>, Making you money while keeping your Web or <strong>Graphic Design</strong> costs as low as possible. Its all well and good having a pretty web site but if it does not generate money or business then it is simply a waste of time and money, at Action Computing we strive to make sure your web site will succeed.</p>
<p>&nbsp;</p>
<p align="justify" class="style10">With over 10 Years of <strong>Web Design</strong> experience we hope to make your journey to the web as smooth as possible and guarantee to cater to your needs as best possible as we can.</p>
<p align="justify" class="style10">For Everything that is needed to take your first steps into you <strong>Web Design</strong> or <strong>Graphic future</strong> please<a href="contact.php"> click here</a> or above on the appropriate Design needed.</p>
<br />
<p align="right" style="border:1px dashed #000000; "> Regards<br />
Action Computing </p>
</div>
<div class="leftcontent-tops">
<h1 class="titles">Our Promise</h1>
</div>
<div class="leftcontent-bottom"><br />
At Action computing are promise to to make you happy, Whether it be <strong>Graphic Design</strong> including <strong>Logo Design</strong>, <strong>Label Design</strong> and <strong>Advert Design</strong> or <strong>Web Design</strong> we will not simply make one <strong>web site</strong> or graphic that you &quot;must&quot; take off us! we will not give up on your <strong>Web site</strong> or Graphics until you are &quot;100%&quot; happy with the outcome, We do usually manage to interpret our customers design dreams to a almost identical result first time, but we will always make your design dreams become a reality!
<p></p>
<br />
<br />
<p align="right" style="border:1px dashed #000000; "> Regards<br />
Action Computing </p>
<div align="center">
<p>All of our web sites are tested on the most common browsers.</p>
<p>&nbsp;</p>
<p><img src="images/ie.jpg" style=" padding-left:70px; float:left" /><img src="images/firefox.jpg" style=" padding-left:20px; float:left" /><img src="images/aol.jpg" style=" padding-left:20px; float:left"/><img src="images/SAFARI.jpg" style=" padding-left:20px; float:left"/> </p>
<p style="clear:both; padding-left:67px; float:left;">Internet Explorer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fire Fox&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AOL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Safari<br />
<br /><strong>Web Design Bournemouth, Graphic Design Hampshire, Logo Design Dorset, Southampton </strong></p>




</div>
</div>
</div>
<div class="contentright">
<div class="insiderightborder"></div>
<div class="rightcontent-tops">
<h1 class="titles">Recent Examples</h1>
</div>
<div class="rightcontent-bottom">
<div align="center"><br />
<img src="images/demos/level-checker.jpg" width="212" height="221" /><br />
<a href="http://www.level-checker.co.uk" target="_blank">Level-Checker</a><br />
Web site
<hr />
<a href="http://www.asbuiltsdsgroup.co.uk/" target="_blank"><br />
<img src="images/demos/sdsasbuilt.jpg" width="212" height="191" /></a><br />
<a href="http://www.asbuiltsdsgroup.co.uk/" target="_blank">Asbuilt Group</a><br />
Web site / Portal
<hr />

<div id="fadeshow1"></div>
****

******
</div>
</div>
<div class="rightcontent-tops"><h1 class="titles">Testimonials</h1></div>
<div class="rightcontent-bottom"></div>

</div>
<div class="bottommenu">
<p><a class="menubottom" href="contact-action-computing-web-design.php">Contact</a> <span class="vertline">&#124; </span><a class="menubottom" href="webdesign-web-designer-hampshire-dorset-bournemouth.htm">Web Design</a> <span class="vertline">&#124;</span><a class="menubottom" href="pc-maintenance-hampshire-dorset.htm"> PC Maintenance</a> <span class="vertline">&#124;</span> <a class="menubottom" href="logo-Design-hampshire-dorset-bournemouth.htm">Logo Design</a> <span class="vertline">&#124;</span> <a class="menubottom" href="label-Design-hampshire-dorset-bournemouth.htm">Label Design</a> <span class="vertline">&#124;</span> <a class="menubottom" href="graphic-Design-hampshire-dorset-bournemouth.htm">Other Graphic Design</a> </p>
<p>Action Computing email:<a href="mailto:enquiries@actioncomputing.co.uk">enquiries@actioncomputing.co.uk</a> phone: 07927255606</p>
</div>
</div>
</div>
</body>
</html>





@charset "utf-8";

* {margin: 0; padding: 0; border: 0; outline: 0;}
html, body {font:11px /1.3 Tahoma; color:#333333; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}
h1.titles{margin: 8px 0 0 10px ; font-size:18px; color:#000000;}
h2{font:11px /1.3 Tahoma; color:#333333; font-weight:normal; }

hr.sig {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue; }

.header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #ffffff;}
.Container{margin-left: auto; margin-right: auto; width:1000px; text-align: left; background-image:url(images/BACKFADE.png); }
.Containerleftborder{width:1000px; background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-y left; }
.Containerrightborder{width:1000px; background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) repeat-y right;
overflow: auto; /*to clear the floats*/
}

.content1container{width:906px; margin: 0 0 0 47px; overflow: auto; background-color:#ffffff; position:relative; }
.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:15px; }
.contentright{width:291px; height:100%; min-height:100%; background:#ffffff; float:right;}
.leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
.leftcontent-bottom{width:560px; padding-left:10px; padding-right:20px; background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; margin-bottom:20px; overflow:auto; }
.rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
.rightcontent-bottom{width:253px; background-color:#AAC7E7; float:right; margin-bottom:20px; text-align:center; }

.insideleftborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:0px; overflow:auto;}
.insiderightborder{width:9px; height:100%; min-height:100%; background-color:#6DA7E6; position:absolute; top:0px; left:897px;}

.Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
.topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
.menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
.menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
.menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}
.bottommenu{clear:both; width:886px; height:40px; padding:10px; margin: 0 0 0 0px; background-color:#6DA7E6; text-align:center; }

.signature{border-bottom:2px dotted #999999; border-top:2px dotted #999999; text-align:right; }

a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:15px !important }
a.menu:hover {color: Black !important ; text-decoration: underline; font-weight:bolder; font-size:15px !important }
a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:15px !important }
a.menu:visited {color: White; text-decoration:none; font-weight:bolder; font-size:15px !important }

a.menubottom:link {color: White; text-decoration:none; font-weight:bolder; font-size:12px !important }
a.menubottom:hover {color: Black !important ; text-decoration: underline; font-weight:bolder; font-size:12px !important }
a.menubottom:link {color: White; text-decoration:none; font-weight:bolder; font-size:12px !important }
a.menubottom:visited {color: White; text-decoration:none; font-weight:bolder; font-size:12px !important }

.vertline{font-size:16px; color:#FFFFFF;}

Rowsdower!
11-28-2009, 11:01 PM
Sorry, no IE6 here... :(

dougnbr
11-29-2009, 11:15 PM
Hello,

I modified your code a bit for IE6...

added the following to the CSS file:


.Flashtop{ width:622px; height:101px; float:left; }

reduced the margin-left by 3px to fix what I think is an IE6 3 pixel bug. (this should of course be placed in an IE6 conditional version of the CSS.)


.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:12px; }

Added the IE6 conditional around the flash script (not sure why/if this is necessary, but it made my local version work)


<!--[if !IE 6]>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','622','height','101','src','images/headermov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/headermov' ); //end AC code
</script>
<![EndIf]-->

There's still some cosmetic isssues, such as why the left and right blue content borders are missing.

Hope this helps some.

Regards,

Doug

gmnightingale
11-30-2009, 01:28 PM
Hello,

I modified your code a bit for IE6...

added the following to the CSS file:


.Flashtop{ width:622px; height:101px; float:left; }

reduced the margin-left by 3px to fix what I think is an IE6 3 pixel bug. (this should of course be placed in an IE6 conditional version of the CSS.)


.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:12px; }

Added the IE6 conditional around the flash script (not sure why/if this is necessary, but it made my local version work)


<!--[if !IE 6]>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','622','height','101','src','images/headermov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/headermov' ); //end AC code
</script>
<![EndIf]-->

There's still some cosmetic isssues, such as why the left and right blue content borders are missing.

Hope this helps some.

Regards,

Doug

Thanks for your answer.
what exactly do I have to do to make a IE6 conditional version of the CSS? and where should I add the conditional flash code above to my document?
Thank you

Rowsdower!
11-30-2009, 01:38 PM
The conditional CSS for IE6 would be implemented like this in your <head> section:

<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![EndIf]-->

And then you would create a file named ie6.css and plop it into your css folder. The contents of this file would ONLY need to be those style declarations that are different from the standard file. You absolutely do NOT need to repeat the entire css from the base file. Based on the css from dougnbr your ie6.css file would just be this:

.Flashtop{ width:622px; height:101px; float:left; }
.contentleft{width:590px; height:100%; min-height:100%; background:#ffffff; float:left; margin-left:12px; }

For the conditional statements around the flash you would just be adding the <!--[if !IE 6]> and the <![EndIf]--> pieces around your existing flash code.

dougnbr
11-30-2009, 07:05 PM
Thanks for your answer.
what exactly do I have to do to make a IE6 conditional version of the CSS? and where should I add the conditional flash code above to my document?
Thank you

The post by Rowsdower has the mods that you need to do.

Hopefully the changes will work for you, they were working on my local copy.

Good luck!

dougnbr
11-30-2009, 10:38 PM
The post by Rowsdower has the mods that you need to do.

Hopefully the changes will work for you, they were working on my local copy.

Good luck!

One thing I forgot to mention is that you might want to put the line:

.Flashtop{ width:622px; height:101px; float:left; }

in your main CSS file as the class "Flashtop" doesn't seem to be currently defined.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum