login  Naam:   Wachtwoord: 
Registreer je!
 Forum

position absolute verplaatst zich in browsers

Offline GroundZero - 11/10/2011 19:42
Avatar van GroundZeroLid Beste,

ik heb op mijn site gebruik moeten maken van elementen met
position relative en absolute omdat ik ook z-index nodig had.

In Safari alles perfect, in andere browsers staat hij te ver omhoog.
Als ik hem dan omlaag plaatst, staat hij overal goed maar in Safari
weer te laag...

iemand enig idee of hier een oplossing voor is dat het in elke browser goed werkt?

14 antwoorden

Gesponsorde links
Offline vinTage - 11/10/2011 19:45
Avatar van vinTage Nieuw lid Een Google.be: css global reset gebruikt ? Want dan zou alles overal gelijk 'moeten' zijn.
Bedankt door: GroundZero
Offline GroundZero - 11/10/2011 19:54 (laatste wijziging 12/10/2011 10:21)
Avatar van GroundZero Lid Ik heb het volgende gebruikt:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed, 
  11. figure, figcaption, footer, header, hgroup, 
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14. 	margin: 0;
  15. 	padding: 0;
  16. 	border: 0;
  17. 	font-size: 100%;
  18. 	font: inherit;
  19. 	vertical-align: baseline;
  20. }


Maar nog blijft er verschil zitten wanneer ik in verschillende browsers kijk qua hoogte van de absolute positionering van elementen.

Iemand enig idee hoe dit kan?
Offline WouterJ - 12/10/2011 11:20
Avatar van WouterJ HTML gevorderde Heb je een online voorbeeldje?
Offline GroundZero - 12/10/2011 11:52
Avatar van GroundZero Lid Mag geen voorbeeld online plaatsen. Onderstaand wat informatie ;)

Bijgaand een screenshot van wat ik zie als verschil. Daar onderstaand ook een stuk HTML en CSS code bijgaand.

[screenshot]http://img202.imageshack.us/img202/4674/voorbeeldv.png[/screenshot]

HTML
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <h1>hoofd</h1>
  2.  
  3. <p>hier staat wat tekst</p>
  4.  
  5. <ul>
  6.  <li>lijst</li>
  7. </ul>
  8.  
  9. <p>hier volgt nog wat meer tekst</p>
  10.  
  11. <img src="images/free-star.png" alt="gratis" class="free-star" />


CSS
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div#text-area {
  2. 	width:888px;
  3. 	min-height:200px;
  4. 	float:left;
  5. 	position:relative;
  6. 	margin:0px 0px 15px 70px;
  7. 	padding:15px;
  8. }


Het bestand word geinclude in de hoofdpagina. Het vak waar hij in geinclude word heet text-area.

De opmaak van het plaatje:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. div#text-area .free-star {
  2. 	width:1024px;
  3. 	height:165px;
  4. 	float:left;
  5. 	position:absolute;
  6. 	top:270px;
  7. 	left:-70px;	
  8. }


Verder heb ik bovenaan mijn CSS bestand staan:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed, 
  11. figure, figcaption, footer, header, hgroup, 
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14. 	margin: 0;
  15. 	padding: 0;
  16. 	border: 0;
  17. 	font-size: 100%;
  18. 	font: inherit;
  19. 	vertical-align: baseline;
  20. }
Offline vinTage - 12/10/2011 11:57 (laatste wijziging 12/10/2011 12:02)
Avatar van vinTage Nieuw lid Niet dat we veel kunnen met die code, maar de float doet niets als je absolute positioneert.

edit, zet bij die reset ook eens 'img'
Offline GroundZero - 12/10/2011 18:43
Avatar van GroundZero Lid gedaan maar werkt niet. welke andere code zou je nodig hebben? stylesheet beslaat bijna 3200 regels namelijk 
Offline WouterJ - 12/10/2011 20:01 (laatste wijziging 13/10/2011 09:22)
Avatar van WouterJ HTML gevorderde @vinTage, de reset wordt toch al toegepast op img?
del, dfn, em, img, ins, kbd, q, s, samp,

@GroundZero, wat we eigenlijk nodig hebben is een voorbeeld. Kun je niet de testen veranderen in een lorem ipsumpje ( http://nl.lipsum.org )? En dan eventueel op een gratis host zetten ( http://000webhost.com/ )?
Offline Pieter - 12/10/2011 20:28
Avatar van Pieter Gouden medaille

SEO guru		 @GroundZero, als je stylesheet 3200 regels heeft, dan zit er iets niet goed in opbouw lijkt me. Een recent project, een grote communitysite met veel verschillende layoutpagina's heeft ongeveer ±320 regels.
Zo is het natuurlijk niet eenvoudig te vinden wat er fout loopt.

Dan kies ik ook voor Waldio's voorbeeld, dan pas kunnen we echt een kijkje nemen wat er fout kan lopen, want nu zijn er nog zoveel andere regels die ertoe kunnen doen. Eventueel de lineheight bepalen..
Offline vinTage - 12/10/2011 22:33
Avatar van vinTage Nieuw lid fuk, had er 4 keer overgelezen, maar keek er elke keer overheen, geen wonder dat het geen verschil maakt dus 
Offline GroundZero - 15/10/2011 17:06
Avatar van GroundZero Lid Haha ja, maar het is echt een groot iets, we hebben 8 stylesheets in totaal meer dan 14 duizend regels, en het is wel goed geschreven dus niet de zelfde code soms 10x of zo zeg maar, het is gewoon een ontzettend groot project haha.

Ik ga maandag een goed voorbeeld regelen dan zal er ook meer duidelijk worden.
Voor nu hartelijk dank voor jullie reacties, en ik post maandag een voorbeeld!
Offline WouterJ - 15/10/2011 19:08
Avatar van WouterJ HTML gevorderde
GroundZero schreef:
Haha ja, maar het is echt een groot iets, we hebben 8 stylesheets in totaal meer dan 14 duizend regels, en het is wel goed geschreven dus niet de zelfde code soms 10x of zo zeg maar, het is gewoon een ontzettend groot project haha.

Hoe enorm groot je project ook is, 1400 regels CSS is niet normaal. Zelfs bij de grootste CSS projecten heb ik nog nooit zoveel regels gezien, misschien moet je jezelf toch eens afvragen of je het wel helemaal correct aanpakt.
Offline vinTage - 15/10/2011 20:42
Avatar van vinTage Nieuw lid volgens mij haal je niet eens 14000 regels als je voor elk bestaand html element elke bestaande css propertie apart schrijft ... 
Offline Pietje - 16/10/2011 09:59
Avatar van Pietje Lid Maak een divje ofzo met daarin de tekst en dan bij dat divje top: - zoveel pixels
Offline Ontani - 17/10/2011 15:27
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1
vinTage schreef:
volgens mij haal je niet eens 14000 regels als je voor elk bestaand html element elke bestaande css propertie apart schrijft ... 


Wel als je die op elke pagina er anders wilt laten uitzien 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.217s