I have read a lot of stuff on the web as well as this NG but don't seem
to know what's going on. IE does what I expect but not firefox.

1) I am trying to get my menu bar to line up bang against teh H1 tag's
lower border but cannot seem to do that. The space after teh H1 tag's
border is different in both IE and FF and I can't seem to get rid of
it. I've tried display:inline but that won't cut it. How do I do this?

2) In FF, my menu bar extends beyond it's parent div (content div) but
IE does what I want it to. WHat's missing here and why does that
happen?

Here's my CSS and sample page is at http://homw.cachecow.org:7777


html,body {
background-color:#999966;
height:100%;
margin-bottom:5%;
font-size:100%;
}


#content {

background-color:#CCCC99;
height:100%;
line-height: 16px;
font-family: Verdana;
text-align: left;
padding-top:0px;
padding-right:1.5%;
padding-left:1.5%;
padding-bottom:0px;
margin-left: 5%;
margin-right:5%;
margin-top:5%;
border-style:dashed;
border-width:2px;
border-color:#996633;
}

h1#title {
font-family: Impact;
color:#996633;
font-size: 450%;
line-height:100%;
margin-top:1.5%;
padding-bottom:1.5%;
border-bottom:solid;
white-space:nowrap;
}


div#menu { float:left;
margin-top:0px;
fonts-size:100%;
padding:0;
background-color: rgb(85%,76%,87%);
width:15%;
border-right:1px solid; }


div#menu a{  display:block;
padding:0.4em;
margin:0;

}

div#menu a:hover{  background-color:yellow;border-width-right:10px;

I know the CSS gurus are going to tell me to read this and that before
posting but please understand that I do read a lot before I post as
well as experiment but cannot figure this out. I would like the
solution as well as an explanation as to what's going on.

Thanks

DrD

drdeadpan wrote:
> I have read a lot of stuff on the web as well as this NG but don't
seem
> to know what's going on. IE does what I expect but not firefox.
>
> 1) I am trying to get my menu bar to line up bang against teh H1
tag's
> lower border but cannot seem to do that. The space after teh H1 tag's
> border is different in both IE and FF and I can't seem to get rid of
> it. I've tried display:inline but that won't cut it. How do I do
this?
>
> 2) In FF, my menu bar extends beyond it's parent div (content div)
but
> IE does what I want it to. WHat's missing here and why does that
> happen?
>
> Here's my CSS and sample page is at http://homw.cachecow.org:7777
>
>
> html,body {
> background-color:#999966;
> height:100%;
> margin-bottom:5%;
> font-size:100%;
> }
>
>
> #content {
>
> background-color:#CCCC99;
> height:100%;
> line-height: 16px;
> font-family: Verdana;
> text-align: left;
> padding-top:0px;
> padding-right:1.5%;
> padding-left:1.5%;
> padding-bottom:0px;
> margin-left: 5%;
> margin-right:5%;
> margin-top:5%;
> border-style:dashed;
> border-width:2px;
> border-color:#996633;
> }
>
> h1#title {
> font-family: Impact;
> color:#996633;
> font-size: 450%;
> line-height:100%;
> margin-top:1.5%;
> padding-bottom:1.5%;
> border-bottom:solid;
> white-space:nowrap;
> }
>
>
> div#menu { float:left;
> margin-top:0px;
> fonts-size:100%;
> padding:0;
> background-color: rgb(85%,76%,87%);
> width:15%;
> border-right:1px solid; }
>
>
> div#menu a{  display:block;
> padding:0.4em;
> margin:0;
>
> }
>
> div#menu a:hover{  background-color:yellow;border-width-right:10px;
>
> I know the CSS gurus are going to tell me to read this and that
before
> posting but please understand that I do read a lot before I post as
> well as experiment but cannot figure this out. I would like the
> solution as well as an explanation as to what's going on.
>
> Thanks
>
> DrD


drd, your link doesn't work right now.

my advice would be to explicitly define every margin that could be
causing the problem.  different browsers have different defaults.

sometimes it helps to define the element and ignore the ids... for
example, if you think the h1 tag's lower margin is causing problems
then put...

h1{margin: 0 0 0 0;}

as you probably know, the first digit represents margin-top and moves
clockwise to margin left.

see how this displays in both browsers.  if it works, then play a
little and find out what works for that particular id.

i once used...

hnav ul{...} and that didn't work.

i was then told to try...

ul#hnav and it worked like a charm.

you have to explicitly define EVERYTHING in css if you see a problem
(and you should even if you don't b/c trouble could be lurking
somewhere).

i found a css website that gives excellent information to folks who
don't know all the subtleties of css.  i will post it when i log onto
my other computer where its link resides.

Sorry skeets, typo in my original URL ..Here's the right one
http://home.cachecow..org:7777. Will try your suggestions..

drd, the link i mentioned before is here...

http://www.richinstyle.com/masterclass/perfection.html

although i haven't gone through all of this site, i think it has some
good information and css techniques.

ironicly, i don't like the way site looks...  but that isn't a css
issue, it is a design one!  -lol-

Sorry skeets, typo in my original URL ..Here's the right one
http://home.cachecow.org:7777
I doubt it's a margin issue but I will try messing with it some more.

drdeadpan wrote:
>
> 1) I am trying to get my menu bar to line up bang against teh H1 tag's
> lower border but cannot seem to do that. The space after teh H1 tag's
> border is different in both IE and FF and I can't seem to get rid of
> it. I've tried display:inline but that won't cut it. How do I do this?
>
> h1#title {
> font-family: Impact;
> color:#996633;
> font-size: 450%;
> line-height:100%;
> margin-top:1.5%;
> padding-bottom:1.5%;
> border-bottom:solid;
> white-space:nowrap;
> }
>
Add "margin: 1.5% 0 0 0; padding: 0" and delete margin-top.
You should also provide a default for the font-families, either serif
or sans-serif.


--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Ok Jim, looks like I learnt something about margins..Never will I
forget.. That got rid of the space after the H1 tag which was my first
question. WHat about item2,. The menu div 's container is the content
div but why is it extending beyond the  content div?
And Skeet thanks, will take a look at teh link.

DrD

On 23 Jan 2005 14:13:57 -0800, "drdeadpan" <vkat01-nospam@yahoo.com>
wrote:

>...WHat about item2. The menu div 's container is the content
>div but why is it extending beyond the  content div?

Because browsers are following specs in that respect when they render
floated elements.

Read all about it...

http://www.css.nu/exp/layer-ex3a.html
http://www.css.nu/exp/layer-ex3b.html
http://www.css.nu/exp/layer-ex3c.html
http://www.css.nu/exp/layer-ex3d.html
http://www.css.nu/exp/layer-ex4a.html

--
Rex

Thanks, Rex. I did go thru thos links but in all the examples of nested
divs, the height is not being specified. In my case, my content div has
a height of 100% ( the parent container (body,html) has a height of
100% too ) so that the content's background fills up the browser
window/viewport. I thought, adding a menu div with a height of 100% (
floated though) nevertheless would be 100% height of its parent (
content div) and extend as far as the parent div. IE does it but not
FF, which one is right and how can I reconcile this?

DrD

On 25 Jan 2005 07:39:52 -0800, "drdeadpan" <vkat01-nospam@yahoo.com>
wrote:

>IE does it but not FF, which one is right

FF is correct.

>and how can I reconcile this?

It's right there, on the example pages I gave and in the source of the
markup and style sheets.

A floated element gets broken lose from the document content flow and
starts to live a life of its own to some extent.

The starting point of a floated element is always as high up as it can
come given the context where it's placed. I.e. you can have inline and
block content inside the main container and above the start of your
float.

But once the float has found its starting point, all rest of content in
your main container will start to "flow" around your float.

Now, if your main container content is not long enough to flow all the
way down to the full height of your float, your float will (and shall)
"stick out" at the bottom of your main container, regardless of your
"fiddling" with 100% heights.

If you need your main container to fully cover your float you must put
some content into your main container that is directed to be rendered
below your float. I.e...

<DIV STYLE="clear: both;"></DIV>

...placed at the end of your main container content will do what you
want. It's a hack for sure, but it "works" for whatever value you want
to give to the word "works"...

--
Rex