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 :-(

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, 10: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.

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, 12: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, 01: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?

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 -

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, 04: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, 04: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, 04: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 -

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, 04: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, 04: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, 04: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, 05: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:

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, 05: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, 06:35 PM

Love that effect looks like the background is curling under, looks great thanks!

gmnightingale

11-26-2009, 06: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?

<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>

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: