je DIV met id '#menuelement2' heeft een absolute positie van 'left: 779px;' en de breedte is 'width:100%'quote:Op donderdag 13 april 2006 14:03 schreef MadGuy het volgende:
Waarom lopen de divjes bovenaan naar rechts zo afwisselend door? Ik wil juist dat deze vergroten en verkleinen naarmate de resolutie die gebruikt wordt door de gebruiker groter of kleiner is. Is hier een oplossing voor?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <head> <title>Welkom op mijn website!</title> <style type="text/css"> <!-- #Layer2 { position:relative; width:72%; height:40px; background-color: #00337F; border-bottom: 2px solid #FF993F; border-right: 2px solid #FF993F; margin: 0px; padding: 0px; } #Layer3 { position:relative; width:100%; height:50px; background-color:#FFFFFF; text-align:left; padding:0px; margin:0px; } #banner { margin-bottom: 20px; border: 1px solid #00337F; text-align: left; background-color:#FFFFFF; height:110px; padding: 0px; } h1.title { font-family:bitsream vera serif; font-size:2.3em; margin:0px; padding:0px; font-weight: bolder; color:#00337F; position:relative; top:8px; left:60px; } img.logo { position:relative; top:-70px; left:75%; width:110px; } #menu_container { position:relative; width:100%; height:20px; background-color:#FF993F; } --> </style> </head> <body> <div id="banner"><div id="Layer2"></div> <div id="Layer3"><h1 class="title">Mijn Domein</h1> <img class="logo" src="images/logo.jpg" alt="logo"/></div> <div id="menu_container"></div></div> </body> </html> |
Er is een verschil in de grote van `layout 2` onder IE en FF. In FF is hij de de 50px hoog die hij moet zijn in IE is hij echter 2 keer zo groot.quote:Op woensdag 19 april 2006 12:40 schreef RM-rf het volgende:
Wat is er verschillend? moeten we dat raden?
als het een probleem met het boxmodel is, mozilla/Opera en IE6 bij valide pagina's met correct DOCTYPE een ander boxmodel inpassen als msie5 en 5.5, en msie6 in quirky mode...
het kan soms helpen om voor mozilla de CSS box-sizing:border-box tioe te passen, mozilla volgt dan eigenlijk de foute rendering van explorer....
een andere optie zijn de ettelijke box-model hacks of workarounds...
Dank je wel voor je reactie.quote:Op woensdag 19 april 2006 17:11 schreef RM-rf het volgende:
die DIV#banner heeft een height van 110 px en een bottom-margin van 20px....
in explorer blijft de hoogte 110px en wordt de margin aan de onderkant daar gewoon weer bij opgeteld (border-box-model)...
terwijl volgens het officiele model de opgegeven hoogte altijd inclusief margins-paddings en border moet zijn.... oftewel de binnenruimte van de box is in mozilla/firefox/opera en msie6 in valid mode 90px (110px - 20px margin: het box-sizing-model)
Dat is idd een box-model probleem.
Ik kan uit de CSS specificatie niet halen dat de box mee zou moeten groeien.quote:Op donderdag 20 april 2006 21:01 schreef Swetsenegger het volgende:
Waarom werkt dit niet in FF
.naam {
position:relative;
height:100px;
overflow:visible;
}
Firefox toont de overflow wel, maar volgens mij zou de box met de overflow mee moeten groeien toch?
Als ik height door min-height vervang werkt het wel in firefox, maar niet in IE
1 2 3 4 5 | position:relative; height:100px; min-height:100px; } |
Volgens handleiding html zou de box mee moeten groeien, maar dat is dus niet het geval ben ik nu ook achter.quote:Op donderdag 20 april 2006 21:54 schreef Light het volgende:
[..]
Ik kan uit de CSS specificatie niet halen dat de box mee zou moeten groeien.
En IE behandelt height als min-height, da's niet helemaal volgens de specs.
Hoe lijkt:
[ code verwijderd ]
1 2 | min-height: 100px; /* other */ |
1 2 | left:0px; |
1 2 3 | _left:expression(document.body.scrollTop+document.body.clientHeight- this.clientHeight); |
Negeert firefox de underscore?quote:Op donderdag 20 april 2006 22:31 schreef SuperRembo het volgende:
Met de underscore hack:
[ code verwijderd ]
Ondersteunt IE7beta nou inmiddels min-height of niet?
http://62.212.92.93/~danielpunt/blah/quote:Op donderdag 20 april 2006 22:55 schreef SuperRembo het volgende:
Een voorbeeldje zou handig zijn
IE5/6 negeert alleen de underscore en ziet "height", en die property bestaat wel.quote:Op donderdag 20 april 2006 23:07 schreef Swetsenegger het volgende:
[..]
Negeert firefox de underscore?
What about:quote:Op donderdag 20 april 2006 22:24 schreef Swetsenegger het volgende:
Opgelost. Ik heb de meest smerige hack ooit toegepast denk ik.
min-height van 100px voor firefox.
en in de box float ik nu een divje van 100px height en 1 px width voor IE.
1 2 3 | min-height:100px; height:100px; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <HEAD> <TITLE>CSS</TITLE> <STYLE type=text/css> ul { list-style: none; margin: 0; } ul li { width: 100px; line-height: 40px; background: red; text-align: middle; vertical-align: text-bottom; border:5px solid black; } </STYLE> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </BODY></HTML> |
1 2 3 4 5 | color: #FFFFFF; background-color: #000000; border-right: 1px solid #660000; } |
1 2 3 | test </div> |
Dat was idd niet duidelijk.quote:Op zaterdag 22 april 2006 20:20 schreef mrbombastic het volgende:
Hmm dat bedoelde ik niet. Ik zie net dat mn post ook niet echt duidelijk was.
Het probleem is dat de border overal 5px is, maar tussen de rechthoeken is de border 10px.
Dit komt omdat de li's aan alle kanten een border hebben van 5px. Als je er dus twee tegen elkaar zet, krijg je er een border van 5px + 5px tussen. Je kunt eventueel het volgende toevoegen:quote:Op zaterdag 22 april 2006 20:20 schreef mrbombastic het volgende:
Hmm dat bedoelde ik niet. Ik zie net dat mn post ook niet echt duidelijk was.
Het probleem is dat de border overal 5px is, maar tussen de rechthoeken is de border 10px.
1 2 3 4 | [...] margin-bottom: -5px; } |
Persoonlijk vind ik de "[...] voor dummies" serie vaak erg goed, ongetwijfeld is er ook eentje voor CSS.quote:Op zondag 23 april 2006 03:09 schreef Misanthropist het volgende:
iemand enig idee voor een mooi beginnersboek css?
Kijk eens naar Jeffrey Zeldman...goed boek...ook als e-book te bestellen bij de lokale internet verdeler.quote:Op zondag 23 april 2006 03:09 schreef Misanthropist het volgende:
iemand enig idee voor een mooi beginnersboek css?
Dat is wel een heel lelijke oplossing.quote:Op zondag 23 april 2006 03:22 schreef Leshy het volgende:
[..]
Dit komt omdat de li's aan alle kanten een border hebben van 5px. Als je er dus twee tegen elkaar zet, krijg je er een border van 5px + 5px tussen. Je kunt eventueel het volgende toevoegen:
[ code verwijderd ]
Dit zorgt ervoor dat de li's steeds 5 pixels over de bovenstaande heen worden gerenderd, wat het probleem met de dubbele borders oplost. Enigszins cru, maar effectief.
[..]
1 2 3 4 5 6 7 8 9 | border-bottom: 1px solid #000; } UL LI { border-style: solid; border-color: #000; border-width: 1px 1px 0px 1px; } |
Heb het aangepastquote:Op zondag 23 april 2006 12:50 schreef SuperRembo het volgende:
Dan moet je er wel voor zorgen dat de ul en li even breed zijn.
Jammer dat IE geen :first-child ondersteunt, dat zou de mooiste oplossing zijn.
bottom-border moet border-bottom zijn, en er ontbreekt een ;
Je hebt groot gelijkquote:Op zondag 23 april 2006 12:21 schreef CrazyByte het volgende:
Dat is wel een heel lelijke oplossing.
Makkelijkste is om de UL zelf een bottom-border te geven en de LI-elementen allemaal niet.
IE6 heeft problemen met het correct renderen van transparante png's. Lees bijvoorbeeld dit artikel of zoek naar andere artikelen .quote:Op zondag 23 april 2006 23:36 schreef Nevermind het volgende:
Wat doe ik hier fout waardoor het er niet uit ziet in IE? Gebruik opera of firefox om te zien hoe het er uit behoort te zien.
Dat heeft met alpha transparancy te maken. Met gifs zie ik geen verschil. Maar dat SR het niet ziet snap ik niet. Zie jij wel hetzelfde als ik in IE6?quote:Op maandag 24 april 2006 02:42 schreef Castor het volgende:
[..]
IE6 heeft problemen met het correct renderen van transparante png's. Lees bijvoorbeeld dit artikel of zoek naar andere artikelen .
Verdomd, je hebt gelijkquote:Op maandag 24 april 2006 02:47 schreef Nevermind het volgende:
[..]
Dat heeft met alpha transparancy te maken. Met gifs zie ik geen verschil. Maar dat SR het niet ziet snap ik niet. Zie jij wel hetzelfde als ik in IE6?
Ik gebruik ook XP. Hebben we in ieder geval een verschil met SR. Het zal wel iets met marges te maken hebben, maar die staan allemaal op 0. Als ik dat ga veranderen werkt het uiteraard niet meer in andere browsers Vaag probleem.quote:Op maandag 24 april 2006 02:50 schreef Castor het volgende:
[..]
Verdomd, je hebt gelijk
Ik zie idd hetzelfde als jij in IE6. Ik gebruik WinXP Home Edition (SP2). Ik ga nog eens verder kijken wat er aan de hand kan zijn.
De volgende CSS op .star-rating helpt al een beetje:quote:Op maandag 24 april 2006 02:52 schreef Nevermind het volgende:
[..]
Ik gebruik ook XP. Hebben we in ieder geval een verschil met SR. Het zal wel iets met marges te maken hebben, maar die staan allemaal op 0. Als ik dat ga veranderen werkt het uiteraard niet meer in andere browsers Vaag probleem.
-edit- Met Win2k-IE6 heb ik exact dezelfde fout
1 |
Gaaf dat je mee-nachtbraakt Ik teste je oplossing even, en het zag er inderdaad anders uit, maar nog niet plausibel. Ik kom net een minuut geleden achter de oplossing! Ik heb de 'top-center-bottom'-waarden vervangen door de waarden in pixels, en nu werkt het welquote:Op maandag 24 april 2006 03:40 schreef Castor het volgende:
[..]
De volgende CSS op .star-rating helpt al een beetje:
[ code verwijderd ]
Ik ben nu verder aan het kijken naar de background-position van .star-rating li.current-rating.
Och, voor mij is nog niet zo laat (zit op Aruba, 6 uur eerder hier). Goed dat je de oplossing hebt gevonden! Had idd zo'n vermoeden dat het daaraan lagquote:Op maandag 24 april 2006 03:46 schreef Nevermind het volgende:
[..]
Gaaf dat je mee-nachtbraakt Ik teste je oplossing even, en het zag er inderdaad anders uit, maar nog niet plausibel. Ik kom net een minuut geleden achter de oplossing! Ik heb de 'top-center-bottom'-waarden vervangen door de waarden in pixels, en nu werkt het wel
1 2 3 4 5 | background: url(images/stars.gif) repeat-x 0% 114%;} * html .star-rating li.current-rating { background: url(images/stars.gif) repeat-x 0% 56%;} |
Ik krijg daarbij weer een stukje van de gele sterren onderaan het plaatjequote:Op maandag 24 april 2006 04:02 schreef Castor het volgende:
Vraag me niet waarom, maar als je de orginele code pakt en daar de volgende regels aan toe voegt, dan zou hij het moeten doen in IE en FF:
[ code verwijderd ]
Oeps, vergat te zeggen "orginele code" + "mijn *html oplossing" + "overflow:hidden op .star-rating".quote:Op maandag 24 april 2006 04:09 schreef Nevermind het volgende:
[..]
Ik krijg daarbij weer een stukje van de gele sterren onderaan het plaatje
Ik ga toch maar even slapen, kan ik morgen wat helderder denken. Bedankt voor al je hulp!
-edit- Hoe werkt deze bij je?
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |