Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    PLz help this to render OK in ie and FF

    I have designed this page (below) and it looks now as I want it to, in IE. I just can't see why it's dioferent in FF. Specifically, the horiz nav bar is suppose to be immediately below the sunrise.

    Bazz

    Here's the CSS

    Code:
    body {
    font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
    font-size : 1em;
    text-align: center;
    background: url(/images/background.gif); 
    margin : 0;
    background-color : #888888;
    vertical-align : top;
    min-height : 100%;
    color: #000080;
    padding : 0;
    }
    
    div#headerdiv {
    width : 100%;
    vertical-align : bottom;
    margin : auto;
    margin-left : auto;
    margin-right : auto;
    text-align : center;
    background-color : #ffffff;
    }
    
    div#header {
    height : 125px;
    background-image : url(/images/header.jpg[/url]);
    background-repeat : no-repeat;
    background-color : #808080;}
    
    div#header img.logo {
    float : left;
    height : 125px;
    background-color : transparent;
    }
    
    div#header img.strapline{
    float : right;
    height : 125px;
    }
    
    div#topmenu {
    	
    	background-color: #808080;
    	padding: 0;
    	margin-top: 0;
    	text-align: center;
    
    }
    
    div#bottommenu {
    	background-color: #000040;
    	padding: 0;
    	margin-top: 0;
    	text-align: center;
    }
    
    }
    ul#navbar
    {
    	text-transform: lowercase;
    	display: inline;
    	white-space: nowrap;
    	margin: 0;
    	padding: 0 ;
    	border-left: 1px #E5F9FF dashed;
    }
    
    #navbar li
    {
    	display: inline;
    	list-style: none;
    	border-right: 1px dashed #E5F9FF;
    	padding: 0 5px;
    }
    
    #navbar a {
    	padding: 0 5px;
    }
    
    #navbar a:link, #navbar a:visited
    {
    	color: #E5F9FF;
    	text-decoration: none;
    	font-weight : bold;
    }
    
    #navbar a:hover
    {
    	color : #000040;
    	text-decoration: none;
    	background-color: #E5F9FF;
    }
    Last edited by bazz; 02-23-2005 at 08:32 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    add

    #navbar ul
    {
    display:inline;
    }


    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    It has been told to display inline but on your suggestion I thought I might try telling the div to diaply inline. That just made it disappear.

    still confused.

    Edit: I've added the full css for the top part of the page in my first post so that you arent working blind.


    Bazz
    Last edited by bazz; 02-23-2005 at 03:29 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    you surer it doesn't work with JUST the ul set to inline?!

    it worked for me.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    This CSS works on FF:

    Code:
    body {
    font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
    font-size : 1em;
    text-align: center;
    background: url(/images/background.gif); 
    margin : 0;
    background-color : #888888;
    vertical-align : top;
    min-height : 100%;
    color: #000080;
    padding : 0;
    }
    
    div#headerdiv {
    width : 100%;
    vertical-align : bottom;
    margin : auto;
    margin-left : auto;
    margin-right : auto;
    text-align : center;
    background-color : #ffffff;
    }
    
    div#header {
    height : 125px;
    background-image : url(http://thechrissystem.com/images/header.jpg);
    background-repeat : no-repeat;
    background-color : #808080;}
    
    div#header img.logo {
    float : left;
    height : 125px;
    background-color : transparent;
    }
    
    div#header img.strapline{
    float : right;
    height : 125px;
    }
    
    div#topmenu {
    	
    	background-color: #808080;
    	padding: 0;
    	margin-top: 0;
    	text-align: center;
    }
    
    div#bottommenu {
    	background-color: #000040;
    	padding: 0;
    	margin-top: 0;
    	text-align: center;
    }
    
    
    ul#navbar
    {
    	text-transform: lowercase;
    	display: inline;
    	white-space: nowrap;
    	margin: 0;
    	padding: 0 ;
    	border-left: 1px #E5F9FF dashed;
    }
    
    #navbar li
    {
    	display: inline;
    	list-style: none;
    	border-right: 1px dashed #E5F9FF;
    	padding: 0 5px;
    }
    
    #navbar a {
    	padding: 0 5px;
    }
    
    #navbar a:link, #navbar a:visited
    {
    	color: #E5F9FF;
    	text-decoration: none;
    	font-weight : bold;
    }
    
    #navbar a:hover
    {
    	color : #000040;
    	text-decoration: none;
    	background-color: #E5F9FF;
    }
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Ah, I didn't try it with just the ul set to inline. But by accident more than skill, I got it working when I changed around the uls and put one in 'topmenu' and the other within 'bottommenu'. Sort of accidentally, it now works.

    Thanks whizard. If I ahd waited for your reply, it would have been much simpler.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •