HTML /table problem, in Mozilla

**Smo** · 10-10-2003, 10:46 AM

can someone help me figure out why mozilla leaves a 1-2px space inbetween 2 pics in the header of my site? - it works fine in IE

http://www.maqn.com/boredom/index.php

I've been looking over the script and trying different methods to get rid of the ugly cap, but I cant figure oit out.

thanks.
-Smo

**Vin DSL** · 10-10-2003, 03:50 PM

I don't run Mozilla, so maybe you can provide a screenshot. However, looking at your code, I would suggest you do something with your body tag, like:

Code:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

**Smo** · 10-11-2003, 12:52 AM

here is what it looks like in mozilla:
http://www.maqn.com/boredom/temp/moz-header.jpg

and here is what its supposed to look like:
http://www.maqn.com/boredom/temp/ie-header.jpg

**Sara** · 10-11-2003, 09:42 AM

Did you get it fixed? I'm using Mozilla 1.4 and don't see the problem when visiting your site. Sometimes those kind of quirks are en extra br or something within the code

**Smo** · 10-11-2003, 09:48 AM

no I havent gotten it fixrd, but it seems some other of my mozilla using friends see the page okay too.

weird.

**lookout** · 10-11-2003, 07:17 PM

Probably won't do the trick, but try removing the height attribute of this line:

Code:

<TD background="Maqn_com - projectBOREDOM_files/bBG03.jpg" height=129>

**Smo** · 10-12-2003, 12:07 AM

didnt do the trick eather, I might have try cuting the image verticaly instead and see if that would do the trick...

**Vin DSL** · 10-12-2003, 04:20 AM

Yeah, I see it now. You have a line going across 2 out of 3 of the columns, but not the third one. Hrm... that's a weird one.

Well, I just got home. I've been up 25 hours and worked 23 of those, so I'm basically in survival mode right now.

I'll take a look at it again after I get some sleep.

**Vin DSL** · 10-12-2003, 04:34 AM

BTW, I just captured your CSS file and ran it through TopStyle. It came up with several warnings about this and that not being able to display properly in Netscape 4. I realize you are NOT running Netscape 4, but your Mozilla browser may have inherited some of the display characteristics of Netscape 4, since they share a common ancestry. You may want to run a check on your CSS code...

**lookout** · 10-12-2003, 11:25 AM

Like Sara, I see it fine under Mozilla 1.4.

Some table and code cleanup might help, but browsers are often amazingly forgiving. Definitely there's some sloppy stuff to clean up there. Still, I'm betting it's a height problem between the top picture and adjacent menu text.

Try making your topleft03.jpg a little taller, and leave the adjacent menu cell height unspecified to give it a little more wiggle room height wise, like this:

Code:

<td width="425" align="left" valign="top"><img src="siteimg/bTopleft03.jpg" height="20" width="425" name="top" alt="maqn.com v6" border="0" /></td>
<td width="500" align="left" valign="top" class="mainText"><span class="blue"><a href="index.php" class="linkTop">Main</a> | <a href="comic_list.php" class="linkTop">Comics</a> | <a href="#" class="linkTop">Galleries</a> | <a href="#" class="linkTop">webGames</a> | <a href="#" class="linkTop">Features</a> | <a href="forum.php" class="linkTop">Forum</a></span></td>

Note that I've also specified the width of bTopleft03.jpg, to it from being proportionately resized with the height.

**Vin DSL** · 10-12-2003, 03:17 PM

Hey, 'lookout', did you notice that this guy has empty XLM style closing tags all over the place? Look at the code example above. The image on the first line has a empty closer at the end of the IMG tag. I wonder what that is all about.

I looked at his page and these are everywhere. Hrm...

**Vin DSL** · 10-12-2003, 03:23 PM

I'm starting to wake up now.

You know, I was just thinking back to the old days. Doesn't Netscape/Mozilla require that you put a break (<br>) after every instance of the image (<img>) tag, otherwise you get screwy things like added lines, odd spacing, and so forth - things that don't effect IE browsers?

**Vin DSL** · 10-12-2003, 04:12 PM

Okay, scratch all the above. I see what your problem is. The text links in the header are causing the problem, Smo. I was able to duplicate it in HomeSite by changing the font size, i.e. I got Explorer to do the same thing as Mozilla.

Because every browser has settings to override font size, et cetera, on web pages, and because different computer video cards display font in slightly different way, dpending on the manufacturer and drivers, et cetera, I would suggest you dump the text links and/or turn them into graphic icons. That way YOU can determine how they display, instead of leaving it up to someone elses' hardware and software configuration, which you have NO control over.

Does this make sense?

**lookout** · 10-12-2003, 04:18 PM

Yeah, I did notice the extra / at the end of the image tag and in other locations. Almost edited it out, but I figured most browsers just ignore it. There's plenty to pick apart here in the coding. Didn't think that was necessary since, on the whole, the page seems to display OK. I was responding only to the problem of the extra gap.

I believe what's happening here is that the height of the row has been dictated by the space needed to display the line of menu text, rather than by the image on the left. It's likely governed by the display of normal browser text before the style sheet is applied. So the row becomes a little taller than the left image on some displays (probably depending on your default browser font), and the background peeks through. Making the image a little taller should take care of that.

As a general rule, no, you don't need the extra break after every image tags in Netscape to prevent extra white space. But there's no doubt conditions where that would be true.

**lookout** · 10-12-2003, 04:20 PM

Must have cross posted. Yes that is exactly what is happening.

LinkBack

Thread Tools

Display

HTML /table problem, in Mozilla

Bookmarks

Bookmarks

Posting Permissions