-
1. Re: Carriage Returns in HTML Code Creating Extra Spaces Between Elements
Ken Binney Mar 5, 2012 5:55 PM (in response to Shan-Dysigns)Put all CSS and HTML online and post a link.
Line returns in code have no effect on display
Browsers have default margins whixh can be zeroed out with CSS
-
2. Re: Carriage Returns in HTML Code Creating Extra Spaces Between Elements
Shan-Dysigns Mar 5, 2012 8:11 PM (in response to Ken Binney)I have stripped the page down as much as possible to be able to focus on the issue.
http://www.shan-dysigns.com/userForums/dreamweaver/carriage/clean.php
is the file which I have the html code for the divs placed on individual lines (using carriage returns when typing code) - the code looks cleaner - easier to edit, but ends up adding extra space in between the divs resulting in the 3 column turning into 2 columns.
http://www.shan-dysigns.com/userForums/dreamweaver/carriage/clutter.php
is the same page but placing the code for the divs back to back to back. Although this gives me the result I want on the web page, the code view looks cluttered.
For both examples, the divs are inside another div with the class of "content". Again, the issue could be semi-resolved if I change the margins of
.imageThumb img {
margin: 0px 10px 10px 0px;
}
but there has to be a reason carriage returns are adding additional spaces. I hope someone can help. Little things like this make me go crazy.
-
3. Re: Carriage Returns in HTML Code Creating Extra Spaces Between Elements
martcol Mar 6, 2012 12:13 AM (in response to Shan-Dysigns)I think that both your pages have a missing </div> at the end somewhere.
It can help to keep track of your <div>s by commenting the closing tags
<!--end #content--></div>
Martin
-
4. Re: Carriage Returns in HTML Code Creating Extra Spaces Between Elements
osgood_ Mar 6, 2012 12:31 AM (in response to Shan-Dysigns)Change display: inline; to float: left; and add margin: 0 0 4px 4px; (as shown below)
.imageThumb {
width: 100px;
height: 75px;
float: left;
margin: 0 0 4px 4px;
cursor: pointer;
}
-
5. Re: Carriage Returns in HTML Code Creating Extra Spaces Between Elements
Ken Binney Mar 6, 2012 4:27 AM (in response to Shan-Dysigns)At risk of repeating myself, unless you split a tag,
spacing in code does not affect rhe way your page displays in browser
Have you used "Apply Source Formatting" ?
It's a one-click way to neaten up your code formatting
http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7bdda .html
-
6. Re: Carriage Returns in HTML Code Creating Extra Spaces Between Elements
Shan-Dysigns Mar 6, 2012 11:02 AM (in response to martcol)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;*/
}






