473,386 Members | 1,775 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,386 software developers and data experts.

Gap Above Table with Strict Doctype

My page has a table which sits directly underneath an image. The
background colour of the table matches that of the image, so they visually
combine.

Now, when I view the page in Firefox with the strict doctype tag[*]
specified, a gap is inserted above the table.

If I don't specify a doctype, however, this gap isn't present.

Any ideas on how to work around this?
[*]:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Jul 23 '05 #1
7 3952
In article <12****************@cool.guy.abc.xyz>, co*****@abc.xyz enlightened
us with...
My page has a table which sits directly underneath an image. The
background colour of the table matches that of the image, so they visually
combine.

Now, when I view the page in Firefox with the strict doctype tag[*]
specified, a gap is inserted above the table.

If I don't specify a doctype, however, this gap isn't present.

Any ideas on how to work around this?


Browsers have default paddings and margins for most elements - and they won't
be the same across browsers or in/out of quirks mode (no doctype sets quirks
mode). Specify a class or ID for the table, then in the CSS, set paddings and
margins to 0 for that class or ID.

i.e.
<table class="myNoPaddedClass">

or

<table id="header">

then [1]
table.myNoPaddedClass {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

or

#myNoPaddedClass {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

HTH

[1] Note that I have never used strict doctype and don't know if you can use
this shortcut or if you need to do each side, like padding-top, padding-left,
etc.

--
--
~kaeli~
Humpty Dumpty was pushed!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #2
In article <12****************@cool.guy.abc.xyz>,
Cool Guy <co*****@abc.xyz> wrote:
My page has a table which sits directly underneath an image. The
background colour of the table matches that of the image, so they visually
combine.


You are either seeing the issue discussed in
http://www.mozilla.org/docs/web-developer/faq.html#gaps
or you are seeing a default margin. (I should add a note about margins
to the FAQ.)

--
Henri Sivonen
hs******@iki.fi
http://iki.fi/hsivonen/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html
Jul 23 '05 #3
Els
kaeli wrote:
#myNoPaddedClass {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

HTH

[1] Note that I have never used strict doctype and don't
know if you can use this shortcut or if you need to do each
side, like padding-top, padding-left, etc.


I only use Strict doctype, and have no problems with the
shorthand style :-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Smokey Robinson And The Miracles - The Tears Of A
Clown
Jul 23 '05 #4
Previously in comp.infosystems.www.authoring.html, kaeli
<ti******@NOSPAM.comcast.net> said:
padding: 0px 0px 0px 0px;
padding: 0;
margin: 0px 0px 0px 0px;


margin: 0;

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 23 '05 #5
Cool Guy wrote:
My page has a table which sits directly underneath an image. The
background colour of the table matches that of the image, so they
visually combine.

Now, when I view the page in Firefox with the strict doctype tag[*]
specified, a gap is inserted above the table.


It actually is under the image, not above the table.

img { margin:0; }

HTH
Markus
Jul 23 '05 #6
Els
Markus Ernst wrote:
Cool Guy wrote:
My page has a table which sits directly underneath an
image. The background colour of the table matches that of
the image, so they visually combine.

Now, when I view the page in Firefox with the strict
doctype tag[*] specified, a gap is inserted above the
table.


It actually is under the image, not above the table.

img { margin:0; }


If it is under the image, you might also wanna try
img{display:block;}
or
img{vertical-align:bottom;}

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Deep Purple - Highway Star
Jul 23 '05 #7
Els wrote:
Markus Ernst wrote:

img { margin:0; }


If it is under the image, you might also wanna try
img{display:block;}
or
img{vertical-align:bottom;}


Huh... I must have been sleeping while writing, of course I meant
display:block...

--
Markus
Jul 23 '05 #8

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

Similar topics

2
by: Tony T | last post by:
I'm not a regular here - strictly an amateur web developer - but I've got so frustrated I'd really appreciate any help anyone can give. I'm working on a PC platform with Win ME. I'm developing a...
4
by: David Ross | last post by:
In my <http://www.rossde.com/inflation.html>, I have a small table in the middle of the page. This page is composed without a DOCTYPE statement at the beginning. The table borders appear to my...
20
by: Tyler Carver | last post by:
I would like to do something that seems so basic with two div's but I don't think it can be done. Tables can do it in a snap. I was convinced that css was the way to go for layout but without...
3
by: Ernst | last post by:
I have a script for a menu. However, this menu uses absolute coordinates. This menu had to be placed on a website. This website is position (centered) using a table. How can I determine/calculate...
7
by: Arthur Dent | last post by:
I am completely baffled... i cannot for the life of me get the HEIGHT style to work on a table in the new 2005-supported XHTML. I put a HEIGHT: 100% on my table so that my footer row will also show...
2
by: PapaRandy | last post by:
Hello, I am trying to validate the following .py webpage as HTML (through W3C). I put: ----------------------------------------------------------------------------- print "Content-type:...
3
by: PYG | last post by:
Hi everybody I have a simple question : If i use this code : <body style="font-size:24px;color:blue;"> Text in body <table> <tr><td> Text in table
1
by: Gary | last post by:
Hello folks, I have a simple bug that defies my ability to find a work around. In IE7 strict-mode, if you have a table with width 100% in a DIV block.. the content will appear UNDER the div's...
92
by: Erwin Moller | last post by:
Hi group, I encoutered page validation error, but I don't know a way around. The page has the following doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
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
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: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
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
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
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...

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.