Whitespace creating space between images
Firstly, sorry that I am unable to provide a link - the page is still on my laptop.
I have three images in a horizontal row. The code looks something like:
<img src="images/image.gif" width="100" height="50" /><img src="images/image.gif" width="100" height="50" /><img src="images/image.gif" width="100" height="50" />
This looks fine in firefox. All the images in a row with no space between them ( as is shown in the top picture in the attached file.)
As soon as I add returns to make the code a bit easier to work on like this:
<img src="images/keyboard_style_button.gif" width="100" height="50" />
<img src="images/keyboard_style_button.gif" width="100" height="50" />
<img src="images/keyboard_style_button.gif" width="100" height="50" />Firefox adds a space between the images as shown in the lower part of the attached image.
Is this a known issue and is there a solution?
Thanks
Nick
| Attachment | Size |
|---|---|
| Screenshot.png | 8.54 KB |
niccol posted this at 09:10 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
OK I am having trouble entering the code.
It is:
<img src="images/keyboard_style_button.gif" width="100" height="50" /><img src="images/keyboard_style_button.gif" width="100" height="50" />
<img src="images/keyboard_style_button.gif" width="100" height="50" />
Either with or without returns between the images.
Unfortunately because of the line length of the forum I can't get it to display as one long line of code
greg posted this at 09:34 — 1st June 2009.
He has: 1,581 posts
Joined: Nov 2005
Hi Nick, welcome to TWF
I've edited your first post to add the code tags. As the forum allows the use of some HTML tags (
<a href>etc) you need to wrap all code in the code tags, third icon from the right.Also, you can edit your posts with the "edit" link at the bottom of your post (or at the top if it's the first post of the thread).
_______________________
The only reason I can think this is happening when you enter a new line is due to your code editor.
Very unlikely to be this, but what do you have the character encoding set to?
Usually character encoding is UTF-8, but it really depends on what you need.
What editor are you using?
niccol posted this at 09:52 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
Yes, it is very strange. I haven't looked at it in IE yet as I am on a Linux machine.
I am using Quanta Plus on Ubuntu linux. Which usually doesn't add anything funky to the code. And i can't see anything when I have a look at it in other editors. And the source looks normal.
I have tried it in UTF-8 and iso-8859 -1 and still the same thing.
Oh, and I have taken out img border and margin in the css.
And in any case the gap between the images appears as soon as I put a return between the images so it can't be a css issue.
Weird.
I was only just starting to work on a layout so there isn't much to the code yet so I'll include it all.
Thanks for your help and advice!
Nick
niccol posted this at 09:55 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
Just as a update.
Any whitespace is doing it. A space, a tab, a return.
Weird Weird.
greg posted this at 10:01 — 1st June 2009.
He has: 1,581 posts
Joined: Nov 2005
I'm on Ubuntu too
If you upload this:
keyboard_style_button.gifand also the CSS code I'll take a look on my local server and see if I can replicate it.It might be an issue in the CSS too.
niccol posted this at 10:17 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
Good to know that you are on Ubuntu.
What editor do you use. I really like Quanta for its features but the documentation sucks and I think it is a dead end as far as development goes. So was thinking of moving to something else - or at least starting the process.
I can't upload a compressed version of it which might be easier but attached are the images which need to go in a directory and the css file.
See what you get! Thanks so much for taking the time.
niccol posted this at 11:52 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
can't see the attachments on the last post.
I'll try again
greg posted this at 12:23 — 1st June 2009.
He has: 1,581 posts
Joined: Nov 2005
I use Bluefish as an editor (add/remove -> click "Programming" and "all open source applications").
And FTP is FireFTP. With this combination (as with others) I can open a file within FireFTP directly from the server into Bluefish and when I click save in Bluefish it updates on the server (rather having to drag and drop/upload all the time)
__________________________
The issue just seems to be "the way HTML works". I haven't used HTML images like this for quite some time. I usually have them in CSS background or wrapped in a UL/LI, so never really get this issue.
The easy fix of course is just have them stacked one after another in the source code.
OR, you can do this:
<img src="images/keyboard_style_button_0.gif" width="100" height="50" /><img src="images/keyboard_style_button_0.gif" width="100" height="50" /
><img src="images/keyboard_style_button_0.gif" width="100" height="50" />
As HTML doesn't "render" a break or space of any kind from one image to another when the source return carriage is before the tag has ended.
Though I think it looks terrible and all on one line is acceptable.
All that said, if you're making a navigation with this, you might want to consider putting them in a UL/LI anyway.
It makes it easier for people using screen readers, and also makes it easier for alignments/styling etc.
niccol posted this at 12:43 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
thanks, Greg.
Yes, I normally use them as a background. Actually, usually as a sprite kind of affair with both the image and the hover version of it in the same image and then just reposition it to show the one I want.
I tend to mock it up first with just the images to check that it looks kind of the way I was anticipating. This time it didn't. But as you say there are lots of work arounds so no big deal. I just like understanding
but html, css, javascript and php have all taught me that there are some things you'll never understand. And that's witho6ut putting IE6 into the mix.
Thanks again
Nick
niccol posted this at 12:47 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
Yes FireFTP is great.
I think the one thing that Quanta does better than Bluefish is the 'project' management side of things with a built in ftp ability. Just press 'upload' and the file is on the server. Actually, you can work directly on the server versions but I tend to work on a local version and then upload. Learnt that lesson by clicking delete by accident one too many times....
greg posted this at 12:53 — 1st June 2009.
He has: 1,581 posts
Joined: Nov 2005
You know, I used to do exactly the same thing, for the same reason. Saved to HD then uploaded means I have two copies should anything go wrong.
But then I just got so sick of clicking FireFTP, selecting folder/file, clicking upload/yes to overwrite...and so on.
Just pressing Control S in Bluefish and it uploads to the server, while it's doing that I am going to the browser to click refresh.
To avoid the worry of bad edits just backup the files you're working on every hour or so.
(this is my trumpet you can hear..) I've been doing it for years now so I don't make mistakes these days.
On the rare occasion I just undo in Bluefish or get the temp file from my local.
niccol posted this at 13:35 — 1st June 2009.
They have: 9 posts
Joined: Jun 2009
Yes, but that is the advantage of Quanta. Works exactly as you describe but keeps a local copy too. Best of both worlds. And my process is the same. Press upload (which basically saves and uploads) then open the browser and click refresh. Pretty much the same except I don't have to think about backing up very often.
The only time I really use fireFTP is when I have a mod for something like a shopping cart or wordpress that already has the same directory structure as the target server. Then fireFTP seems to handle the merge best. And yes in those conditions I have to remember that the server version is different to the local version, or sync it.
It is probably paranoid to like to keep a local copy but....
And also glad to know that Bluefish gets the thumbs up from you. I like Quanta a lot for all kinds of reasons and chose it over Bluefish when I moved to linux a few years ago but as I say it feels like a dead end and the documentation is appalling so may end up back with Bluefish at some point.
And despite the hype have never missed Dreamweaver.
Cheers
Nick
greg posted this at 14:11 — 1st June 2009.
He has: 1,581 posts
Joined: Nov 2005
I've never actually used Dreamweaver, nor Quanta.
The problem with switching to another editor is you get so used to a particular syntax highlighting. It takes me a few days of coding to get used to a new one.
So my advice is unless you need to switch for a reason, like something it doesn't do you need or something it does that annoys you, then I would really stick with what you know well.
You get used to the tools you work with.
webwiz posted this at 18:55 — 1st June 2009.
He has: 629 posts
Joined: May 2007
Weird Weird.
Nothing weird about it. Any whitespace in the HTML shows up as a space in the display. Eliminate the whitespace between the images (blanks, returns, etc.) and there won't be a space in the display.
Suggestion: Float the images left so they will butt up against each other.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.