#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    the Netherlands
    Posts
    66
    Rep Power
    11

    css positioning problem in mozilla


    Hi,

    i made this page:
    http://www.jarra.nl/_TEST/test.htm

    css file:
    http://www.jarra.nl/_TEST/mottacss2.css

    i'd like to have the orange line above "new title" at the same height as the orange line under the gray box.
    it's like that in IE6 on XP, but it's slightly lower in mozilla on XP.
    can't seem to fix it ;-)

    any ideas,

    thanx a lot !!

    jarra
    http://www.jarra.nl
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    city of sin, state of the art
    Posts
    421
    Rep Power
    0
    what if you change the height of 60....

    Code:
    #rightcontentparttop {
    	border-bottom-color: #CC6600;
    	border-bottom-style: dotted;
    	border-bottom-width: 1px;
    	height: 60px;
    	margin-top: 0px;
    }
    to 20 to match the navigation...

    Code:
    #navigation {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 14px;
    	color: #CC8800;
    	display: block;
    	background-color: #444444;
    	width: 355px;
    	padding-left: 10px;
    	height: 20px;
    	font-style: normal;
    	font-variant: small-caps;
    	font-weight: bold;
    	border-bottom-color: #CC5500;
    	border-bottom-style: dotted;
    	border-bottom-width: 1px;
    }
    not sure i m reading it right but give it a shot and let us know how it goes

    good lucky and rock on!!
    "I hate quotations."
    -ralph waldo emerson-
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    the Netherlands
    Posts
    66
    Rep Power
    11
    thanks for you're help, but it does the job in mozilla, but places high in IE6 again...

    it works when i add:
    Code:
    #navcontent {
    	margin-top: 40px;
    	padding-left: 15px;
    	position: absolute;
    }
    the position: absolute element.

    but, that screws up my page when i change the screen size.


    jarra
    http://www.jarra.nl
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Or, you could remove "width: 355px;" from #navigation.

    The html has no structure, and there is no need to nest divs 4 or 5 deep. Write structured html, and the need for a lot of your nesting goes away.

    BTW, ids may only refer to a single element — you've used right-something multiple times.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    the Netherlands
    Posts
    66
    Rep Power
    11
    you're right that my css styling is a bit clumsy... ;-)
    if i take away the width element, it alters the design a little.
    will have to decide what i prefer,

    but thanks a lot for your help..

    jarra
    http://www.jarra.nl

IMN logo majestic logo threadwatch logo seochat tools logo