next »

[dirtdog1960to]

for nosense, cj, etc

googling css tables padding sucks

i should probably just use html for all the time spending looking for how to do it

[dink]

I was gonna respond until I saw you wanted the pretty boys.   

With a little more info I could, perhaps, maybe tell you something.

Do you have padding in the table declaration?  eg:

Code:

<table width="160"  border="0" cellspacing="0" cellpadding="6">

Do you have margins declared?  Do you have borders?  Of how many px?

What is the size of the space you want to place your table in?

Here is what I generally do when I have a (something) to put in a nav section:

in the css file

Code:

# leftnav {
 float:left;
 background:#dcdcdc;
 color: #333333;
 width:180px;
 padding-top: 9px;
 padding-bottom: 9px;
 }

In my html it might look like this:

Code:

<div id="leftnav" align="center">
<adsense_code></adsense_code>

If I was a pretty boy I'd know how to do this stuff.

[dirtdog1960to]

I was gonna respond until I saw you wanted the pretty boys.   

lol it was that or "Rembrandts" Since perky and early are bumping each others uglies i figggered i stick to the theme here 

With a little more info I could, perhaps, maybe tell you something.

Do you have padding in the table declaration?  eg:

Code:

<table width="160"  border="0" cellspacing="0" cellpadding="6">

Do you have margins declared?  Do you have borders?  Of how many px?

What is the size of the space you want to place your table in?

oops sorry this be spam

1. i want whatever gets them to click, dogg 
2. i am thinking 600 wide column spam content on left, right side column 150-200 wide full of these ads
3. I am talking 100 to 200 hundred of these ads, i was thinking maybe a big blob of them on top but ughh but again i am thinking too much

what do you think?

Here is what I generally do when I have a (something) to put in a nav section...

hot and helpful thx. goes to test.

[dink]

what do you think?

I think you've got it.  Left side in most layouts is what the spider reads first.  Then center (if present), then right side.

My stuff seems to work best if I have a block above the main content and a side section full of more links.  Sometimes I use a 3 column layout with css absolute positioning.  The center section is actually read first then the side columns.

If you are using adsense for your pages, remember that the Goog spider needs to read something to know what ads to place. 

In the case a 3 column layout, I would have an h1 and an h2 above the content area (and spidered first) with main keywords and relative text.  Then the ad block first in the content section.

Go get 'em tiger.

[dirtdog1960to]

# leftnav {

should be

#leftnav {

cant get it work. the div tables merge into one column

[dink]

Ooops.  Missed your reply.

I copied the code directly from my hard drive.  It works on the server where it resides.

It's possible that you have a missing </div> tag.  Or, some other innocent-looking problem.

Do you have access to tidy?  If so, run it on your page.  If you have tag problems it will find them quickly.

One thought occurred to me.  If you don't have your entire main content section wrapped in a div, your nav column could be longer than your main content div.  That'll blow your cover.

This is prolly silly, but hey.  You don't have a horizontal table that you're trying to stuff in a vertical holder do you?

Tell me more.

[perkiset]

<slighthijack>
So what <if any> are the rules for padding and margins that will work regardless of browser? I get so much strangeness between FF, Safari and IE regarding padding and margins in both tables and images it just pisses me off, and I wind up going back to hard structured tables. Any thoughts?
</slighthijack>

[dirtdog1960to]

@ perk way on topic imo - i spent a good bit of an hour add padding and margins =0
still cant center, have "ghost" 10 by 10 div hanging in another div meh

@ dink i dont think i missed a /div but my headings are red and cant figure that one out

how do i do this?

Code:

<div id="leftnav" align="center" background color=something>

<div id="wrap the adsense in a 5 to ten pixel colored picture frame color=notsomething>
<adsense_code 1 ></adsense_code 1>
</div>

<div id="hi_there_i_am_a_spacer" about the size of p or two br's align="center" background color=something>

<div id="wrap the adsense in a 5 to ten pixel colored picture frame>
<adsense_code 2></adsense_code 2>
</div>

<div id="hi_there_i_am_a_spacer" about the size of p or two br's align="center" background color=something>
.
.
.
[i]n[/i]
\/
(X)

 

[dink]

Working on a good response but running out of time.  I'll get some details and an example up later tonite.

[dink]

Here is part of what you need DD:
css:

Code:

#leftnav {
 float:left;
 background:#FFFFFF; //change as req'd
 width:145px; //change as req'd
 text-align:left;  // or center or right
 margin:0;
 padding: 0 0 0 6px;  //change as req'd
 }

.ads {
 border:solid #000000;  //change as req'd
 border-width:1px 1px 1px 1px;  //change as req'd
 text-align:left;  //change as req'd
 }

html:

Code:

<div id="leftnav">
<div class="ads">
<adsense_code1 ></adsense_code1>
</div>
<p>&nbsp</p>  //simpler than rigging up a spacer.gif
<div class="ads">
<adsense_code2 ></adsense_code2>
</div>
<p>&nbsp</p>  //simpler than rigging up a spacer.gif
</div>

Quick and dirty.  I'm almost late.  I'll check back later.

D

[dirtdog1960to]

eek.  Don't be late cause of me.

Thanks goes to try 

[dink]

<slighthijack>
So what <if any> are the rules for padding and margins that will work regardless of browser? I get so much strangeness between FF, Safari and IE regarding padding and margins in both tables and images it just pisses me off, and I wind up going back to hard structured tables. Any thoughts?
</slighthijack>

I just checked the 'big g' for you.  There are exactly (1.67 x 10^24) x [(Google links / Yahoo links) x 1000] = lots of pages about the problems of cross browser compatability.

There are some 'rules', but these 'rules' are tricks to make the various browsers go into quirks mode so your stuff looks (mostly) how you want it to.

I had a link to a site that would make you a full css layout that was cross browser compliant for about 15 different makes, models, and ages of browsers.  It doesn't connect for me now.  So, I suspect that the recent damage changes made by IE7 have thrown a huge wrench in his works.  Here is the link in case the site comes back up:
209.216.241.33/pagemaker_form.php

Here are a couple of links that may help you understand why dedicated css'ers pull their hair and run screaming.
1.  Big John and Holly have been on my list forever.  Straight stuff in a no nonsense way.  www.positioniseverything.net/
2.  HTML Dog has some very good css tutorials.
     www.htmldog.com/guides/cssadvanced/

If you have a few hours (or days) to peek at some astonishing, and pretty much worthless for the average webmaster, css stuff.  <these folks have waaaay too much time on their hands>
1.  Stu Nichols Css play site has a bunch of goodies.  These two examples are in css only.  Start here: 
     a.  www.cssplay.co.uk/menu/banner.html    then go here
     b.  www.cssplay.co.uk/menu/amazing.html
2.  I sometimes waste 2-3 hours on this site.
     www.csszengarden.com/

From the zenMaster

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.

**Bet you'll think twice about asking me a question like that again**

[dink]

@ dirtydog

This link has some good info.  It is written for librarians, but I think you'll find it has some really useful material:
http://www.nypl.org/styleguide/

D

[dirtdog1960to]

may help you understand why dedicated css'ers pull their hair and run screaming.

You have looked into my soul.  I want to have your children.   

[perkiset]

The ZenGarden is an astonishing exercise and really demonstrates what extreme usage of CSS can do. Those example pages always awe me.

My problem is still that CSS is inconsistent between browsers, and the so-called workarounds are kludgy and sometimes incomprehensible. A thing as simple as reliably padding an image seems to evade me almost as I develop website to website. Placement of images even seems more reliable. I do have a set of CSS tools that I use virtually on every site (font stuff predominantly, some bordering and such), but when it comes to the hard blending of text, images, input fields and such I continue to be drawn back to hard table formatting.

For example, I just perused a few of the sites that your links pointed to regarding padding. They pretty much all describe the same action and what the padding directive does. Except that it will behave differently on IE from FF and Safari. Without a clear directive like "If (isIE) then..." it seems pretty tough to correctly script-out what your graphical intentions are... and if you have pixel-by-pixel intentions it can get pretty weird.

Is this the part where I pull my hair and run screaming? 

Excellent post, and chock full of information - but outside of all that, what is YOUR opinion on reliably padding an image/cell/div/text? Do you have experience with avoiding multi-browser hell?