Solved

Where does extra line break come from?

Posted on 2009-04-15
11
385 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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.

747 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

13 Experts available now in Live!

Get 1:1 Help Now