Hi,
I have designed a html file which uses a CSS horizontal menu. When browsing the html file with frontpage 2003 the menu appears as a vertical menu in the design tab. However when viewing it in a browser such as IE6,Firefox 1.04 and netscape 7.2 it is a horizontal menu just the way that I have designed it.
I have used display:inline and float:left in the css file but i do not understand why frontpage shows it as a vertical menu.
Here it is my html and css:
<LINK rel="stylesheet" href="mystyle.css" type="text/css" >
<body>
<UL class=menu>
<LI><A
href="#">Link One</A>
<LI><A
href="#">Link
two</A>
<LI><A
href="#">Link
three</A>
<LI><A
href="#">Link
four</A>
<LI><A
href="#">Link
five</A>
</LI></UL>
.menu A {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 70%; WIDTH:7em; COLOR: black; FONT-FAMILY: VERDANA,GENEVA,ARIAL,HELVETICA,SANS-SERIF; HEIGHT: 1.1em; TEXT-ALIGN: center; TEXT-DECORATION: none; padding: 0;BACKGROUND-COLOR: blue;FLOAT:left;
}
.menu A:link {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 2px solid
}
.menu A:visited {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT:white 1px solid; BORDER-BOTTOM: white 2px solid
}
.menu A:hover {
BORDER-RIGHT: white 1px solid; BORDER-TOP: white 2px solid; BORDER-LEFT: white 2px solid; BORDER-BOTTOM: white 1px solid;BACKGROUND-COLOR: white
}
.menu li {
DISPLAY:inline;
}
thanks for your input
I have designed a html file which uses a CSS horizontal menu. When browsing the html file with frontpage 2003 the menu appears as a vertical menu in the design tab. However when viewing it in a browser such as IE6,Firefox 1.04 and netscape 7.2 it is a horizontal menu just the way that I have designed it.
I have used display:inline and float:left in the css file but i do not understand why frontpage shows it as a vertical menu.
Here it is my html and css:
<LINK rel="stylesheet" href="mystyle.css" type="text/css" >
<body>
<UL class=menu>
<LI><A
href="#">Link One</A>
<LI><A
href="#">Link
two</A>
<LI><A
href="#">Link
three</A>
<LI><A
href="#">Link
four</A>
<LI><A
href="#">Link
five</A>
</LI></UL>
.menu A {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 70%; WIDTH:7em; COLOR: black; FONT-FAMILY: VERDANA,GENEVA,ARIAL,HELVETICA,SANS-SERIF; HEIGHT: 1.1em; TEXT-ALIGN: center; TEXT-DECORATION: none; padding: 0;BACKGROUND-COLOR: blue;FLOAT:left;
}
.menu A:link {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 2px solid
}
.menu A:visited {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT:white 1px solid; BORDER-BOTTOM: white 2px solid
}
.menu A:hover {
BORDER-RIGHT: white 1px solid; BORDER-TOP: white 2px solid; BORDER-LEFT: white 2px solid; BORDER-BOTTOM: white 1px solid;BACKGROUND-COLOR: white
}
.menu li {
DISPLAY:inline;
}
thanks for your input