Avatar billede alex_sleiborg Nybegynder
18. september 2009 - 12:52 Der er 8 kommentarer

Menu ser forskellig ud i IE 7 og 8

Min menu ser fin ud i IE8, firefox, chrome, safari og opera. Men ikke i IE7. Nu er jeg ingen CSS haj, så jeg skal nok have det skåret ud i pap før jeg forstår det.
Jeg har sat nogle borders på bare for at se, hvor de forskellige elementer går til.
Et af problemerne er f.eks. at IE7 ikke gider at fylde UL helt ud i den div den er i. Håber der er nogen der kan hjælpe mig med dette?

Min menu består af en almindelig html liste, asp:ContentPlaceholder returnere bare noget ala det her.

<li><a href="Et link">Et link</a></li> osv.

Og TitleContent er giver bare en streng

            <div id="subMenu">
                <span id="titleParent">
                    <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
                </span>
                <ul id="ulSubMenu">
                    <asp:ContentPlaceHolder ID="SubMenuContent" runat="server" />
                </ul>
            </div>

Og her er css

/* Sub MENU 
----------------------------------------------------------*/
div#subMenu
{
    border: 1px solid Black;
}
div#subMenu span
{
    color: #a11523;
    float: left;
    font-family: Century Gothic;
    font-weight:500;
    text-align: left;
    font-size: 15px;
    width: 100%;
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
ul#ulSubMenu
{
    text-align: left;
    border: 1px solid Red;
}
ul#ulSubMenu li
{
    list-style-image: url('../../Images/SubMenuIcon.gif');
    list-style-type: circle; /*If image doesn't exist, then use circle*/
    border-bottom: 1px dotted #D6D6D6; /*border: 1px solid Black;*/
}
ul#ulSubMenu li#greeting
{
    font-family: Tahoma;
    text-decoration: none;
    line-height: 2.8em;
    color: #000000;
}

ul#ulSubMenu li a
{
    font-family: Tahoma;
    text-decoration: none;
    line-height: 2.8em;
    color: #000000;
}

ul#ulSubMenu li:hover
{
    background-color: #fff;
    text-decoration: none;
    list-style-image: url('../../Images/SubMenuIconSelected.gif');
}

ul#ulSubMenu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#ulSubMenu li.selected selectedSubMenu
{
    background-color: #000000;
    color: #4b893f;
    list-style-image: url('../../Images/SubMenuIconSelected.gif');
}
Avatar billede CCodam Nybegynder
18. september 2009 - 13:35 #1
Hvis jeg bruger ovenstående kode, så får jeg noget der på ingen måde ligner en menu, det kan dog til dels skyldes at jeg ikke har billederne associeret med menuen.

http://www.whattheflux.dk/menuen.htm

Da jeg ikke kan se sammenhængen i menuen, og hvordan det er du vil have den skal se ud, er det lidt svært at hjælpe dig :/

Det skal dog siges at da de forskellige browsere ofte tolker både css og html forskelligt, kan det nogen gange være nødvendigt at lave et "hack" i sit css script.

Du kan fx skrive * foran hvilken som helst attribute, for at sørge for det kun er IE7 der læser denne linie.

Derved kan du ændre fx background-color til hvid kun i IE7 ved at skrive følgende:

background-color: #000000;
*background-color: #FFFFFF;
Avatar billede alex_sleiborg Nybegynder
18. september 2009 - 14:10 #2
Nu har jeg fjernet det der faktisk ikke bliver brugt i det css.

div#subMenu
{
    border: 1px solid Black;
}
div#subMenu span
{
    color: #a11523;
    float: left;
    font-family: Century Gothic;
    font-weight:500;
    text-align: left;
    font-size: 15px;
    width: 100%;
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
ul#ulSubMenu
{
    text-align: left;
    border: 1px solid Red;
}
ul#ulSubMenu li
{
    list-style-image: url('../../Images/SubMenuIcon.gif');
    list-style-type: circle; /*If image doesn't exist, then use circle*/
    border-bottom: 1px dotted #D6D6D6; /*border: 1px solid Black;*/
}
ul#ulSubMenu li a
{
    font-family: Tahoma;
    text-decoration: none;
    line-height: 2.8em;
    color: #000000;
}

ul#ulSubMenu li:hover
{
    list-style-image: url('../../Images/SubMenuIconSelected.gif');
}

Jeg prøver lige at oversætte det til alm. html så

  <div id="subMenu">
                <span id="titleParent">
En menu
                </span>
                <ul id="ulSubMenu">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu2</a></li>
                </ul>
            </div>

Her er et screenshot af IE7
http://www.speedyshare.com/962410943.html

Og et af IE8
http://www.speedyshare.com/951525894.html

Jeg skal gerne have dem lidt længere til mod venstre, der bruger jeg så margin-left: -15px;

Men så ser menuen helt underlig ud i IE7
Avatar billede olebole Juniormester
19. september 2009 - 00:49 #3
<ole>

Hvad med noget i stil med:


div#subMenu
{
    padding-left:40px;
    border: 1px solid Black;
}
div#subMenu div
{
    color: #a11523;
    font-family: 'century gothic', sans-serif;
    font-weight:500;
    text-align: left;
    font-size: 15px;
    width: 100%;
    border-bottom: 1px solid #D6D6D6;
    padding-bottom: 5px;
    position:relative;
    left: -40px;
}
ul#ulSubMenu
{
    text-align: left;
    border: 1px solid red;
    list-style:inside;
    margin: 0;
    padding: 0;
}
ul#ulSubMenu li
{
    list-style-image: url('../../Images/SubMenuIcon.gif');
    list-style-type: circle; /*If image doesn't exist, then use circle*/
    border-bottom: 1px dotted #D6D6D6; /*border: 1px solid Black;*/
}
ul#ulSubMenu li a
{
    font-family: tahoma, sans-serif;
    text-decoration: none;
    line-height: 2.8em;
    color: #000000;
}

ul#ulSubMenu li:hover
{
    list-style-image: url('../../Images/SubMenuIconSelected.gif');
}

- og HTML'en:

<div style="width:160px;">
  <div id="subMenu">
                <div id="titleParent">En menu</div>
                <ul id="ulSubMenu">
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li><a href="#">Menu2</a></li>
                </ul>
  </div>
</div>



/mvh
</bole>
Avatar billede alex_sleiborg Nybegynder
22. september 2009 - 10:24 #4
Det virker lidt bedre Ole, men stadig med fejl. Hvordan får jeg f.eks. min ul til at rykke lidt mere mod venstre???
Avatar billede alex_sleiborg Nybegynder
22. september 2009 - 10:29 #5
Hov mener det virker i IE8, men kan ikke få listen til at rykke sig mod venstre i IE7? Og der er stadig fejl med de billeder som jeg sætter ind i listen i IE7
Avatar billede alex_sleiborg Nybegynder
22. september 2009 - 10:34 #6
Har fået løst de andre problemer, det eneste problem der er nu er list-style-image: url('../../Images/SubMenuIcon.gif');, den viser ikke ikonet det rigtige sted i IE7? Nogen der ved, hvordan det kan løses
Avatar billede olebole Juniormester
22. september 2009 - 22:29 #7
Jeg kan ikke se, hvordan det ser ud
Avatar billede alex_sleiborg Nybegynder
30. september 2009 - 10:27 #8
Sorry for den sene svar, men har haft meget travlt med alt muligt andet. Her er et screenshot af IE 7 og 8.

http://www.speedyshare.com/542823420.html
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB

Cognizant Technology Solutions Denmark ApS

Test Architect - Projects

Gehl Architects ApS

IT Supporter

Udviklings- og Forenklingsstyrelsen

Business Analysts til samfundsvigtige it-projekter

Netcompany A/S

IT Consultant