Tue, 2005-10-25 17:58
Check out my test page: http://test.followourwedding.com/test.php
I added that red background so you can see eaiser what I'm talking about.
For the lines of text that are being "floated left", they are indented a px or so. Any <br>'s aren't. What can I do to fix that, so that all the text will line up properly?
I'm sure there's a hack, but I couldn't think of what search terms to use to find it. And as always, this isn't seen in FF/NS
Brandon
Tue, 2005-10-25 18:37
#1
Spacing problem with float: left (IE Only)
http://www.positioniseverything.net/explorer/threepxtest.html
You have a case of divitis developing. You need to think more about semantics. There's no need to wrap every link in a div, or to class everyone of them either. And the ul itself is a block level element so that doesn't need to be wrapped in a div either. The <br>s are unneeded and the text should be wrapped in <p>s
Tue, 2005-10-25 19:11
#2
Spacing problem with float: left (IE Only)
<div class="parentDiv"> <div class="pageDiv"> <div class="navDiv"> <div class="navheadingDiv"><span class="navheadingSpan">Navigation</span></div> <div class="navlinksDiv"> <ul> <li><div class="navlinkslinkDiv"><a href="?layout=blue001">Style Blue 001</a></div></li> <li><div class="navlinkslinkDiv"><a href="?layout=blue002">Style Blue 002</a></div></li> <li><div class="navlinkslinkDiv"><a href="?layout=blue003">Style Blue 003</a></div></li> <li><div class="navlinkslinkDiv"><a href="?layout=bandw001">Style Black & White 001</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 6is an extremely long link that I would never use</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 7</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 8</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 9</a></div></li> </ul> </div> <div class="navsearchDiv"> </div> </div> <div class="contentDiv"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /> <br /> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /> <br /> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /> <br /> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /> <br /> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.<br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /> <br /> <br /> Do you speak latin?? </div> </div> </div>
AAAAAAAAAAAAAAAAAAAAaaaaaaaaaaarrrrrrrghhhh...
What's wrong with using this:
<dl> <dt>Navigation</dt> <dd><a href="?layout=blue001">Style Blue 001</a></dd> <dd><a href="?layout=blue002">Style Blue 002</a></dd> <dd><a href="?layout=blue003">Style Blue 003</a></dd> <dd><a href="?layout=bandw001">Style Black & White 001</a></dd> <dd><a href="#">Link 6is an extremely long link that I would never use</a></dd> <dd><a href="#">Link 7</a></dd> <dd><a href="#">Link 8</a></dd> <dd><a href="#">Link 9</a></dd> </dl> <div id="content"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div>
?
Tue, 2005-10-25 20:59
#3
Spacing problem with float: left (IE Only)
I don't quite understand wtf you're on about... but what about this:
Create a new style in your stylesheet (or style section in your page) called:
.contentDiv p {
margin 5px 5px 5px 5px;
}
THEN wrap all your text in the contentDiv using the P tag:
<div class="contentDiv">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
<br />
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br />
<br />
Nam liber tempor *beep* soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br />
<br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
<br />
Do you speak latin??</p>
</div>
Tue, 2005-10-25 22:20
#4
Spacing problem with float: left (IE Only)
Blueprint wrote:
THEN wrap all your text in the contentDiv using the P tag:
All that content is not just one paragraph. Each new paragraph should be contained within its own set of <p></p> tags and not spaced using <br />s.
Tue, 2005-10-25 22:44
#5
Spacing problem with float: left (IE Only)
I would have mentioned that, but it works the same either way...
Tue, 2005-10-25 22:50
#6
Spacing problem with float: left (IE Only)
Not exactly: not only is using <p> tags a better way to describe your content semantically, you also get more precise control over each individual block of text. You can't, for instance, apply a text indent to each new paragraph if you've used <br />s to separate them, or if you wanted alternating paragraphs a different colour (you could use <span> tags to do that, but then you've introduced a new tag anyway, so why not use <p>?).
Wed, 2005-10-26 03:09
#7
Spacing problem with float: left (IE Only)
Thanks for posting the hack. It works. (but see below)
As for changing the UL to a DD, is there a real advantage? I have 4 template-stylesheets that are applied to this same set of code to create unique layouts for the visitor to chose from. I'd like to not have to back through and change the HTML unless there is a real advantage.
Also, for using P tags: I'd love to and intended to, but if I wrap each paragraph in it's own tag, the 3px thing comes back.
Wed, 2005-10-26 03:29
#8
Spacing problem with float: left (IE Only)
Do your paragraphs have to butt up against the navigation box? I find the easiest way of dealing with the 3px jog is to just give the margined elements a wider margin so that they're no longer touching the float.
Wed, 2005-10-26 06:50
#9
Spacing problem with float: left (IE Only)
they don't have to, but even when I increase the margin for the P to 215px, it just pushes everything over, including the 3px jog.
Wed, 2005-10-26 06:55
#10
Spacing problem with float: left (IE Only)
I just tried this (just 1px gap) and it works in both IE and FF:
.navDiv {
width: 210px;
float: left;
background: #0DF;
}
p {
margin-left: 211px;
background: #f00;
}That's all the CSS - take everything else out.
Wed, 2005-10-26 07:12
#11
Spacing problem with float: left (IE Only)
No, you don't have to use a <dl> - in fact you probably should use the <ul> with a heading tag.
I just saw a list of items with a title, and thought DL 
Wed, 2005-10-26 16:47
#12
Spacing problem with float: left (IE Only)
Updated: http://test.followourwedding.com/test.php
It looks like a reverse 3px jog now. And that's with your style Tyssen.
Wed, 2005-10-26 20:06
#13
Spacing problem with float: left (IE Only)
<div class="navDiv"> <div class="navheadingDiv"><span class="navheadingSpan">Navigation</span></div> <div class="navlinksDiv"> <ul> <li><div class="navlinkslinkDiv"><a href="?layout=blue001">Style Blue 001</a></div></li> <li><div class="navlinkslinkDiv"><a href="?layout=blue002">Style Blue 002</a></div></li> <li><div class="navlinkslinkDiv"><a href="?layout=blue003">Style Blue 003</a></div></li> <li><div class="navlinkslinkDiv"><a href="?layout=bandw001">Style Black & White 001</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 6is an extremely long link that I would never use</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 7</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 8</a></div></li> <li><div class="navlinkslinkDiv"><a href="#">Link 9</a></div></li> </ul> </div> <div class="navsearchDiv"> </div> </div>
Sorry, but are you actually going to take our advice and do something about that divitis?
Wed, 2005-10-26 21:43
#14
Spacing problem with float: left (IE Only)
Yes, I did change that in the "live testing" version of the site, I just didn't take the time to edit that test.php file.
Updated URL: http://test.followourwedding.com/test.php
Quote:
It looks like a reverse 3px jog now. And that's with your style Tyssen.
Wed, 2005-10-26 21:43
#15
Spacing problem with float: left (IE Only)
Brandon @ Cstone wrote:
It looks like a reverse 3px jog now. And that's with your style Tyssen.
Looks fine to me in IE6 - see attachment.
Thu, 2005-10-27 01:24
#16
Spacing problem with float: left (IE Only)
Look closely. The first 2 P's have a 3px padding for some odd reason. The last 2 P's do not have that, and they look as they should.
Specifically, look at the 2nd P. The last line shows the difference in paddings.
:?:
Tue, 2005-11-01 06:02
#17
Spacing problem with float: left (IE Only)
Bump.
I've discovered that the reason why the hack doesn't work is b/c I use "margin-left: 210px;" to make sure that the text doesn't wrap around the float container. Can anyone think of a better way to do this?
Brandon
EDIT: LINK > http://test.followourwedding.com/test.php
Tue, 2005-11-01 06:26
#18
Spacing problem with float: left (IE Only)
Ok, I looked at Wired.com, and they accomplished what I want. They use an absolute position for the 2nd column. If I use this, the footer I use doesn't work well with short content.
Here's the link to what I've come to:
Long Content > http://test.followourwedding.com/?layout=blue001
Short Content > http://test.followourwedding.com/login.php?layout=blue001
For the Shot Content you may need to resize your window to see what I mean.
Any ideas?
EDIT: This is an amazing write up > http://www.positioniseverything.net/articles/onetruelayout/ I think it works for me; gonna test is pretty throughly