Solved

Internet explorer crlf, white space problem

Posted on 2009-05-13
9
362 Views
Last Modified: 2013-12-08
hi to all,
i have a problem.i've attaced two html file.  no-problem.html has no problem of course. but problem.html is problem with internet explorer 7. because there is a enter char after img element. it's no problem for chrome or ff.
what can i do?
thanks.


problem.html.txt
no-problem.html.txt
problem.jpg
0
Comment
Question by:erenpasa
  • 5
  • 3
9 Comments
 
LVL 39

Accepted Solution

by:
abel earned 500 total points
Comment Utility
It is a classical problem. Whitespace after <img> tags, before the end of the enclosing block (<p> or <div> or <td> etc) will show this problem. You can only reliably solve it by removing this (officially insignificant) whitespace. And yes, I know, your pretty-printed layout of the code will be a bit disrupted. Long live IE.

Two resolutions:

<!-- version 1 -->

<div style="border:1px red solid">

    <div>

	<img class="style_0" src="http://sabri2.webtek.com.tr/UserFiles/1.jpg"/></div>

</div>
 

<!-- version 2 -->

<div style="border:1px red solid">

    <div>

	<img class="style_0" src="http://sabri2.webtek.com.tr/UserFiles/1.jpg"/><!--

    --></div>

</div>

Open in new window

0
 
LVL 39

Expert Comment

by:abel
Comment Utility
Thought I was quite quick, thorough and complete, why do you B-grade me? Always give experts the chance to earn there A-grade, by following up in the question, we may be wizards, but we can't read minds. Please read EE's policy on 10pts must.
0
 

Author Comment

by:erenpasa
Comment Utility
hi abel,
i've read the EE's policy now. you are right by EE's policy. if i read it before i give you A-grade. But i though that i 've attached a html file without problems  and you not said different things.I've give B-grade for this reason.

0
 
LVL 39

Expert Comment

by:abel
Comment Utility
Ah, my apologies. I now see that I basically only told you what you already new. Why didn't you say so? I would've elaborated (which is why we're here, and sometimes it happens that we miss something of a question) if you'd asked.

And, back to the question: you actually new the problem. I seconded that. The solution is, as you now know, only a workaround (I can't make you happier about IE's quirks, I know). A more complex solution would be to use JavaScript to remove the whitespace. And I do remember a CSS-only solution, but I didn't get that working recently.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 39

Assisted Solution

by:abel
abel earned 500 total points
Comment Utility
I'm glad you came back and explained. I went back to the drawing board and tried some solutions. Use the following as a solution with CSS only, and you can keep your whitespace (and I will remember it, I hope, for the next time this question pops up):

If you feel you should change the grade based on this new info, you can click "Request Attention" next to your question and ask a moderator to reopen the question. They usually do that within about 12 hours.

<div style="border:1px red solid">

    <div>

    <img style="vertical-align:bottom;"

        class="style_0" src="http://sabri2.webtek.com.tr/UserFiles/1.jpg"/>

    </div>

</div>

Open in new window

0
 

Author Comment

by:erenpasa
Comment Utility
hi abel,
i 've send a message to reopen the question. i'll change your graduate.

thanks alot.
0
 
LVL 39

Expert Comment

by:abel
Comment Utility
tx, erenpasa and modus_operandi.
0
 

Author Comment

by:erenpasa
Comment Utility
nop. bye.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now