Carriage Returns in HTML Code Creating Extra Spaces Between Elements

I've looked online all over and can't find the solution to my issue. I've found several pages explaining a similar event, but no solution.
When placing many divs next to each other, I would like to visually view the code as one div per line: (see image) To get this, I have to use hard returns in my code (this method makes editing a lot easier visually). But doing so adds extra spacing between the divs which turns a 3 column set of thumbnails to 2 colums. I can fix this if I adjust the physical margins between the divs, but this can't be the only fix.
The other fix is if I place the code back to back to back (see image): This makes the div's behave and appear as they should, but now the code is a visual mess because it's all cluttered.
What I want is to be able to use as many carriage returns in my code and for browsers to disregard these types of line breaks in the code. So essentially, how can I get away from these extra spaces when using hard returns in code?

I think that both your pages have a missing </div> at the end somewhere.
Opps... that happened when I was stripping down the page to create a working example of my issue. I've fixed the missing div and re-uploaded both pages. The problem is still there.
Change display: inline; to float: left; and add margin: 0 0 4px 4px; (as shown below)
I had already tried using float, but something else in the code was forcing the columns to 2 instead of 3.
Have you used "Apply Source Formatting" ?
I use that religiously. I'm quite anal about visually clean code.
Well, I just fixed the problem while replying... funny... I removed the margins from the actual img element (.imageThumb img) and placed it on the div which surrounds the img (.imageThumb). I also reapplied the float. Thanks all for the help - it helped me rethink. But I could have sworn I had once placed the margins on .imageThumb before and it didn't work.
.imageThumb {
 width: 100px;
 height: 75px;
 display: inline;
 float: left;
 margin: 0px 10px 10px 0px;
 cursor: pointer;
.imageThumb img {
 /*margin: 0px 10px 10px 0px;*/

Similar Messages

My layout wont listen to size I set and creates huge spaces between element

I am having a small issue:
Here is an image with the issue:
http://i877.photobucket.com/albums/ab335/darksniperx2/asg2_prob.jpg
Is there anyway to remove all of the extra spaces and that the program would follow with the size I specify?
code:
   public void initialiseComponents(final Container pane){
        //initialise panels
         mainPanel.setLayout(new GridLayout(2,1));
         topSection.setLayout(new GridLayout(1,3));
         mainGrid.setLayout(new GridLayout(21, 6));
        //initialise components text
         nameLbl.setText("Enter you name:");
         timeSchLbl.setText("Time scheduler");
         chkBoxNotificationLbl.setText("Check on the check boxes");
         timeLabel.setText("Time");
         modayLabel.setText("Monday");
         tuesdayLabel.setText("Tuesday");
         wednesdayLabel.setText("Wednesday");
         thursdayLabel.setText("Thursday");
         fridayLabel.setText("Friday");
        //add compenents to topSecion
         topSection.add(nameLbl);
         topSection.add(timeSchLbl);
         topSection.add(chkBoxNotificationLbl);
         //add components to mainGrid
         mainGrid.add(timeLabel);
         mainGrid.add(modayLabel);
         mainGrid.add(tuesdayLabel);
         mainGrid.add(wednesdayLabel);
         mainGrid.add(thursdayLabel);
         mainGrid.add(fridayLabel);
         setCheckboxes();
         //add layouts
         mainPanel.add(topSection);
         mainPanel.add(mainGrid);
         pane.add(mainPanel);
    private static void createAndShowGUI() {
        //Create and set up the window.
        asg2 frame = new asg2();
        frame.setSize(1000,900);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //Set up the content pane.
        frame.initialiseComponents(frame.getContentPane());
        //Display the window.
        frame.pack();
        frame.setVisible(true);
    public static void main(String[] args) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
    }

Hold it right there, I did not say that GridLayout was no good. It is perfect for your other two panels, but not for mainPanel.
... which one do you think would be better or serve this situation?First, check out the link Mr Burke gave you from the previous post -- you're going to need to know all those Layouts presented that tutorial anyway. I try to use the default Layout on a Container if possible. I personally like the GridBagLayout, but it is much more difficult to use and understand than the other Layouts in the tutorial.
OP, don't think that any of these solutions come easy or fast -- there is a lot of studying and practicing to do. Try all the Layouts and see what happens, until you have no doubts about which one to use for your app.

How can I put extra spaces between hyperlinks?

After I insert hyperlinks they are too close together and are very hard to determine where they are apart from one another. How can I insert extra space between the links so they are more legible?

design view:
Home Page Why Hi-TEC? Services Our Staff Contact Us
Make Appointment Our Credentials Learn About Your Car
code view:
 
<a href="index.html">Home Page</a> <a href="why_hitecauto.html">Why Hi-TEC?</a> <a href="services.html">Services</a> <a href="staff.html">Our Staff</a> <a href="contacts.html">Contact Us</a>
<a href="appointment.html">Make Appointment</a> <a href="credentials.html">Our Credentials</a> <a href="about_your_car.html"> Learn About Your Car</a>

Extra space between paragraphs: is there a way to delete that?

I am importing text from a word document to format in InDesign. It' 150 pages of a book that I'll layout.
I made a mistake when writing the book with word by creating a space between every paragraph, which I now want to get rid of.
Is there a way to automate this with InDesign? Is there some way to automatically delete the extra space betwen my paragraphs and add an indent instead?

Hi craigatadobe12345
You can do it by by seaching "^p^p" in find and replace "^p^t" with Find/Replace window. This will remove the extra line and set a tab to indent the text.
Please find below the screenshot of the same. Hope it helps...
Best,
Anil Yadav

Scrollbar & extra spaces between pages.

Hi All,
Please provide some help on smartforms.
We are facing following problem with smartforms, We have created a smartform having one table with dynamic content.And after this dynamic table we have some static content.Based on the no.of items, the length of the entries in the table varies.If the table entries length increased beyond the page length, then we are getting a scrollbar in the page in which this table is displayed.
We had maintained the page length to the maximum.
And we are also getting some extra spaces between each static content of the smartform.
Regards
Veena.

i already set the margins to the exact limits of the frames.,
have a question:
i have a big non repeating (a lot of repeating and no repeating frame inside.,print object 1st page) in the top of my main section and have a small repeating frame below it (print object last page.,)
does the small repeating frame causes the space? or it doesn't?

How to get rid of an extra space between news items in news module

My home page is www.turbocam.com. Notice on the left side that there is an extra space between news item 1 and 2. Between news item 2 and 3 the spacing is normal. I haven't touched the template. Any thoughts as to why this is occuring? The module is listed as:
{module_announcement,l,3}
Thanks.
Liz Dorsett
Turbocam

Never mind! I figured it out. I had break tags outside the div tag!

Why is there a thin dark line between two of my three cover images that wasn't there before? When I delete the images, you can tell that there is extra space between the first two image boxes.

Getting ready to purchase my first book, I looked over everything once more and noticed that there is now a thin gray line between the first two of my three cover images. I believe this may have happened when I switched out the left image. When I delete the images, you can see an extra space between the center and left image boxes. How can I fix this without starting over?

What size book? Are you previewing this way -
Before ordering your book preview it using this method - http://support.apple.com/kb/HT1040 - and save the resulting PDF for reference - the delivered book will match it.
LN

Carriage Return ignored in ABAP Created HTML?

We are in the pre-production box for an upgrade.
We have ABAP source code that generates HTML logic. It worked fine in 4.6.
The carriage return/line feeds are being ignored.
I have already tried all the cl_abap_char_utilities=>NEWLINE
                                          cl_abap_char_utilities=>CR_LF
                                          cl_abap_char_utilities=>FORMFEED.....and more
I've tried the conversion utilities also.
When we look in the debugger we see the cr_lf values as ##, and 0d000a00 in hex, which should work, right?
But, when we view the source code on the web page - where arrays are not being built because the crlfs are being ignored- we can see that when the html is being written, the crlfs are ignored and the html is all over the place, unformatted.
I am thinking there must be a another HTML Function Module that might be available to format the html table before sending it out thru WWW_HTML_MERGER. Again, even in debug everything look good, but when it writes it to the URL the crlfs are ignored?
     Any suggestions?

Becuase you enter your patterns as expressions where some characters are used as control characters, and then have to esacpe some of the control characters in the expressions when you enter them as java strings.
So the expression is actually \r\n if you let a user enter it into a textfield, but you have to escape the \ if you write it as a String in the source code (since \ is an escape characters in strings)
/Kaj

Outputting XML carriage return in HTML via XSLT

Hi,
I have a scenario where I execute a View Object query in ADF to retrieve results from a particular table in the Database. I then iterate through the results in my Java managed bean and manually construct an XML file with all the appropriate tags. I then pass the XML file through a Transformer class in the Java bean based on an XSLT I have created to produce an HTML page. However I have an issue when it comes to handling carriage returns. One of the database table columns can contain carriage returns within its value but in the final HTML page the carriage returns don't have any effect and the text just displays on one line.
In the database, the values are stored with the carriage return and in SQL Developer, Toad etc this can be seen e.g. Text1 Text2 Text3 Text4 will display on separate lines. In the XML, the carriage return seems to still be there as when I open the file my element which contains the carriage returns shows each part on a new line e.g. <textElement>Text1
 Text2
 Text3
 Text4</textElement> (The Text2, Text3 and Text4 all start on a new line at the beginning and there's no prior white space as shown in this post)
The XML file in JDeveloper also shows carriage return arrow symbols where there is one.
The HTML page just shows them as Text1 Text2 Text3 Text4 all on one line. Inspecting the source of the HTML shows that the carriage return is in fact there as it also displays as per the XML with the values on separate lines.
Outputting the value from the View Object in Java to the log shows the value coming out like this - Text1 Text2Text3Text4, which is strange but I know the carriage returns are there so I'm not too fussed about this.
I have tried escaping the characters in the Java by doing str.replaceAll("[\\r\\n]", ""); (but replacing the "" with  
 or &x0A;) so in the XML it replaces carriage returns and line feeds with these escaped characters. However, when the XSLT parses the XML it doesn't pick these up and instead actually outputs these actual characters as they are e.g. Text1&x0A;Text2&x0A;Text3&x0A;Text4
So I can confirm that the carriage return is carrying all the way through to the XSL but I can't help but think that maybe I need to do something in the XSL to process this somehow, e.g. doing the equivalent of the 'replace' in Java but I don't know what I need to search for in the XML and also what to actually replace it with..Do I just replace it with a in HTML?
We also parse the XML using PDF and Excel XSL Transformer class and see the same results.
Any help would be appreciated.
Thanks

That's a very commonly asked question.
HTML doesn't preserve linefeeds, except for the <pre> tag.
You'll have to replace those characters with tags in the XSLT.
Search the Internet for terms like "XSLT HTML LF", you'll find some XSLT sample templates to handle the replacement.

Converting carriage return in HTML spool

I've written an sql for spooling the result of a Select in HTML format by using "set markup html on spool on head".
The problem is that when I open the HTML file I no longer find the carriage returns. I mean the carriage returns that were in CLOB field of the table now miss. Could you help me?
This is the script:
set pagesize 10000
set scan off
set markup html on spool on head ' - '
column text heading "TEXT"
spool c:\temp\report.html
select dbms_lob.substr (t.field, 5000, 1) text
from table t;
spool off;
exit;
The "field" contains a long text with carriage returns that aren't in the report.html anymore

user12180597 wrote:
I've written an sql for spooling the result of a Select in HTML format by using "set markup html on spool on head".
The problem is that when I open the HTML file I no longer find the carriage returns. I mean the carriage returns that were in CLOB field of the table now miss. Could you help me?
This is the script:
set pagesize 10000
set scan off
set markup html on spool on head ' - '
column text heading "TEXT"
spool c:\temp\report.html
select dbms_lob.substr (t.field, 5000, 1) text
from table t;
spool off;
exit;
The "field" contains a long text with carriage returns that aren't in the report.html anymoreset preformat to ON:
set markup html on spool on head ' - ' PRE ON

How do I remove extra space between paragraphs

I'm writing a research paper, and between paragraphs an extra line of space is added. My professor isn't happy about this. Help me eliminate the space.

The default after paragraph spacing in Pages is 12 points. With a 12 point font, this puts a whole line-worth of space after each paragraph return. It is very easy to change this in the text inspector.
If you don't want to have to remember to change it each time you open a new blank word processing document, create your own template. Open the blank template & set up your document with the line spacing, margins, headers, etc. as you'd like. Redefine all of the paragraph & character styles to have your desired font. You can set default wrap for any object as well as many other settings. Insert a table, click in it & choose the font, size, color, etc. you want in the fonts panel or format bar. You can do similar changes to inserted objects & text boxes. While you're at it resize the box if you want, set the amount of extra space in the wrap inspector, etc. Delete each text box, object & table after you've set them.
Now, save this document as a template & select that template as default in preferences. If you decide to make any changes to the template down the road, just Save As Template again with the same name & replace the previous version. All of your new documents will have these settings for inserted objects, images & tables. Unfortunately, the settings won't apply to any other templates or "foreign" documents you open with Pages.

How to create invisible space between 2 boxes

I am trying to create a vertical space between 2 horizontal boxes in
a JPanel.
Following is the code sample i am using:
this.add(horizontalbox1,BorderLayout.NORTH);
this.add(Box.createVerticalStrut(3));
this.add(horizontalbox2,BorderLayout.CENTER);
this.add(Box.createVerticalStrut(3));
this.add(horizontalbox3,BorderLayout.SOUTH);
This doesn't work.
I tried using setBorder()to create empty Border method but that doesn't work too.

Looks like you're mixing layouts of the 'this' JPanel. You should set it to be a BoxLayout instead of a BorderLayout if that's what it currently is. If the 'this' JPanel is a BorderLayout you can only add things to the NORTH, SOUTH, EAST, or WEST. Where are your struts being added? Try the following instead.
setLayout(new BoxLayout(contentPane, BoxLayout.Y_AXIS));
add(horizontalbox1);
add(Box.createVerticalStrut(3));
add(horizontalbox2);
add(Box.createVerticalStrut(3));
add(horizontalbox3);

How do I create equal space between multiple tabs in Pages?

I am trying to create four center tabs with equal space between each but can not fiqure out how to achieve this. I owuld like to avoid using tables becuase I am trying to make sure the document is fully cross-paltform (Word, Pages, Open Office, etc.). Any ideas?

K or C,
The Text Inspector, "Tabs" tab has a box where you create tab stops. Click the plus sign to add a stop. When you are done, make a Paragraph Style to preserve the settings. As for regular spacing, you may have to use some arithmetic to achieve that.
These settings should be respected by any normal word processor.
Jerry

How do I create a space between the songs on the playlist?

Hi, I have a dance studio, in which we perform at the fair this weekend. I put all the songs that we're dancing to on a playlist, but the songs fade into each other...Is there anyway where I can create a space in between each song.Please Help!!!
-LaQuette

i tried this edit>perferences>crossfade playback>deselect,
but it doesn't work for me. there's no way to save the deselection(e.g., via "save" or "ok"). once i close out of the playback folder, the crossfade playback feature just rechecks itself and comes back on. and even if i keep the feature deslected while songs are playing and don't close out, itunes still inplements the crossfade playback feature. any suggestions?

Getting a extra space between the line in the PDF output

I an having the rtf templete contains a table . That table contains 3 row and for the second row i have a for loop start at 1st column and end's at last column . first and 3rd row are the simple data donot have any for loop .
So in the PDF out put of the templete gives me extra blank line between the data for the 2nd row.
Example
1st row ------ Contains data field
2nd row For Each grouph data fields End for
3rd row --------- Contains data field
On the PDF output the data which is in the for loop ( 2nd row ) takes one more extra line ( space ) between the record .

I an having the rtf templete contains a table . That table contains 3 row and for the second row i have a for loop start at 1st column and end's at last column . first and 3rd row are the simple data donot have any for loop .
So in the PDF out put of the templete gives me extra blank line between the data for the 2nd row.
Example
1st row ------ Contains data field
2nd row For Each grouph data fields End for
3rd row --------- Contains data field
On the PDF output the data which is in the for loop ( 2nd row ) takes one more extra line ( space ) between the record .

Carriage Returns in HTML Code Creating Extra Spaces Between Elements

Similar Messages

Maybe you are looking for