...

View Full Version : PLz help this to render OK in ie and FF



bazz
02-23-2005, 02:49 PM
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




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;
}

whizard
02-23-2005, 03:04 PM
add

#navbar ul
{
display:inline;
}


Dan

bazz
02-23-2005, 04:26 PM
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. :eek:

still confused.

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

Bazz

whizard
02-23-2005, 04:44 PM
you surer it doesn't work with JUST the ul set to inline?!

it worked for me.

Dan

whizard
02-23-2005, 04:51 PM
This CSS works on FF:


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

bazz
02-23-2005, 05:12 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum