Prev: How to let the height of a div grow automatically with the heightof another div?
Next: How to fix Headings ?
From: David Schwartz on 23 Jun 2008 19:46
I've got a sidebar element that's a floating div. To the left of this
div, there are p's each with a margin-right set as well as overflow:
auto set (see below)). Some of the p's are of class 'subhead'. In FF2,
all of these elements obediently mind the left margin of the sidebar.
In IE, however, the subheads do not and run underneath the sidebar.
Any ideas why?

The css is as follows:

..subhead {
background-color: #D6ECF3;
color: black;
font-size: 90%;
font-weight: bold;
line-height: 20px;
margin-bottom: 10px;
}

P {
margin-left: 10px;
margin-right: 20px;
font-size: 12pt;
overflow: auto;
}

The sidebar has the following style:
overflow: auto; padding-left:10px; margin-top:10px; margin-bottom:
10px; margin-right: 10px

TIA,
David
From: John Hosking on 23 Jun 2008 22:18
David Schwartz wrote:
> I've got a sidebar element that's a floating div. To the left of this
> div, there are p's each with a margin-right set as well as overflow:
> auto set (see below)). Some of the p's are of class 'subhead'. In FF2,
> all of these elements obediently mind the left margin of the sidebar.
> In IE, however, the subheads do not and run underneath the sidebar.
> Any ideas why?

Yes, several. But first (apologies to all those who are tired of the
same old questions):

URL? (Please don't paste a bunch of incomplete code.)
Doctype? (Are you inciting Quirks mode [q.g.]?)
Which IE? 6? 7? 3.01?
What do you think "the left margin of the sidebar" is that the p
elements are supposed to mind?

>
> The css is as follows:
>
> .subhead {
> background-color: #D6ECF3;
> color: black;
> font-size: 90%;
> font-weight: bold;
> line-height: 20px;

See, for example, the thread from a week ago starting with the post
<e9bece37-7424-4387-aa88-0561e05d8436(a)e39g2000hsf.googlegroups.com> or
simply adopt the <number> variant described at
http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height.

> margin-bottom: 10px;
> }
>
> P {
> margin-left: 10px;
> margin-right: 20px;
> font-size: 12pt;

Please not in points (unless you're printing). Please not so small.
Especially if you're going to make something called .subhead (surely a
heading of some kind) to be only 90% of this size. And note that you've
asked for a line-height in *pixels* to go with a font-size in *points*.

> overflow: auto;
> }
>
> The sidebar has the following style:
> overflow: auto; padding-left:10px; margin-top:10px; margin-bottom:
> 10px; margin-right: 10px

Inline, I'm guessing, but why? And again, where's the left margin which
must be obeyed?


--
John
Pondering the value of the UIP: http://improve-usenet.org/
From: David Schwartz on 24 Jun 2008 10:45
> URL? (Please don't paste a bunch of incomplete code.)
Sorry but I don't have a freely accessible web server at my
disposal

> Doctype? (Are you inciting Quirks mode [q.g.]?)
See the markup below

> Which IE? 6? 7? 3.01?
IE7
> What do you think "the left margin of the sidebar" is that the p
> elements are supposed to mind?
Why does there have to be a margin set for the sidebar? This, btw,
did the trick but I don't understand why it's necessary.
>
>
>
> > The css is as follows:
>
> > .subhead {
> > background-color: #D6ECF3;
> > color: black;
> > font-size: 90%;
> > font-weight: bold;
> > line-height: 20px;
>
> See, for example, the thread from a week ago starting with the post
> <e9bece37-7424-4387-aa88-0561e05d8...(a)e39g2000hsf.googlegroups.com> or
> simply adopt the <number> variant described athttp://www.w3.org/TR/CSS21/visudet.html#propdef-line-height.
>
> > margin-bottom: 10px;
> > }
>
> > P {
> > margin-left: 10px;
> > margin-right: 20px;
> > font-size: 12pt;
>
> Please not in points (unless you're printing). Please not so small.
> Especially if you're going to make something called .subhead (surely a
> heading of some kind) to be only 90% of this size. And note that you've
> asked for a line-height in *pixels* to go with a font-size in *points*.
>
> > overflow: auto;
> > }
>
> > The sidebar has the following style:
> > overflow: auto; padding-left:10px; margin-top:10px; margin-bottom:
> > 10px; margin-right: 10px
>
> Inline, I'm guessing, but why? And again, where's the left margin which
> must be obeyed?
Actually, this is applied to a div.
>

Thanks for your help!

David

From: Bergamot on 24 Jun 2008 10:53

David Schwartz wrote:
>> URL? (Please don't paste a bunch of incomplete code.)
> Sorry but I don't have a freely accessible web server at my
> disposal

Sure you do. Does your ISP give you any free space? Did you google for
"free web server"? There's always yahoo/geocities if you're desperate.

Sorry, but nobody wants to read a bunch of code embedded in a post. Find
a publicly accessible server and upload a test page. Do be sure to
validate your code to eliminate syntax errors as a cause of rendering
issues.

Make it as easy as possible for us to help you, and you'll get a much
better response. Posting code is not the way. Posting a URL is.

--
Berg
From: John Hosking on 24 Jun 2008 14:18
David Schwartz wrote:
[but trimmed the attributions, which I'll now try to re-add -JH]

> John Hosking wrote:
>> David Schwartz wrote:

>> URL? (Please don't paste a bunch of incomplete code.)
> Sorry but I don't have a freely accessible web server at my
> disposal

Geez, everybody else in the world does. ;-)

>
>> Doctype? (Are you inciting Quirks mode [q.g.]?)
> See the markup below

Well, I *did* see the markup below, and there wasn't any doctype
declaration, which is why I asked, but there wasn't any <head> or <html>
or <body> or <title>, either, so I had to ask. If you post a URL (yes,
there are free servers available, if you look, and if for some reason
you really can't use "your" server), then the doctype or lack of it is
evident for all. Pasted code snippets don't tell the whole story.


>> What do you think "the left margin of the sidebar" is that the p
>> elements are supposed to mind?
> Why does there have to be a margin set for the sidebar? This, btw,
> did the trick but I don't understand why it's necessary.

It's not clear what did the trick (what's "this", exactly), but I don't
see what you're confused about here. You want some left margin to be
recognized, but you don't say what it is. Presumably, you added one, and
that's what made it be recognized. Isn't that self-explanatory? Or what
am I misunderstanding?

[...other stuff, trimmed, because neither of us has anything more to say
about it...]

>
> Thanks for your help!

YW

--
John
Pondering the value of the UIP: http://improve-usenet.org/
 |  Next  |  Last
Pages: 1 2
Prev: How to let the height of a div grow automatically with the heightof another div?
Next: How to fix Headings ?