Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS/HTML] 2 Problemen met site in IE...

7 antwoorden
  • Hallo ! Ik ben bezig met een site voor mn tante en oom waarbij ik tegen 2 problemen op loop in IE. In FireFox werkt het gewoon perfect... Ik heb geen idee hoe ik ze moet verhelpen, ik had eerst meer van dit soort probleempjes, die heb ik wel kunnen verhelpen, maar deze lukken me niet... Dit zijn de problemen: 1. De witte streep/balk aan de rechterkant bij de achtergrond, hoe krijg ik deze weg ? 2. Linksboven in de hoek het "logo" / tekst HENN art staat in FF zoals ik het graag wil hebben maar in IE is een stukje van de tekst "afgeknipt" van bovenaf. Hoe krijg ik dit goed in IE ? URL: http://www.fsws.nl/henn/ CSS: [code:1:2b1aa0414f] * { padding: 0px; margin: 0px; } body { background: #F9F9F7 url('images/a1.gif') repeat-x; font-size: 10px; font-family: "trebuchet ms", helvetica, sans-serif; color: #8C8C73; line-height: 18px; } a { color: #FF7800; text-decoration: underline; } a:hover { text-decoration: none; } sup { font-size: 0.5em; } p { margin-bottom: 14px; text-align: justify; } img.picA { position: relative; top: -2px; background: url('images/a47.gif') no-repeat; width: 76px; height: 74px; padding: 8px; } img.picB { position: relative; top: -2px; background: url('images/a26.gif') no-repeat; width: 146px; height: 75px; padding: 7px; } img.floatleft { float: left; margin: 0px 14px 3px 0px; } ul.linklist { list-style: none; } ul.linklist li { border-top: solid 1px #EEEEEE; padding-top: 5px; margin: 5px 0px 0px 0px; } ul.linklist li.first { border-top: 0px; margin-top: 0px; padding-top: 0px; } #upbg { position: absolute; top: 0px; left: 0px; background: #fff url('images/upbg.gif') no-repeat; width: 747px; height: 264px; z-index: 1; } #outer { position: relative; width: 747px; margin: 0 auto; background: #fff url('images/abg.gif') repeat-y; } #inner { position: relative; padding: 13px 30px 13px 30px; z-index: 2; } #header { position: absolute; background: #FF7800 url('images/a88.png') repeat-x; width: 202px; height: 92px; color: #fff; padding-left: 20px; } #header span { font-weight: normal; } #header h1 { position: absolute; font-size: 23px; letter-spacing: -1px; top: 30px; height: 92px; } #header h2 { position: absolute; font-size: 10px; font-weight: normal; color: #FCE2CA; top: 51px; } #header sup { color: #FCE2CA; } #splash { position: absolute; right: 33px; background: #EAEAE2 url('images/gallery.jpg') no-repeat; width: 458px; height: 92px; } #menu { position: relative; background: #46461F url('images/a16.gif') repeat-x; height: 67px; padding: 0px 20px 0px 5px; margin: 98px 0px 20px 0px; } #menu ul { } #menu ul li { display: inline; line-height: 52px; padding-left: 3px; } #menu ul li.first { border-left: 0px; } #menu ul li a { background-color: transparent; background-repeat: repeat-x; padding: 8px 12px 8px 12px; font-size: 12px; color: #fff; font-weight: bold; } #menu ul li a:hover { background: #fff url('images/a18.gif') repeat-x top; color: #4A4A24; text-decoration: none; } #date { position: absolute; top: 0px; line-height: 52px; color: #BDBDA2; right: 30px; font-weight: bold; font-size: 12px; letter-spacing: -1px; } #secondarycontent { position: relative; width: 180px; float: right; } #secondarycontent h3 { position: relative; top: 4px; font-size: 16px; line-height: 25px; color: #656551; letter-spacing: -1px; background: url('images/a22.gif') bottom repeat-x; padding: 0px 0px 10px 10px; margin-bottom: 20px; } #secondarycontent .content { padding: 0px 10px 0px 10px; margin-bottom: 20px; } #primarycontent { position: relative; width: 690px; float: left; } #primarycontent h3 { position: relative; top: 4px; font-size: 18px; line-height: 25px; color: #656551; letter-spacing: -1px; background: url('images/a22.gif') bottom repeat-x; padding: 0px 0px 10px 15px; margin-bottom: 20px; } #primarycontent .content { padding: 0px 15px 0px 15px; margin-bottom: 20px; } #primarycontent .post { margin-bottom: 30px; } #primarycontent .post .header { position: relative; } #primarycontent .post .date { position: absolute; right: 15px; top: 0px; line-height: 35px; color: #AFAFA4; font-weight: bold; } #primarycontent .post .content { margin-bottom: 0px; } #primarycontent .post .footer { position: relative; top: -10px; background: url('images/a33.gif') repeat-x; height: 64px; } #primarycontent .post .footer ul { list-style: none; position: absolute; right: 15px; bottom: 15px; } #primarycontent .post .footer ul li { display: inline; line-height: 14px; padding-left: 17px; margin-left: 25px; background-repeat: no-repeat; background-position: 0px 2px; } #primarycontent .post .footer ul li.printerfriendly { background-image: url('images/a41.gif'); } #primarycontent .post .footer ul li.comments { background-image: url('images/a36.gif'); } #primarycontent .post .footer ul li.readmore { background-image: url('images/a38.gif'); } #footer { position: relative; clear: both; height: 66px; text-align: center; line-height: 66px; background-image: url('images/a50.gif'); color: #A8A88D; } #footer a { color: #8C8C73; } [/code:1:2b1aa0414f] Alvast bedankt !!
  • Ik heb het uiteindelijk maar een png'tje gemaakt, want ik kreeg er grijze haren van Echter, de achtergrond zie er in IE6 toch nog steeds fout uit, een lange verticale balk rechts in de achtergrond In IE7 is dit idd opgelost... Zucht.... Freek.
  • als die link nou zou werken ........ :-?
  • Aangezien de link niet werkt kan ik niet echt goed zien wat het probleem is maar voor het geval dat je dit nog niet kende; je kan met behulp van [url=http://msdn2.microsoft.com/en-us/library/ms537512.aspx]Conditional Comments[/url] alleen aan bv. IE6, CSS voorschotelen; [code:1:1f9446d82c]<!--[if IE 6]> <style type="text/css"> bla bla bla bla </style> <![endif]-->[/code:1:1f9446d82c]Desnoods kan je IE6 een eigen stylesheet geven door een link naar een stylesheet tussen de conditional comments te zetten... Het is niet een al te elegante oplossing maar soms werkt het als niets anders will. Een nog iets minder mooie oplossingen is een CSS hack, door [url=http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html]"* html"[/url] te gebruiken;[code:1:1f9446d82c]* html #iets { bla: bla;}[/code:1:1f9446d82c]Dit zal alleen door IE6 en ouder worden uitgevoerd omdat * alle elementen aanduidt en het voor html staat verwijst het dus naar een element dat een kind is van html (alles) wat weer een kind is van "iets" (*) anders...niets dus want html is het hoogste element en kan nergens een kind van zijn...IE6 en ouder weet dat blijkbaar(/gelukig) niet... [url=http://www.positioniseverything.net/articles/poll/star-html.php]More...[/url]
  • Whoeps, dit is de juiste link ! http://fsws.nl/henn-art/ Je ziet dan in IE6 die witte verticale streep aan de rechter kant als het goed is Gr, Freek
  • Je hebt best veel inline style dat maakt het lezen er niet makkelijker op... :( Waarom gebruik je dat eigenlijk? er is eigenlijk niet een echt goede reden voor aangezien je wel gewoon een losse style sheet gebruikt... Nu ik wat verder kijk staat er zowiezo best veel onnodige rommel en [url=http://www.html-reference.com/depreciated.htm]deprecated elementen[/url] in de html(terwijl je wel een xhtml strict DOCTYPE gebruikt), heb je dit met een WYSIWYG editor gemaakt ofzo? Maar anyway, het ligt aan de linker padding van je #inner div als je die in IE terug brengt naar 27px dan is de witte streep verdwenen alleen lijnen de elementen van de header en het menu dan niet goed meer uit, daar mag je zelf dan maar mee gaan klooien :P
  • Door de backup is mijn post kwijtgeraakt, hier nogmaals mij antwoord; Thanks ! Is gelukt ! Kan nu eindelijk verder werken :) Overigens, ik heb idd wat in NVU liggen proberen, waardoor de code een beetje messed up is..

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.