Solved

Where does extra line break come from?

Posted on 2009-04-15
11
406 Views
Last Modified: 2013-12-25
Under the presidentIQ Lite image here http://www.cygen.com/, there is an extra line break.  The word "Lite" should be just under the image, like the one to the left.  I've included a screenshot using IE Developer Toolbar.  Where is the extra #text coming from?  What is causing the weird line break?
phantomBR.png
0
Comment
Question by:brettr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 2
11 Comments
 
LVL 4

Expert Comment

by:justin-clarke
ID: 24148213
http://www.cygen.com looks fine in Firefox, in IE6 looks fine (as in no #text) but the images are mis-aligned.

#text in a css stylesheet would refer to an ID, i.e, id="text" in the HTML code.

I'm guessing this is done in .NET ? It may be that some tag in the css isn't closed properly ?


That's the code I get when viewing source and there's no #text in there
<div id="presidentIQLite" style="float:left;margin-left:20px;margin-right:40px;font-size:smaller;">
<img id="_ctl0_PageContent_Image1" src="presidentIQ/images/PresidentIQ5757Lite.png" alt="Memorizing the presidents has never been easier." style="border-width:0px;" />
<br />Lite
</div>
<br /> <br />
Be surprised at how quickly you can memorize all the presidents
<br /><br />
0
 
LVL 39

Expert Comment

by:abel
ID: 24148226
The #text means a text node, probably only with whitespace. It is there because you have whitespace in the (X)HTML structure and it is usually good to have it there.

The extra white line you see after applying the CSS has to do with something else, but I don't see it in FireFox. It looks like a common IE mishap though, hold on.
0
 
LVL 39

Expert Comment

by:abel
ID: 24148239
@justin-clarke: I think the OP is using an object/xml browser to visualize the HTML, the #text is not an element.
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 4

Accepted Solution

by:
justin-clarke earned 250 total points
ID: 24148305
abel okie doke!

Just figured in the image you have..

#text
<BR>
#text
<BR>

so those will be making your line breaks.

I guess the word "Lite" is below the 2nd <BR> in the image you have shown. Still doesn't make much sense why it's giving a couple of <BR> tags in the IE version you are using..
0
 
LVL 39

Expert Comment

by:abel
ID: 24148405
Change line 61 in the following and remove line 62 and the extra (erroneous by IE) whitespace will go:

<img id="_ctl0_PageContent_Image1" src="Q_24324214%20(CSS%20extra%20whitespace%20line)_files/PresidentIQ5757Lite.png" alt="Memorizing the presidents has never been easier." style="border-width:0px;" /><br />
Lite

Open in new window

0
 
LVL 39

Expert Comment

by:abel
ID: 24148437
It's a typical IE quirk and it is supposed to have gone with IE8, where whitespace handling is improved. But in IE7 it is still apparent. Even though this whitespace is considered irrelevant whitespace, IE7 apparently things otherwise and parses it different then the standard compliant browsers.

-- Abel --
0
 
LVL 39

Assisted Solution

by:abel
abel earned 250 total points
ID: 24148468
sorry, the links in my post with urls were the downloaded links and have been tampered with to make it available locally. Here's the real source (and it is line 63/64)

<!-- change this -->
<img id="_ctl0_PageContent_Image1" src="presidentIQ/images/PresidentIQ5757Lite.png" alt="Memorizing the presidents has never been easier." style="border-width:0px;" />
<br />Lite
 
 
<!-- into this -->
<img id="_ctl0_PageContent_Image1" src="presidentIQ/images/PresidentIQ5757Lite.png" alt="Memorizing the presidents has never been easier." style="border-width:0px;" /><br />
Lite

Open in new window

0
 

Author Comment

by:brettr
ID: 24148532
@abel:

In post  ID 24148405, what is the difference?  You are still using a <br>.  I'm not sure what image you are using there either.
0
 

Author Comment

by:brettr
ID: 24148547
Ok, fixed.  I was using Visual Studio.  There was a line break in the designer just after the image but that was a WYSIWIG thing and shouldn't have been translated into a <BR>.  Thanks.
0
 

Author Closing Comment

by:brettr
ID: 31570450
Sorry abel.  I didn't see that you can two sets of code.  But the issue was actually with Visual Studio 2008.
0
 
LVL 39

Expert Comment

by:abel
ID: 24148729
glad you found it. Like I said earlier, the line break is normally not a problem. However, in IE it can result to strange behavior... (and tricky to track down).

> In post  ID 24148405, what is the difference?  

the <br /> at the end instead of on the next line. See 24148468.


0

Featured Post

Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

623 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