HTML - IE giving gaps between lines, Firefox looks perfect
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 <br> tags are. Code:
<body> 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 |
Please reconsider your strategy.
|
Quote:
|
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 |
IMG has two depreciated clauses HSPACE=0 VSPACE=0.
End |
Quote:
But thanks for your efforts. |
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 <br> but <br />. 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 <span> tags, look it up. |
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 <br> tags ... Originally I had code that looked like this ... <img ...> <br> <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 ... ><br> <img ... > To fix the gap below, I had to do the same with <br> ... <img ... ><br ><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 |
All times are GMT -5. The time now is 10:33 PM. |