HTML - IE giving gaps between lines, Firefox looks perfect

fcdev · 03-31-2009, 12:55 AM

I'm working on a web site which is to drive a database I have written, but I'm having troubles with formatting the company logo on the site.

The problem is that I need to have several lines with different portions of the logo, intermingled with graphical buttons with hyperlinks.

Under Firefox, everything looks great (as you would expect).
However, under IE, I get blank gaps between rows of images.

Here's a snippet of the revelant code ... The problem is where the tags are.

Code:

<body>
<img width=177 height=80 src="tptop.png" name="tptop.png"
><img width=100 height=80 src="tpspacer.png" name="tpspacer.png"
><img width=429 height=80 src="tpwords.png" name="tpwords.png"
><img width=150 height=80 src="tpspacer.png" name="tpspacer.png"
><img width=26 height=80 src="tprightend.png" name="tprightend.png"
<br>
<img width=177 height=32 src="tpbottom1.png" name="tpbottom1.png"
><img width=63 height=32 src="bottomblank.png"
><a target="main" href="courses.htm"><img width=164 height=32 src="courses1.png" name="courses1.png" border="0"
></a><img width=63 height=32 src="bottomblank.png"
><a target="main" href="calendar.htm"><img width=164 height=32 src="calendar1.png" name="calendar1.png" border="0"
></a><img width=63 height=32 src="bottomblank.png"
><a target="main" href="venues.htm"><img width=164 height=32 src="venues1.png" name="venues1.png" border="0"></a>
</a>
<br>
<img width=50 height=32  src="tpbottom2.png" name="tpbottom2.png"

You can view this at http://www.trainingprofessionals.com.au
If you view it within IE, the whole thing looks aweful. I have not yet tested it on Safari or Chrome.

Any help with this would be greatly appreciated.

- Stephen Fraser

wje_lq · 03-31-2009, 07:35 AM

Please reconsider your strategy.

fcdev · 03-31-2009, 07:52 AM

Quote:

Originally Posted by wje_lq

Please reconsider your strategy.

I would not be asking this question if I was trying to support only a single browser ... I'm asking for help in making this code work on multiple browsers.

AnanthaP · 03-31-2009, 07:53 AM

There are two depreciated clauses in the syntax of IMG that MIGHT solve your problem.
HSPACE=0 VSPACE=0

But do reconsider your strategy and try style sheets.

END

AnanthaP · 03-31-2009, 07:54 AM

IMG has two depreciated clauses HSPACE=0 VSPACE=0.

End

fcdev · 03-31-2009, 08:34 AM

Quote:

Originally Posted by AnanthaP

There are two depreciated clauses in the syntax of IMG that MIGHT solve your problem.
HSPACE=0 VSPACE=0

But do reconsider your strategy and try style sheets.

END

Thank you for that information, unfortunately those two tags didn't seem to help, but I will investigate them a bit further in the morning, in case I happen to be using them incorrectly. As for style sheets, I've started looking into them, but I doubt I'll be able to learn enough about them, and get this front page finished before my deadline in two days time.

But thanks for your efforts.

charlitos · 03-31-2009, 08:49 AM

first of all make sure you have this css rule at the beggining of your CSS file.

* {
margin : 0;
padding : 0;
border : none;
}

if that doesnt fix the problem then just remove the end of line after every image on your xhtml code(it wont look as pretty to read but it should fix the problem...99% guaranteed), IE has issues with this most of the time :P

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

As a general advice, I would recommend you to use standard XHTML coding. no but . Also wrap your images into div tags and assign a style for these. That way you will end up with a more organized xhtml code and easier to fix every time you have problems. Sometimes browsers disagree on how theyre gonna treat those margins and padding around the images but they seem to agree when it comes to div tags. This is not absolutely necessary but it will help you later on...just trust me. Also dont use framesets(I saw them on the code of your website) use php templates.

ps: you can also use tags, look it up.

fcdev · 03-31-2009, 07:00 PM

I've found the solution, and I'd like to thank everyone who responded.

For anyone else struggling with this issue, it was that I had end-of-line characters outside of my tags ...

Originally I had code that looked like this ...
<img ...>
 
<img ...>

That resulted in gaps besides, and below my images. Then I discovered that moving the '>' on the end of the img tags to the next line before the next tag fixed the gap to the sides ...

<img ...
> 
<img ...
>

To fix the gap below, I had to do the same with ...

<img ...
> <img ...
>

It appears that a new-line character is fine INSIDE a tag, but it creates whitespace when it is used OUTSIDE a tag.

As for all the other suggestions of using style sheets and avoiding framesets ... I will look into these once I am past this deadline and have a bit more breathing room. It's just a case of not having the time to learn a new technique and implementing it, plus completing the web site within the 36 hours I have remaining.

Once again, thank you for all the help.

- Stephen Fraser