473,396 Members | 1,924 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Margins on block elements inside table cells?

Hello,

When the example HTML below is viewed on IE 6, "Text" and "Heading" line up.

On Mozilla 1.5, they don't; there's blank space above "Heading".

What is the best way to make Mozilla look like IE?

The only thing that comes to mind is to use something like <h3
style="margin-top: 0"> in place of the first <h3>. But that seems very
dirty. Surely there must be a better way to tell Mozilla "no margin on the
first/last block elements of a table cell", i.e. "behave like IE"?

Thanks,
Todd Parker

--------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table border="1">
<tr>
<td valign="top">
Text
</td>
<td valign="top">
<h3>Heading</h3>
...
<h3>Heading</h3>
...
</td>
</tr>
</table>
</body>
</html>
Jul 20 '05 #1
9 4228
On Sun, 2 Nov 2003, Troy Parker wrote:
What is the best way to make Mozilla look like IE?


Since Mozilla mostly follows the specifications, wouldn't it be more
interesting to make IE look like Mozilla?

SCNR
Jul 20 '05 #2
In article <6N********************@comcast.com> in
comp.infosystems.www.authoring.stylesheets, Troy Parker <no@email>
wrote:
The only thing that comes to mind is to use something like <h3
style="margin-top: 0"> in place of the first <h3>. But that seems very
dirty. Surely there must be a better way to tell Mozilla "no margin on the
first/last block elements of a table cell", i.e. "behave like IE"?


There is, and don't call me Shirley. :-)

In your style sheet:
td h3, th h3 { margin-top: 0 }

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #3
"Stan Brown" <th************@fastmail.fm> wrote in message
news:MP***********************@news.odyssey.net...
In your style sheet:
td h3, th h3 { margin-top: 0 }


Thanks, but this affects *all* the <h3> elements inside the cell. Note that
in my example, there's a second <h3> element in the middle. I still want the
space above that <h3>, just not the unnecessary space at the top of the cell
(or the bottom, if I were to put an <h3> or other block element there).

I'm trying to find a way to avoid having to resort to separate styles for
top/middle/bottom elements just to work around this Mozilla quirk...

Todd
Jul 20 '05 #4
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in message
news:Pi*******************************@ppepc56.ph. gla.ac.uk...
Since Mozilla mostly follows the specifications, wouldn't it be more
interesting to make IE look like Mozilla?


Sorry but the Mozilla behavior is not the look I want. :)

I want the content of my table cells to be flush to the edges with no
redundant space. I don't want there to be space sometimes and sometimes not,
depending on whether a block element is used inside the cell.

Todd
Jul 20 '05 #5
Troy Parker wrote:
<td valign="top">
<h3>Heading</h3>


Post an url of the actual page with real data, the code you posted looks
like you are abusing tables for layout.

--
Spartanicus
Jul 20 '05 #6
"Todd Parker" <no@email> wrote:
"Stan Brown" <th************@fastmail.fm> wrote:

In your style sheet:
td h3, th h3 { margin-top: 0 }


Thanks, but this affects *all* the <h3> elements inside the cell. Note that
in my example, there's a second <h3> element in the middle. I still want the
space above that <h3>, just not the unnecessary space at the top of the cell
(or the bottom, if I were to put an <h3> or other block element there).

I'm trying to find a way to avoid having to resort to separate styles for
top/middle/bottom elements just to work around this Mozilla quirk...


The first H3 inside any cell can be selected by the following:

td h3:first-child, td h3:first-child {margin-top: 0;}

Not supported by IE, but as IE seems to be giving you the style you
want anyway (through either a bug or a different default value) that's
not a problem in this case.

In CSS3 there will be a last-child selector as well, but as that's
still some way off I wouldn't expect any browser support for the time
being.

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 20 '05 #7
In article Troy Parker wrote:
Hello,

When the example HTML below is viewed on IE 6, "Text" and "Heading" line up.

On Mozilla 1.5, they don't; there's blank space above "Heading".

What is the best way to make Mozilla look like IE?
Not using table layout.
The only thing that comes to mind is to use something like <h3
style="margin-top: 0"> in place of the first <h3>. But that seems very
dirty. Surely there must be a better way to tell Mozilla "no margin on the
first/last block elements of a table cell", i.e. "behave like IE"?


well, of course you can say
td *:first-child {margin-top:0}

That would also match inline elements, but wouldn't break anything

IIRC, IE thinks there isn't margin on top of headings, and mozilla thinks
there is by default. Or was that with paragraphs. Maybe it is both.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #8
"Steve Pugh" <st***@pugh.net> wrote in message
news:6e********************************@4ax.com...
The first H3 inside any cell can be selected by the following:

td h3:first-child, td h3:first-child {margin-top: 0;}
Beautiful! That appears to be exactly what I've been searching for.
In CSS3 there will be a last-child selector as well, but as that's
still some way off I wouldn't expect any browser support for the time
being.


Okay, I can live with that. My main issue was getting stuff at the top to
line up horizontally. Extra space at the bottom isn't so noticable since my
table actually doesn't have a border.

Thanks Steve, and to everyone else who replied.

Todd
Jul 20 '05 #9
Troy Parker a écrit:
Hello,

When the example HTML below is viewed on IE 6, "Text" and "Heading" line
up.

On Mozilla 1.5, they don't; there's blank space above "Heading".

What is the best way to make Mozilla look like IE?

The only thing that comes to mind is to use something like <h3
style="margin-top: 0"> in place of the first <h3>. But that seems very
dirty. Surely there must be a better way to tell Mozilla "no margin on the
first/last block elements of a table cell", i.e. "behave like IE"?

Thanks,
Todd Parker

--------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table border="1">
<tr>
<td valign="top">
Text
</td>
<td valign="top">
<h3>Heading</h3>
...
<h3>Heading</h3>
...
</td>
</tr>
</table>
</body>
</html>


Also, if your DOCTYPE header is XHTML and your code is not (like here)
mozilla ang konqueror display a different rendering; actually, they do not
render well.

I do not know for iexplore.
Bonne chance!

--
Marc Nadeau
La Pagerie
http://www.pagerie.com

Jul 20 '05 #10

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

Similar topics

27
by: Thomas Mlynarczyk | last post by:
Hello, I noticed that IE seems to put some kind of default margins on <li> elements and the only way to get rid of them seems to be asigning negative margins. To make things worse, IE5 and IE6...
8
by: Jukka K. Korpela | last post by:
I just noticed that most browsers render <table border="1"><tr><td><p>foo</p></td></tr></table> the same way as <table border="1"><tr><td>foo</td></tr></table> That is, they ignore the p...
8
by: slim | last post by:
hi again all, i am still working on the website as mentioned in earlier threads and have hit another snag... http://awash.demon.co.uk/index.php http://awash.demon.co.uk/vd.css the php is...
12
by: Secret Guy | last post by:
I'm trying to understand generally how to make a grid of variously sized boxes using CSS. The first idea I had was to make a box where I can see the margin, padding, border and content edges, and...
2
by: Falc2199 | last post by:
i all, I have an HTML table within which I have a span. When the user clicks a button I want to update the contents of this span with form elements table elements (TR,TD). The problem is that...
1
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
0
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
3
by: axlq | last post by:
I created an experimental page at: http://sunbeam.rahul.net/~unicorn/csstest.html ....which is a standard header + nav bar + 2-column content + footer CSS layout. The left column is 10em wide...
4
by: Claudio Calboni | last post by:
Hello folks, I'm having some performance issues with the client-side part of my application. Basically, it renders a huge HTML table (about 20'000 cells in my testing scenario), without content....
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
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...
0
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,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
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,...

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.