Héél klein CSS probleemje..maar waar zit het:)

Door Sonny van de Berg op 18-07-2011 15:20

2.296 views

Beste CSS deskundigen:)

Een tijdje geleden heb ik deze template gedownload:
http://www.templatemo.com/preview/templatemo_311_pink_business

Zoals je in IE, CHROME en FIREFOX ziet..toont hij alles prima..

Maar toch zit er in de winrar package een fout.. Als je de bestanden upload naar de server zie je dat in IE het menu onder elkaar getoond..

Het zit hem hier:

#templatemo_menu {
clear: both;
width: 880px;
height: 45px;
padding: 0 60px;
background: url(images/H-menu.png) no-repeat;
list-style: none;
}

#templatemo_menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#templatemo_menu ul li {
padding: 0;
margin: 0;
display: inline-block;

Ik heb alles al verwijderd uit de stylesheet en in de html code om (behalve het menu) om te kijken of het ergens anders doorkomt..Maar het menu bleef onder elkaar..dus het ligt echt aan dit gedeelte.

Hopelijk weet iemand het!

Alvast bedankt!!

Sonny van de Berg

Onbekende gebruiker

18-07-2011 15:38

Display:inline? Al geprobeert... anders zou ik het zo niet weten. Heb je voor mij de url? Dan kan ik er naar kijken voor je :)

Cheers

John Acid

18-07-2011 18:59 gewijzigd op 18-07-2011 19:02

Heb je je css al gevalideerd?

Volgens mij zitten er wat foutjes in, zoals display: inline-block, het is of inline of block, niet allebei tegelijk.

Verder heb je 2 keer list-style:none vermeld, 1 keer bij je ul is voldoende.

- Ariën -

18-07-2011 19:02

John Acid op 18/07/2011 18:59:12

Heb je je css al gevalideerd?

Volgens mij zitten er wat foutjes in, zoals display: inline-block, het is of inline of block, niet allebei tegelijk.

Werk je nog met IE 6 of 7?
http://www.quirksmode.org/css/display.html

John Acid

18-07-2011 19:18 gewijzigd op 18-07-2011 19:21

Even gegoogled, display:inline-block kan toch wel, weer wat geleerd.

Sonny van de Berg

18-07-2011 19:29

Heb alles zo'n beetje geprobeerd. Ook jullie tips maar werkt nog steeds niet:

Heb nu dit:

#templatemo_menu {
clear: both;
width: 880px;
height: 45px;
padding: 0 60px;
background: url(images/templatemo_menu.png) no-repeat;
display:inline-block;
}

#templatemo_menu ul {
margin: 0;
padding: 0;
display:inline-block;
}

#templatemo_menu ul li {
padding: 0;
margin: 0;
display: inline-block;
}

#templatemo_menu ul li a {
float: left;
display: block;
font-size: 14px;
width: 110px;
height: 35px;
padding: 10px 0 0 0;
color: #666;
text-decoration: none;
font-weight: bold;
text-align: center;
outline: none;
display:inline-block;
}

[size=xsmall]Toevoeging op 18/07/2011 19:32:28:[/size]

Ik ben weer te voorbarig:)

Heb bij elke gedeelte: Display:inline; neergezet. En dit was het gewoon:)

Wat betekend het nu precies dan?

Groeten!

John Acid

18-07-2011 19:47 gewijzigd op 18-07-2011 19:47

Heb je je site soms met ie6/7 bekeken?
Die schijnen nml display:inline-block te negeren.

[size=xsmall]Toevoeging op 18/07/2011 19:50:22:[/size]

Ik kom alleen een beetje tegenstrijdige informatie tegen als het om ie7 gaat.
Sommige zeggen dat alleen ie6 dit heeft, anderen zeggen dat ook ie7 dit heeft.

Wouter J

18-07-2011 20:20

Display: inline; Bah wat een viese truck. Ik zou het meteen weghalen.
Haal overal de display: inline-block; weg. En zet bij #templatemo_menu ul li float: left; neer. Zelfde effect alleen dan op een veel betere en goede manier.

Sonny van de Berg

18-07-2011 21:29

Nee gekeken in IE 8. Waarom is inline:block niet goed dan? (vieze truc..:P)

Maar hij is nu prima. Foutje van Flashmo dus:)

Wouter J

18-07-2011 22:32

Met display: inline; geef je aan dat die menu buttons in 1 regel staan. Maar dat staan ze niet, wat het is een list. Elke letter in een zin heeft bijv. display: inline; en elke alinea heeft een display: block; (het is immers geen zin).

Als je inline aan die menu buttons geeft geef je er eigenlijk mee aan dat het in 1 regel staat en de ul die eromheen staat is dan je alinea. Dit klopt natuurlijk voor geen meter, aangezien je menu bestaat uit losse items.

Reageren

Inloggen om te reageren