Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Whitespace around images in mozilla

Status
Not open for further replies.
Guest_imported

Guest_imported

New member
Jan 1, 1970
0
I have an issue with mozilla and coloured lines using a table and a spacer gif.
Say you do a grey line like this:

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;50%&quot;>
<tr>
<td bgcolor=&quot;#cccccc&quot;><img src=&quot; width=&quot;1&quot; height=&quot;1&quot; border=&quot;0&quot; alt=&quot;&quot; /></td>
</tr>
</table>

If you do not set a doctype or one without a url like this:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

it works fine, however, as soon as you add a

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;
Mozilla displays a rectangle rather than a line, although the code is valid xHTML.
You can see the problem at: for example.
Can anyone tell me why mozilla does that and how to counteract?

cheers
Chris
 
Sort by date Sort by votes
hi chris!

first of all, the page you mention (onlinetools.org) doesn't validate as XHTML 1.0 or HTML 4 (at least today it doesn't).

about your layouting problem in mozilla:
mozilla choses the so-called 'quirks mode' for layouting your page when it encounters the first DOCTYPE you mention (HTML 4.01 _without_ a system identifier/url). for the second (XHTML) doctype, mozilla choses another layout mode, the newer 'strict mode'.

mozilla.org offers some good documentation about the differences between layout modes & how the it decides which mode to use :
---
now for the evangelism :
throw out your tables and blind GIF madness altogether !
---

you can achieve the same much more efficiently :

<style type=&quot;text/css&quot;>
DIV#mainContainer
{
width:550px;
height:100%;
}
DIV.content
{
padding-bottom:8px;
margin-bottom:8px;
border-bottom:1px solid #ccc;
}
</style>

<div id=&quot;mainContainer&quot;>
<div class=&quot;content&quot;>content one here</div>
<div class=&quot;content&quot;>here goes content 2</div>
[...]
<div class=&quot;content&quot;>here goes content 599</div>
</div>

and don't tell me &quot;but it doesn't work in netscape 4&quot;
1) there are only a few % of surfers left still using netscape. and your target audience is probably already using netscape 7.0pr1 ...
2) old browsers will still display all the content, which is what matters. yes, it will look less pretty.
3) if you build pages that look perfect in old browsers, they will _never_ feel the need to move up to a modern browser. marc andreesen once admitted that netscape 4 was nothing more than a over-and-over patched version of the original 1.0 source code ... dating back to ... 1995? or even earlier?

there are lots of great tutorials on css on the web, some with focus how to migrate from tables to css layout:

welcome on board!

kind regards,
phil
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

moveit
  • Locked
  • Question
Firefox will not let me sign in to my Tesco account
Replies
4
Views
703
teknance
teknance
Tedwhite
  • Locked
  • Question
How To Fix Firefox Freezing Issue In Windows 10?
Replies
2
Views
388
Tedwhite
Tedwhite
demigod7
  • Locked
  • Question
No internet in browser even after being connected to the internet
Replies
1
Views
308
xwb
xwb
weberm
  • Locked
  • Question
How do I keep the Favorites bar from reappearing in Windows 10? 1
Replies
2
Views
231
Finsery
Finsery
goombawaho
  • Locked
  • Question
Error in IE11 on Windows 10
Replies
3
Views
168
goombawaho
goombawaho

Part and Inventory Search

Sponsor

Back
Top