Unwanted Spacing

Please look at http://rkassoc.org/bkflownew/. Note the blank spacing in between the images; I DO NOT want that.

This is very close to this question

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28680618.html

Attached is the source.

Now can I fix this so there is NO blank space between the two images?
index.htm
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David Johnson, CD, MVPOwnerCommented:
FYI  border="0" is no longer supported. Will be following as I don't know the answer either.
0
Joe PriorCommented:
Hi..
Take both the images in single div and use css for the border as shown below:
<div>
<img src="images/header1.jpg" style="border:0px"><br><img src="images/menubar.jpg" style="border:0px">
</div

Open in new window


Thanks
Joe
0
Edwin HofferTechnical ExpertCommented:
Hello Richard,

You can remove the space between the images by using "display:flex;"

Check the below correct Image:

no-space.png
You can also read more about Flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope that resolved the issue

Best Regards
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

David Johnson, CD, MVPOwnerCommented:
display:flex worked for me unfortunately it doesn't validate.. my editor wants display:flexbox .. the solution seems to distort the image though
0
Richard KortsAuthor Commented:
To all:

Neither works. See http://rkassoc.org/bkflownew/index.htm for Joe Prior version; See http://rkassoc.org/bkflownew/index1.htm for Edwin Hoffer version.

Maybe I did the coding wrong; see attached for source of both.

I can't BELIEVE this is Sooooooooooooo complex for something so basic.
index.htm
index1.htm
0
Edwin HofferTechnical ExpertCommented:
Try This,

<!DOCTYPE html>

<html>
<head>
<title>Backflow Inspector</title>
<style>
.nobord { padding: 0; margin: 0 auto;display:flex; }
</style>
</head>
<body>
<div class="nobord"><img border="0" src="images/header1.jpg"></div>
<div class="nobord"><img border="0" src="images/menubar.jpg"></div>


</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsAuthor Commented:
That did it; I don't exactly understand why, I thought that was essentially what I did before.
0
Edwin HofferTechnical ExpertCommented:
You used <br> code instead of what I gave you. In last code I gave the full code.
0
Richard KortsAuthor Commented:
Edwin Hoffer,

That's one thing about html / css I have NEVER understood. It seems that <div> sometimes starts on the next line & sometimes on the same line.

Can you provide a link that explains the rule is uses to determine which case it is?

Thanks,

Richard
0
Edwin HofferTechnical ExpertCommented:
Hello Richard,

You can read about flex box here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes 

Best Regards
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.