Hejsa
I et tidligere indlæg blev jeg rådet til at bruge <li> i min top-menu istedet for at bruge tabel.
Dette kunne jeg godt se, og jeg fik efter lang tid det til at virke som det skulle og se rigtigt ud. Dette var localhost hvor det var lige som det skulle være.
Jeg rettede lidt andre småting som jeg har bakset med og ville så ligge alle mine rettelser op.
Til min store forfærdelse kommer min main-menu nu pludselig i liste-form istedet for at være horisontal.
Man kan se dette på
min udviklings side hvor den nu er vertikal.
Jeg poster lidt CSS i håb om en kan se hvad der er grund til det ser rigtigt ud på localhost, men ikke på serveren?
Markup:- <div id="TopMenuHolder" class="MenuOuter">
- <div id="TopMenu" class="Menu">
- <ul id="MainMenu">
- <a href="../Default.aspx"><li class="MainMenuItem">FORSIDE</li></a>
- <a href="../PROFIL/PersonligProfil.aspx"><li class="MainMenuItem">PROFIL</li></a>
- <a href="../CV/DownloadCV.aspx"><li class="MainMenuItem">CV</li></a>
- <a href="../PORTOFOLIO/PortofolioOverview.aspx"><li class="MainMenuItem">PORTOFOLIO</li></a>
- <li class="MainMenuItem">REFERENCER</li>
- <a href="../BLOG.aspx"><li class="MainMenuItem">BLOG</li></a>
- <a href="../KONTAKT/Kontakt.aspx"><li class="MainMenuItem">KONTAKT</li></a>
- </ul>
- </div>
- </div>
CSS:
- .MenuOuter
- {
- background-color: White;
- border-top: 3px solid #7dbc07;
- border-bottom: 3px solid #7dbc07;
- width: 100%;
- height: 30px;
- margin: auto;
- padding-bottom: 0px;
- padding-left: 0px;
- padding-right: 0px;
- padding-top: 0px;
- }
-
- .Menu
- {
- width: 756px;
- height: 30px;
- margin: auto;
- padding-bottom: 0px;
- padding-left: 0px;
- padding-right: 0px;
- padding-top: 0px;
- }
-
- /* ---------- MAIN MENU ---------- */
-
- #MainMenu
- {
- width: 100%;
- list-style-type: none;
- padding: 0px;
- margin: 0px;
- height: 30px;
- }
-
- li.MainMenuItem
- {
- color: #7dbc07;
- margin-top: 7px;
- vertical-align: middle;
- text-align: center;
- height: 18px;
- float: left;
- border-bottom: solid 5px white;
- width: 108px;
- text-transform: uppercase;
- font-weight: bold;
- }
-
- li.MainMenuItem:active, li.MainMenuItem:hover
- {
- border-bottom: solid 5px #7dbc07;
- }