#pentagram@irc.freenode.net logs for 4 Sep 2006 (GMT)

Archive Today Yesterday Tomorrow
Pentagram homepage


[00:03:15] --> Keal has joined #pentagram
[04:14:34] <-- watt has left IRC (Remote closed the connection)
[04:15:05] --> watt has joined #pentagram
[04:15:05] --- ChanServ gives channel operator status to watt
[05:53:19] --- sbx|afk is now known as SB-X
[06:29:49] <-- watt has left IRC (Remote closed the connection)
[06:30:50] --> watt has joined #pentagram
[06:30:51] --- ChanServ gives channel operator status to watt
[07:00:10] --> Kohlrabi has joined #pentagram
[07:00:53] <-- Kohlrabi has left IRC (Client Quit)
[07:19:22] --- Lord_Nightmare is now known as LordNAway
[07:51:28] <servus> wjp: Still need HTML/CSS help? Give me a /query if you want
[07:52:23] <Keal> servus
[07:52:24] <Keal> http://www.cnn.com/
[07:52:47] <Keal> front page
[07:54:03] <servus> Yes I read about that, it's terribly sad
[07:55:22] --- ChanServ gives channel operator status to Darke
[07:58:57] <Darke> Hrm... seems it takes about half an hour for news to travel half way around the world. Interesting.
[07:59:23] <servus> I read about it half an hour ago
[07:59:30] <SB-X> I heard that 3 hours ago.
[07:59:50] <SB-X> on the radio
[08:00:32] <SB-X> :S
[08:00:41] <SB-X> :(
[08:00:43] <Darke> Amusing, so CNN's 'breaking news' is actually quite late then.
[08:01:36] <servus> It was posted to cnn 1h 15m ago
[08:02:32] * Darke hrms... and he was miscalculating timezones too. A bit over an hour's difference between when the ABC (australia) reported it and when CNN reported it.
[08:14:57] <wjp> servus: thanks, but I should have things sorted out now
[08:16:02] <servus> Alright. I've got about, oh, 15,000 tableless pages tested in IE, Firefox Windows, and Safari. I'll be around : o)
[08:16:34] <wjp> I did 'cheat' and used a table actually
[08:17:08] <servus> Boo hiss! Once you figure out the tricks, it's easier to avoid tables though
[08:17:15] <servus> It's those tricks, though.. : o)
[08:18:50] <wjp> I do actually have one thing I'd like to improve:
[08:19:09] <wjp> I have a box which should contain a 'float: right' image
[08:19:26] <servus> *Guesses* - Extra whitespace in IE?
[08:19:40] <wjp> since floats don't influence the bottom of the containing box, I thought I'd simply add an 'clear: right' div at the bottom of the box to make sure it's large enough
[08:19:55] <servus> That'll work, with some caveats.
[08:20:29] <wjp> this had three effects in IE: 1) the box was large enough 2) the text in the box became invisible unless selected 3) the left margin of the box disappeared
[08:20:56] <servus> A common method would be <div><img src="..." alt="..." style="float:right;display:inline;">Lorem ispsum dolor sit amet<div style="line-height:0;clear:both;"> </div></div>
[08:22:03] <servus> If the outer div is inside a floating box itself, you will need to make the outer box float. Always make floating elements also display:inline except in the most unusual circumstances: The "Display" tag is ignored when "Float" is enabled, but IE still uses it to choose whether or not to add that horrendous magic whitespace to floated elements, so use it
[08:22:55] <servus> Certain browsers need clearing divs to contain text content - thus, the   - the line-height:0 makes it 0px high in IE again - do not use the "Height" element to set this unless line-height doesn't work (lots of different circumstances...)
[08:23:12] <servus> If text or images become invisible in IE, make them style="position:relative;" until it's fixed :)
[08:23:39] <wjp> hm, interesting; I should try that
[08:24:03] <wjp> as a workaround I had made the outer box floating (since floats have to fully contain all their floating children)
[08:24:14] <servus> position:relative is your general magic bullet for a. disappearing elements/text and b. elements that magically float across the screen for no reason
[08:24:35] <wjp> this workaround broke the width of the box in Opera 9, though
[08:24:45] <servus> There is another completely absurd hack called "clearfix" that works well on all browsers, hold by...
[08:25:02] <servus> I'd try the simple clearing div trick again first though
[08:27:11] <wjp> this one? http://www.positioniseverything.net/easyclearing.html
[08:27:48] <servus> http://rafb.net/paste/results/KuXYaX69.html This will also work in all but exceptional circumstances
[08:28:20] <servus> Beat me to it :)
[08:28:31] <servus> Neither methods work 100% of the time. I prefer the first method.
[08:29:00] <servus> Just remember: Always display:inline your floats, avoid floats when possible, and use CSS backgrounds instead of img's whenever you can
[08:30:20] <wjp> thanks for the tips
[08:30:41] <servus> Isn't IE fun? Makes the hair fall out
[08:31:23] <servus> No problem, hope they help a tiny bit : o)
[08:49:19] <-- watt has left IRC (leguin.freenode.net irc.freenode.net)
[08:49:19] <-- Darke has left IRC (leguin.freenode.net irc.freenode.net)
[08:49:19] <-- servus has left IRC (leguin.freenode.net irc.freenode.net)
[08:49:19] <-- Colourless has left IRC (leguin.freenode.net irc.freenode.net)
[08:49:19] <-- SB-X has left IRC (leguin.freenode.net irc.freenode.net)
[08:49:19] <-- LordNAway has left IRC (leguin.freenode.net irc.freenode.net)
[08:49:19] <-- wjp has left IRC (leguin.freenode.net irc.freenode.net)
[08:49:19] --> watt has joined #pentagram
[08:49:19] --> Colourless has joined #pentagram
[08:49:19] --> Darke has joined #pentagram
[08:49:19] --> SB-X has joined #pentagram
[08:49:19] --> servus has joined #pentagram
[08:49:19] --> LordNAway has joined #pentagram
[08:49:19] --> wjp has joined #pentagram
[08:49:37] <wjp> example: http://www.math.leidenuniv.nl/~wpalenst/test/
[08:56:14] <-- Keal has left IRC (Read error: 113 (No route to host))
[08:57:43] <servus> Looking...
[09:10:44] <servus> How much do you care about preserving your previous HTML and CSS, wjp? :)
[09:11:17] <wjp> fairly little :-)
[09:13:09] <servus> Well I was able to fix yours with a few lines' changes, anyway.
[09:15:58] <servus> Try this: http://rafb.net/paste/results/MBs8n953.html
[09:18:47] <servus> Some notes: A position:absolute'd element's "position parent" should always be made position:relative, and you might not want to set height on both an element (the div#header) and its only pushing element (the h1), but it should be fine here
[09:19:12] <servus> The major thing I changed was the parent div's height: to line-height:, which works better in IE in a lot of cases.
[09:19:35] <wjp> yes, indeed
[09:20:02] <wjp> the non-auto margin on the h1 was intented to prevent the title from overlapping the image, by the way
[09:20:39] <servus> Setting a min-width on the container might do that more reliably
[09:20:48] <wjp> does min-width work in IE?
[09:21:09] <servus> (Since min-width doesn't work in IE, you can use * html div#header { width: 768px; }
[09:21:25] <servus> width works the same way on IE as min-width ought to
[09:21:30] <wjp> the margin appeared to work in firefox, IE and safari, in any case
[09:21:48] <servus> OK, well, whatever works : o)
[09:21:50] <wjp> the '* html selector' is to make something IE-specific?
[09:22:13] <wjp> thanks for taking a look at this; much appreciated :-)
[09:22:23] <servus> Only IE has a * "containing" the HTML element, so other browsers ignore it
[09:22:50] <servus> I see what you mean by the margin on the img#logo, looks good.
[09:25:31] <servus> Glad to be of service, hope it helped! Now to mock up some hoaxy Pentagram3D images...
[09:38:34] <wjp> clearfix works like a charm
[10:14:21] --> Kohlrabi has joined #pentagram
[10:58:02] <-- Kohlrabi has left IRC ("Quit")
[11:14:09] <-- SB-X has left IRC ("BRB")
[11:38:21] --> SB-X has joined #pentagram
[11:59:00] <-- Colourless has left IRC (Read error: 104 (Connection reset by peer))
[12:49:35] --> Kohlrabi has joined #pentagram
[14:02:56] --> Corvus has joined #pentagram
[16:28:45] <-- SB-X has left IRC ("*casts gate travel*")
[17:44:55] <-- Kohlrabi has left IRC (Read error: 104 (Connection reset by peer))
[17:45:14] --> Kohlrabi has joined #pentagram
[17:57:03] <-- Kohlrabi has left IRC (Nick collision from services.)
[17:57:09] --> Kohlriba has joined #pentagram
[18:49:59] <-- Corvus has left IRC ("Left")
[20:48:44] --> Kohlrabi has joined #pentagram
[21:05:48] <-- Kohlriba has left IRC (Read error: 110 (Connection timed out))
[22:59:42] --> Colourless has joined #Pentagram
[22:59:42] --- ChanServ gives channel operator status to Colourless