This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > January 2005 > What am I doing wrong.. Is it the line breaks?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
What am I doing wrong.. Is it the line breaks?
|
|
| drdeadpan 2005-01-23, 4:20 am |
| 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
| |
| Skeets 2005-01-23, 4:20 am |
|
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.
| |
|
|
| Skeets 2005-01-23, 4:20 am |
| 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-
| |
| drdeadpan 2005-01-23, 4:20 am |
| 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.
| |
| Jim Moe 2005-01-23, 4:20 am |
| 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)
| |
| drdeadpan 2005-01-23, 7:19 pm |
| 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
| |
|
|
| drdeadpan 2005-01-25, 12:39 pm |
| 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
| |
| Jan Roland Eriksson 2005-01-25, 7:23 pm |
| 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
| |
| Lauri Raittila 2005-01-31, 1:13 pm |
| in comp.infosystems.www.authoring.stylesheets, Jan Roland Eriksson wrote:
> On 25 Jan 2005 07:39:52 -0800, "drdeadpan" <vkat01-nospam@yahoo.com>
> wrote:
> 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"...
Well, AFAIK it don't work on some versions of FF, as they don't like
empty elements.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Nijmegen, NL.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|