Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Where does extra line break come from?

Posted on 2009-04-15
11
Medium Priority
?
408 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

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.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.

705 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