473,694 Members | 2,885 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

css table and border-margin-..

I've an image in a cell of a table.

I've this CSS:

..dbtable{
width: 600px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-collapse: collapse;
border: 1px solid #000000;
cursor: default;
}

..dbtable th{
font-weight: bold;
font-size: 13px;
background-color: #999999;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
/*border: 1px solid #000000;*/
}

..dbtable td{
border: 1px solid #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

I still have a left, bottom and right border around an image in a cell (but
strangely not at top).
How to avoid this ? I'd like no border between the image and the cell
border.

Also the text on the cell has top and bottom border. I'd like to set it to
0. How ?

Bob

PS: any link to manage tables in CSS would be interesting.
Jul 21 '05 #1
7 41730
"Bob Bedford" <be******@notfo rspammershotmai l.com> wrote:
I've an image in a cell of a table.

I've this CSS:

.dbtable{
width: 600px;
padding: 0px 0px 0px 0px;
Is this class applied to a table? Tables don't have padding.
margin: 0px 0px 0px 0px;
margin: 0; is simpler.
border-collapse: collapse;
border: 1px solid #000000;
cursor: default;
What's the point of this?
}

.dbtable th{
font-weight: bold;
font-size: 13px;
Pixel sized text is a bad idea as Win IE users can't easily resize it
as needed.
background-color: #999999;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
/*border: 1px solid #000000;*/
}

.dbtable td{
border: 1px solid #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

I still have a left, bottom and right border around an image in a cell (but
strangely not at top).
Which styles are you applying to the image? The border of the image is
controlled by the styles applied to the image, not by the styles
applied to the table.
How to avoid this ? I'd like no border between the image and the cell
border.
td img {border: none;}
will remove the border from around all images inside table cells.
Though by default browsers only draw borders around images that are
links so you must have added the border yourself somewhere.
Also the text on the cell has top and bottom border. I'd like to set it to
0. How ?


border: none; on whichever element actually has the border. As very
few elements have borders by default it's most likely something that
you've added yourself. So look for any border styles in your CSS and
remove them.

Unless, you don't actually mean borders when you say borders.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 21 '05 #2
Steve Pugh <st***@pugh.net > wrote:
.dbtable{
width: 600px;
padding: 0px 0px 0px 0px;


Is this class applied to a table? Tables don't have padding.


They do, but as with the html cellpadding attribute it's not applied on
the element itself, but on the descendant cells. Note that it's worded
in a way that is easily misunderstood:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value: <padding-width> | inherit
Initial: 0
Applies to: all elements except elements with table display types
other than table, inline-table, and table-cell

Also note that IE fails to get this right.

--
Spartanicus
Jul 21 '05 #3
Spartanicus <me@privacy.net > wrote:
Steve Pugh <st***@pugh.net > wrote:
.dbtable{
width: 600px;
padding: 0px 0px 0px 0px;
Is this class applied to a table? Tables don't have padding.


They do, but as with the html cellpadding attribute it's not applied on
the element itself, but on the descendant cells.


That makes sense. I'd never noticed it before, I suppose because I'd
never though of trying it. Setting the padding directly in the td or
th seems much more logical.
Note that it's worded in a way that is easily misunderstood:

Applies to: all elements except elements with table display types
other than table, inline-table, and table-cell


Gosh, that is a rather horrible sentence.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 21 '05 #4
>> border-collapse: collapse;
border: 1px solid #000000;
cursor: default;
What's the point of this?


Border-collapse does allow me to show the cell even there is no data in.
border 1px.... show a border (line) around the cell
cursor:default; show default cursor, as I've some cell where I show a hand.
}

.dbtable th{
font-weight: bold;
font-size: 13px;


Pixel sized text is a bad idea as Win IE users can't easily resize it
as needed.

I know but it's the only way to have full control on what I'm doing.
background-color: #999999;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
/*border: 1px solid #000000;*/
}

.dbtable td{
border: 1px solid #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

I still have a left, bottom and right border around an image in a cell
(but
strangely not at top).


Which styles are you applying to the image? The border of the image is
controlled by the styles applied to the image, not by the styles
applied to the table.
How to avoid this ? I'd like no border between the image and the cell
border.


td img {border: none;}
will remove the border from around all images inside table cells.
Though by default browsers only draw borders around images that are
links so you must have added the border yourself somewhere.
Also the text on the cell has top and bottom border. I'd like to set it to
0. How ?


border: none; on whichever element actually has the border. As very
few elements have borders by default it's most likely something that
you've added yourself. So look for any border styles in your CSS and
remove them.

Unless, you don't actually mean borders when you say borders.

Right, I'm talking about margins. I've no border (no outline), but I've
margins between the image and the cell's border. I've set this:

..dbtable td.img {border: none; margin:0px; }
img{border:none ; margin:0px; padding:0px;}

But I still have margins on the left, bottom and right, but no on the top.

Bob
Jul 21 '05 #5
"Bob Bedford" <be******@notfo rspammershotmai l.com> wrote:
Steve Pugh wrote:
"Bob Bedford" <be******@notfo rspammershotmai l.com> wrote:
cursor: default;


What's the point of this?


cursor:default ; show default cursor, as I've some cell where I show a hand.


But why do you need to set it to the default at the table level if you
are setting it to something else at the cell level?
font-size: 13px;


Pixel sized text is a bad idea as Win IE users can't easily resize it
as needed.

I know but it's the only way to have full control on what I'm doing.


You don't have full control. If you think you do you are fooling
yourself.
Unless, you don't actually mean borders when you say borders.


Right, I'm talking about margins. I've no border (no outline), but I've
margins between the image and the cell's border. I've set this:

.dbtable td.img {border: none; margin:0px; }
img{border:non e; margin:0px; padding:0px;}

But I still have margins on the left, bottom and right, but no on the top.


1. Eliminate all white space.

2. Set the images in question to display: block; (as inline elements
images normally sit on the text baseline and hence there will be space
beneath them same as there is space between the text baseline and the
bottom of characters with descenders)

3. Post a URL if you still need help.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 21 '05 #6
Steve Pugh wrote:

2. Set the images in question to display: block; (as inline elements
images normally sit on the text baseline and hence there will be space
beneath them same as there is space between the text baseline and the
bottom of characters with descenders)


img {vertical-align: bottom} can give the same results

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #7
in comp.infosystem s.www.authoring.stylesheets, kchayka wrote:
Steve Pugh wrote:

2. Set the images in question to display: block; (as inline elements
img {vertical-align: bottom} can give the same results


But don't, if line-height is bigger than image.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
2143
by: Carl Gilbert | last post by:
Hi I am currently writing a site that utilises tables. I have one page that links to a second page. The only problem is that when I link to the second page, the table loads up with a different height than was set in the code. However, when I use the navigation buttons in IE to go back and then forward again to the second page, the table is displayed as expected.
10
7844
by: John | last post by:
I have a table with two rows. On the first row is a text box and in the second row is an image. I have set the table cellpadding to 0 and cellspacing to 0. The table is leaving extra spaces in the rows on the top and bottom of the picture and image. I need to make the height of the rows to be the same as the textbox and image. How do I do this? I have tried even setting the height of the table and all the <td> and <tr> tags to 1 but have...
0
2727
by: yurps | last post by:
Hello here is my html, if you click the missing image in the first column on the left, the div is shown, when clicked again the div disappears...but the bottom border disappears as well...Is there anyway to stop this...??? <HTML> <HEAD> <title>Conform Inbox</title> <meta content="False" name="vs_snapToGrid">
2
8722
by: The_Original_MB | last post by:
I have a task to create tables dynamically, using the javascript DOM. The current method uses a 1px x 1px IFRAME to loop through some data generation stuff, and then call JS functions in the parent window to generate the tables. The basic idea is to add a table tag, with a thead and tbody, on the main parent page, that has display:none set. This then becomes display:block when there are rows to show. The rows themselves are added...
16
12870
by: karlman | last post by:
I am trying to create a web page that shows a calendar schedules. I am attempting to use table cells with fixed widths and different colors to display this. It seems that IE6 doesn't always correctly render the widths exactly as intended. I am using dream weaver and when I copy the HTML code into that it renders perfectly. Is there any known issues with the way IE6 renders table cells with fixed widths?
11
3573
by: Norman L. DeForest | last post by:
Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables but not in height calculations. Oh, and Opera version 8.02 does the same thing. |<-->| |<-->| <------ border |<------------>| <------ table contents
7
2619
by: Shawn B. | last post by:
Greetings, I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then they columns lose their alignment. Can anyone help me correct this?
8
12094
by: UJ | last post by:
I have a table with multiple cells and I want to draw a box around the entire table but not around the individual cells. How do I do that? TIA - Jeff.
1
2395
by: Rako | last post by:
My problem is: I want to create an index to any of the available picture-groups. This index is a table of thumbs with a scrollbar. If you click on the thumb, you get the full picture displayed. This table must be created from scratch. (The function must be reusable, and speed up the load-time: only one of the various possible picture-groups will be indexed. any other will be loaded by request. The picture-groups are defined in flexible...
2
16411
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using to overlap correctly. You can see it on this page: www.creativekaysjewelry.com The images overlap exactly how I wanted and in the right position
0
8552
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9110
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8971
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8818
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7650
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6481
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5825
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4568
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
1970
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.