Vinnaren i pepparkakshustävlingen!
2009-06-25, 12:08
  #1
Medlem
Bierhofs avatar
Hej!

Jo jag sitter och tänkte testa på mig en menyrad med hjälp av div-taggar.
Problemet är att i firefox ser menyn ut såhär:
http://i39.tinypic.com/oqarrk.png

och i explorer ser den ut såhär:
http://i39.tinypic.com/2v9d8oj.png

Jag vet att explorer läser styles osv rättså skumt (dåligt ). Men jag blir helt tokig! Suttit ett ganska bra tag och försökt på olika sätt att skriva min kod för att explorer ska göra rätt.

Just nu ser koden ut såhär
HTML-kod:
<div style="position:relative; left:125px;top:80px;width:148px; height:58px; border:hidden; background-image:url(images/menuborder.png); float: left">
</div>
<div style="position:relative; left:273px;top:80px;width:100%; height:58px; border:hidden; background-image:url(images/menubg.png); background-repeat:repeat-x;">
</div>

Undrar om någon vet hur jag löser problemet?

Tacksam för alla svar!

ps. det ska se ut som i firefox, om det inte sa sig självt
Citera
2009-06-25, 13:45
  #2
Medlem
snabbaste lösningen är väl att lägga de där 2 divarna i en omslutande div
och sen städa bort en massa onödig kod.
HTML-kod:
<div style="margin-left:125px;">
 <div style="width:148px; height:58px;background-image:url(images/menuborder.png); float: left"> </div>
 <div style="margin-left:148px;width:100%; height:58px; background-image:url(images/menubg.png); background-repeat:repeat-x;"> </div>
</div>
alternativet är att du tänker "bakvänt" så att den vänstra diven innehåller en vit trekant som täcker över menybakgrunden. Samma effekt men troligen enklare att få att passa på pixeln
Citera
2009-06-25, 13:56
  #3
Medlem
phunques avatar
IE är som sagt notoriskt för sitt urusla css-stöd. En bugg vad gäller element med egenskapen float är "3 px jog"-buggen. Inte säkert att det är just detta som ställer till det för dej här och eftersom du skriver inline styles blir det knepigt att fixa, men prova att i koden lägga id="namn" och i huvudet sätta * html #namn {margin-left: -3px;}, och så får specificity ta hand om inline-selektorn.
Citera
2009-06-29, 10:51
  #4
Medlem
Bierhofs avatar
rhdf: tyvärr går inte den lösningen då dessa är bilder med ramar osv (kanske inte ser så ut om man inte tittar noga). Försökte med din omslutande div-lösning. Tyvärr funkade den inte!

phunque: Jag tror inte riktigt jag förstår?

Jag testade slänga in "* html #namn {margin-left: -3px;}" (utan citation) i head:en. IE verkade läsa in det, men firefox gav blanka fan i det och skrev ut det som text högst upp på sidan. Grejjen med IE var att den bara försköt dom träffade delarna neråt. Tyvärr verkade det inte gå och lösa det på det sättet heller. Men jag vet inte om jag har gjort det korrekt så du får gärna skriva lite utförligare om du orkar

Tackar så hemskt mycket för era svar!

*edit*

en sak jag la märke till nu efter ytterligare försök, är att Firefox har lagt <divarna> på/i varandra (om nu inte "left"-justeringen fanns), medan explorer har lagt dom bredvid varandra utan left-justeringen. Dvs där blir det ett dubbelt gap. Detta såg jag när jag ändrade den högra boxen till 250px bredd.
Detta kanske lyser upp något?
__________________
Senast redigerad av Bierhof 2009-06-29 kl. 10:58.
Citera
2009-06-29, 18:02
  #5
Medlem
phunques avatar
Saken är den att det sätt du skjuter in css på är direkt dålig. Du vinner ingen bandbredd över tabelldesign mm. Om du envisas med att skriva inline-styles, kommer du få problem, som nu. Läs på om css på w3 schools hemsida så kommer livet bli mycket enklare...
Citera
2009-06-30, 10:15
  #6
Medlem
Bierhofs avatar
alltså grejjen är att jag gillar att skriva css rakt i html-dokumentet när jag skapar sidan. Sedan när allt är klart, eller nästan klart. DÅ lägger jag över all min css-kod till mitt css-dokument och rensar upp koden.

Och jag testade förövrigt att lägga in din css-remsa både direkt i divarnas style och i css-dokumentet, tror det kan missförstås när jag "bara la in den i head:en".
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback