[css] positie anders in Opera7.

[Verwijderd]

ik ben bezig met een menu,

ik gebruik font-size:75px; voor het eerste teken,
en ik gebruik height:1px;
om de li's op de goede plek te krijgen gebruik ik top: -23px.
en de rest van de text is 15px
75 / 2 = 37.5
75 - 23 - 15 + 1 = 38 en dat is dus ongeveer de goede positie.

dat werkt goed in Firefox
maar niet in opera.
in opera moet ik height:35px; gebruiken om het te laten werken.

firefox gebruikt die -23 om het op de goed positie te krijgen.
maar opera doet niets met de font-size:75px en alles staat al op de goede positie en komt er nog eens -23 bij.

ik gebruik deze hack: head:first-child+body, voor het verbergen van IE en nog een hele lijst.
maar dan gaat het nogsteeds helemaal fout in Opera 7.
is er echt geen manier om de top in Opera op 0 te zetten, en niet in alle andere browsers?

weet dat het een ingewikkelde vraag is, en de code nogal bagger lijkt.
maar ik kon geen andere manier vinden om het te doen.
hoop dat iemand me kan helpen.

[crisp]

Stukje code zou toch wel handig zijn....

[Verwijderd]

code:

<style type="text/css">
#menu {
  background-color:#F7F7F7;
  padding:20px 0 20px 10px !important;
  padding:20px 0;
  border-right:8px solid #8ac;
  width:190px;
  float:right;
}
#menu ul {
  margin:9px 0 0 0 !important;
  margin:0;
  padding:0;
  text-align:left;
  list-style-position:inside !important;
  list-style-position:outside;
}
#menu ul li {
  margin-top: 0;
  margin-bottom:0;
}
#menu ul li a {
  font-size:15px;
  width:100%;
  color:#000;
  height:27px;
  display:block;
  background-color:#ccc;
  padding:5px 0 0 15px;
  margin:7px 0;
  position:relative;
  right:-8px;
  border-right:8px solid #8ac;
}
#menu ul li a:hover {
  border-right:8px solid #ccc;
  background-color:#8ac;
}
head:first-child+body #menu ul li {
  float:right;
  padding:0;
  margin-top: 0;
  margin-bottom:0;
  color:#ccc;
  font-size:75px;
  line-height:.1px;
}
head:first-child+body #menu ul li:hover {
  color:#8ac;
}
head:first-child+body #menu ul li a {
  border-right:0px solid;
  background-color:transparent;
  height:15px;
  color:#000;
  display:block;
  position:relative;
  top:-23px;
  margin:0 0 0 7px;
  padding:0 0 0 25px;
}
head:first-child+body #menu ul li a:hover {
  border-right:0px solid;
  background-color:transparent;
}
head:first-child+body #menu ul li a:after {
  content: "";
  padding:12px 0 0 25px;
  margin:-12px 0 0 -25px;
  width:150px;
  height:1em;
  display:block;
  background-color:#ccc;
}
head:first-child+body #menu ul li:hover a:after {
  border-right:8px solid #ccc;
  background-color:#8ac;
}
</style>

en de html

code:

<div id="menu">
  <ul>
    <li><a href="#">text again</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
  </ul>
</div>

wel een doctype gebruiken, anders werkt het niet...dacht ik

[ Voor 9% gewijzigd door Verwijderd op 03-11-2004 22:32 ]

[crisp]

Dit hangt echt van verschillende hacks aan elkaar...
Van die grote eerste letter zie ik niets in Opera 7.6 of FF 0.9.3

[Verwijderd]

k geen eerste letter, eerste teken, de "disk" aan het begin van de li,
die moet 75 px worden en dan krijg je een mooie afgeronde hoek.

[crisp]

Kan je dat niet beter met een background-image doen; kan je het ook nog eens IE-compliant maken

[Verwijderd]

tja dat kan natuurlijk ook,
maar het werkt allemaal zo buggy,
in IE kan je nog niet eens die disk vergrootten,
en in opera zien je die alleen als je :before gebruikt.
en in mozilla klopt de positie niet meer.

het leek me wel leuk als uitdaging om het eens zo te proberen.
maar aangezien geen een browser dit hetzelfde doet, kan het bijna niet.

ik was dus eigenlijk van plan om geen plaatjes te gebruiken en toch een ronde vorm te krijgen.

en of het nou in IE werkt of niet maakt me eigenlijk niets uit.
Bij dit soort ideeën krijg je trouwens altijd problemen met IE.

edit:

als iemand toevallig een oplossing heeft zou ik het graag willen horen

[ Voor 8% gewijzigd door Verwijderd op 03-11-2004 23:40 . Reden: stukkie erbij zette natuurlijk :P ]