Improve company productivity with a Business Account.Sign Up

x
?
Solved

Where does extra line break come from?

Posted on 2009-04-15
11
Medium Priority
?
417 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
  • 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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LVL 4

Accepted Solution

by:
justin-clarke earned 1000 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 1000 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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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.

Join & Write a Comment

Magento is the best technology for eCommerce start-ups as it offers the technical expertise and visual appeal to create a store that pulls sales and earns high ROI (Return on investment).
This article is about the challenges faced by Android app developers.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

608 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