Ie7 text/scroll probleem , firefox werkt wel

[Verwijderd]

hallo

ik ben beginnend webdesigner en ben op een probleem gestuit met ie7 .
ik hoop dat ik het allemaal duidelijk genoeg uitkan leggen .

het is alsvolgd , ik heb de site in dreamweaver opgebouwd aan de hand van mijn photoshop ontwerp .
nu heb ik op de main van de site een grote lap text wat niet in 1 keer in de box past.
dus ik hen de overflow in de css op overflow gezet , nu scrolled de text in firefox heel netjes over de achtergrond zef heen waarbij de achtergrond op zijn plek blijft en je niet buiten de box kunt kijken .

maar in IE7 laat die de text vast staan en gaat die gewoon over de borders heen waardoor de text onder
de achtergrond valt en dus buiten de eigenlijke box . ( zie screen )

nu heb ik geprobeerd de achtergrond op een fixed positie te zetten , maar dan valt mijn achtergrond onder mijn banner .
ook wordt javascript niet op prijs gesteld op mijn opleiding om zoiets op te lossen .
het is ook de bedoeling dat de banner, en de nav altijd in zicht zijn dus het is puur die box die moet scrollen .

is het mogelijk om het gewoon in je css op te lossen , zoja waar ?
hier nog even een screen van het probleem gevold door het stukje CSS voor dat deel van de pagina .


#main {
float: left;
height: 405px;
width: 470px;
font-size: 12px;
color: #de2184;
font-family: "Century Gothic", Verdana, sans-serif;
font-style: normal;
background-image: url(../images/main-.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 290px;
padding-left: 195px;
overflow: scroll;
}


alvast bedankt voor jullie hulp .

PS: is het mogelijk om van die afschuwelijke horizontale scroll bar af te komen die is totaal niet nodig want er valt niks te scrollen .

[rhodium]

Je hebt nog overflow-x en overflow-y. Daarmee zou je het juiste resultaat wel moeten krijgen.

[Da Weef]

rhodium schreef op woensdag 07 januari 2009 @ 15:09:
Je hebt nog overflow-x en overflow-y. Daarmee zou je het juiste resultaat wel moeten krijgen.

Ik denk dat hij overflow:auto als functionaliteit wil hebben... Verder denk ik dat waar je nu paddings gebruikt, je eigenlijk margins wilt gebruiken.


-slap gelul verwijderd-

[ Voor 12% gewijzigd door Da Weef op 08-01-2009 10:45 ]

[Verwijderd]

Da Weef schreef op woensdag 07 januari 2009 @ 15:15:
[...]


Ik denk dat hij overflow:auto als functionaliteit wil hebben... Verder denk ik dat waar je nu paddings gebruikt, je eigenlijk margins wilt gebruiken.

I LOLLED:

Cascading Stylesheet:

width:470 px;
padding-right: 290px;
padding-left: 195px:

de paddings gebruik ik puur voor de text , ik had er wel eerst margins van gemaakt maar dat liep niet helemaal lekker met mijn achtergrond .

en ja inderdaad overflow auto , ( krijg met auto het zelfde resultaat als overflow scroll dus )
maar er staat geen overflow X of Y tussen bij de opties , alleen visible en hidden maar daar heb ik niks aan

gebruik trouwens CS4 mocht dat wat helpen

[Verwijderd]

Verwijderd schreef op woensdag 07 januari 2009 @ 15:19:
[...]
en ja inderdaad overflow auto , ( krijg met auto het zelfde resultaat als overflow scroll dus )
maar er staat geen overflow X of Y tussen bij de opties , alleen visible en hidden maar daar heb ik niks aan

De juiste syntax is:

Cascading Stylesheet:

overflow-y: scroll;

Grote kans dat dit echter maar in één van de twee browsers werkt. Ik ben bang dat je in IE7 alsnog een horizontale scrollbalk krijgt. Als je Googlet zul je hier een workaround voor moeten kunnen vinden.

Edit: Of was het nou Firefox die overflow-x en overflow-y niet ondersteunt? In ieder geval, check of het in alle browsers werkt als je deze properties gaat gebruiken!

[ Voor 12% gewijzigd door Verwijderd op 07-01-2009 15:35 ]

[Verwijderd]

Verwijderd schreef op woensdag 07 januari 2009 @ 15:31:
[...]


De juiste syntax is:

Cascading Stylesheet:

overflow-y: scroll;

Grote kans dat dit echter maar in één van de twee browsers werkt. Ik ben bang dat je in IE7 alsnog een horizontale scrollbalk krijgt. Als je Googlet zul je hier een workaround voor moeten kunnen vinden.

Edit: Of was het nou Firefox die overflow-x en overflow-y niet ondersteunt? In ieder geval, check of het in alle browsers werkt als je deze properties gaat gebruiken!

bedankt ik zal eens kijken of het lukt .
en het moet sowieso in ie7 en firefox werken anders wordt het niet goedgekeurd door de docent


edit :

ben nu wel van die lelijke horizontale balk af
maar ie7 scrolled dus nog steeds door tot onder de BG image .

[ Voor 8% gewijzigd door Verwijderd op 07-01-2009 15:49 ]

[Verwijderd]

Trouwens, wat is de reden dat je de navigatie altijd in beeld wilt hebben? Ik vind persoonlijk dat het voordeel van het altijd in beeld hebben van de navigatie lang niet opweegt tegen de narigheid die je krijgt als je scrollbalken binnen in je webpagina wilt hebben. Om maar wat punten te noemen:

- Cross-browser compatibiliteit. Hier loop je nu al tegen aan, om dat helemaal goed te krijgen in alle browsers, moet je lang prutsen.
- In volledig scherm ziet het er misschien goed uit, maar zodra de bezoeker zijn browserscherm heeft verkleind, krijgt hij/zij al snel dubbele scrollbalken! Erg lelijk en gebruiksonvriendelijk.

Ik zou gewoon hetzelfde doen als de meeste andere moderne sites (tweakers.net inbegrepen): Gewoon de volledige pagina laten scrollen.

[Da Weef]

Punt is dat met gebruik van padding door de box-model bug van IE er problemen kunnen ontstaan.

Volgens mij ben je daar wel vanaf door de tekst in een aparte div te zetten en deze met margins te plaatsen ipv padding.


Overigens sluit ik me aan bij de post hierboven. Dat scheelt een hoop problemen...

[ Voor 13% gewijzigd door Da Weef op 08-01-2009 01:59 ]

[Verwijderd]

dat was een wens van mijn opdracht geefster ( website is wel voor iemand bedoeld )
ik snap jullie argument heel goed , maar als ik van te voren wist dat die browser compatibiliteits problem zou geven had ik het haar op afgeraden .

bedankt voor de tip dus Droog en Da Weef

ik zal proberen de text in een aparte Div te zetten en dan margins te gebruiken kijken of dat helpt .
resulaat zal ik posten

het heeft nog geen effect gehad , het probleem blijft zich voordoen met ie7

heb op dit moment
dit als CSS

Cascading Stylesheet:

#mainpage {
    float: left;
    height: 425px;
    width: 955px;
    background-image: url(../images/main_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    overflow-y: scroll;
}
#mainpage #text {
    font-size: 24px;
    color: #de2184;
    margin-top: 20px;
    margin-left: 195px;
    margin-right: 290px;
}

en nu ik mijn BG image op center heb gezet komt het er helemaal maf uit te zien want nu heb ik dus ook wit ruimte boven in IE7 .
( ja fontsize is nu met opzet even zo groot )

[ Voor 43% gewijzigd door Verwijderd op 07-01-2009 23:36 ]

[Boelie-Boelie]

Da Weef schreef op woensdag 07 januari 2009 @ 15:57:
Punt is dat met gebruik van padding door de box-model bug van IE er problemen ontstaan.

Volgens mij ben je daar wel vanaf door de tekst in een aparte div te zetten en deze met margins te plaatsen ipv padding.

Verwijderd schreef op woensdag 07 januari 2009 @ 16:02:
ik zal proberen de text in een aparte Div te zetten en dan margins te gebruiken kijken of dat helpt .
resulaat zal ik posten

het heeft nog geen effect gehad , het probleem blijft zich voordoen met ie7

Dat is ook niet zo gek. In tegenstelling tot wat Da Weef zegt, doet IE6 en hoger helemaal nix vreemds met met paddings, zolang je maar een fatsoenlijk doctype gebruikt. Als Da Weef de eerste alinea van zijn eigen link had gelezen, had hij dat geweten. Dreamweaver plaatst standaard een valide doctype, tenzij je expliciet ervoor kiest dat niet te doen.

Verwijderd schreef op woensdag 07 januari 2009 @ 15:31:

Cascading Stylesheet:

overflow-y: scroll;

Grote kans dat dit echter maar in één van de twee browsers werkt.

Ook dit is grote onzin: http://code.google.com/p/doctype/wiki/OverflowYCSSProperty

@knoflooksaus: Je CSS is weinig waard zonder HTML en extra context. Het beste plaats je een volledig gestripte versie online waar je het probleem reproduceert, zonder overbodige elementen zoals de header en het menu.

[ Voor 10% gewijzigd door Boelie-Boelie op 08-01-2009 01:03 . Reden: reactie op overflow toegevoegd ]

[Verwijderd]

Heb je

Cascading Stylesheet:

overflow-y: auto;

al geprobeerd? Hier zou je eventueel nog aan toe kunnen voegen:

Cascading Stylesheet:

overflow: -moz-scrollbars-vertical;

Dit is echter geen standaard CSS, maar het vertelt FF om alleen een verticale scrollbalk in beeld te tonen.

[Da Weef]

LOL, ik zie dat ik naast mijn domme gelul over paddings ook je probleem enigszins verkeerd heb begrepen...

Het probleem is puur dat in IE de achtergrond meescrollt of niet?

Als je overflow:scroll zet, dan blijft in Firefox inderdaad de achtergrond op een vaste positie, echter in internet explorer is dit niet het geval. Als je de achtergrond fixed wilt hebben in IE7 en hoger zou dat moeten lukken met background-attachment: fixed;

IE6 en lager ondersteunen dit niet, maar daar is wel een ranzige workaround voor. Overigens lijkt het feit dat de achtergrond meescrollt voor een paar IE6 gebruikers ook weer niet zo rampzalig.

nu heb ik geprobeerd de achtergrond op een fixed positie te zetten , maar dan valt mijn achtergrond onder mijn banner .

Hieruit maak ik op dat je dit al hebt geprobeerd, maar dat er dan problemen ontstaan met posities. Je kan dit oplossen met background-position, echter denk ik dat het probleem ligt in hoe je de pagina indeelt (divs). Het is netter om er voor te zorgen dat deze indeling beter aansluit. Daarvoor moet je idd je HTML posten. Al maak ik me sterk dat in dit geval het probleem al is opgelost als je de padding-top vervangt door een margin-top....

[Verwijderd]

Da Weef schreef op donderdag 08 januari 2009 @ 11:35:
LOL, ik zie dat ik naast mijn domme gelul over paddings ook je probleem enigszins verkeerd heb begrepen...

Het probleem is puur dat in IE de achtergrond meescrollt of niet?

Als je overflow:scroll zet, dan blijft in Firefox inderdaad de achtergrond op een vaste positie, echter in internet explorer is dit niet het geval. Als je de achtergrond fixed wilt hebben in IE7 en hoger zou dat moeten lukken met background-attachment: fixed;

IE6 en lager ondersteunen dit niet, maar daar is wel een ranzige workaround voor. Overigens lijkt het feit dat de achtergrond meescrollt voor een paar IE6 gebruikers ook weer niet zo rampzalig.


[...]


Hieruit maak ik op dat je dit al hebt geprobeerd, maar dat er dan problemen ontstaan met posities. Je kan dit oplossen met background-position, echter denk ik dat het probleem ligt in hoe je de pagina indeelt (divs). Het is netter om er voor te zorgen dat deze indeling beter aansluit. Daarvoor moet je idd je HTML posten. Al maak ik me sterk dat in dit geval het probleem al is opgelost als je de padding-top vervangt door een margin-top....

bedankt ik zal vanmiddag eens kijken of het werkt , ik kan nu even niet bij mijn laptop waar mijn werk op staat
en zal dan tevens ook de html posten


heb het nogmaals geprobeerd om de BG op fixed te zetten maar hij verdwijnt dat helemaal naar de top van de container en begint die dus onder de banner en valt het laatste stuk weg . het helpt wel met de scroll text in IE7 .


<div id="container">
<div id="banner"></div>
<div id="nav"> veel codes
</div>
<div id="mainpage">
<div id="text"> de text
</div>
</div>
</div>
</body>
</html>

of http://cid-2a58e694aa6475...com/browse.aspx/Documents voor de html en css
( kon geen opties vinden voor bijlages )

[ Voor 15% gewijzigd door Verwijderd op 08-01-2009 14:43 ]

[Da Weef]

Dat is waarschijnlijk eenvoudig op te lossen, maar je zult wel even een (uitgeklede) versie van de HTML moeten posten.

[Verwijderd]

Da Weef schreef op donderdag 08 januari 2009 @ 14:39:
Dat is waarschijnlijk eenvoudig op te lossen, maar je zult wel even een (uitgeklede) versie van de HTML moeten posten.

zie boven

[Da Weef]

Als je een fixed background gebruikt wordt deze gepositioneerd ten opzichte van de gehele viewport (meestal body van de pagina). Voor meer uitleg kijk hier

Jij positioneert je achtergrond relatief, om precies te zijn in het midden. Hierbij wordt deze nu dus in het midden van de viewport geplaatst (i.p.v. het midden van het element). Wat je hier het beste kunt doen is om de (verticale) positie vast te leggen in pixels. Aangezien de header een vaste hoogte heeft kan dit prima.

Succes ermee...

[Verwijderd]

Da Weef schreef op donderdag 08 januari 2009 @ 17:18:
Als je een fixed background gebruikt wordt deze gepositioneerd ten opzichte van de gehele viewport (meestal body van de pagina). Voor meer uitleg kijk hier

Jij positioneert je achtergrond relatief, om precies te zijn in het midden. Hierbij wordt deze nu dus in het midden van de viewport geplaatst (i.p.v. het midden van het element). Wat je hier het beste kunt doen is om de (verticale) positie vast te leggen in pixels. Aangezien de header een vaste hoogte heeft kan dit prima.

Succes ermee...

naja met een fixed positie komen ze allebij ( zonder pixel vast stelling ) buiten de main uit zowel in FF als in IE7 , maar het probleem is dan dat die bij IE er net iets veder uit gaat dan bij FF waardor er een verschil in pixels ontstaat .
het is in theorie dus mogelijk en ik ga het ook proberen maar het is niet de ideale oplossing dus .

mochten mensen andere oplossing weten dan hoor ik het alsnog graag

het is gelukt nu na wat bijprutsen , mensen bedankt echt top dat jullie hier tijd aan wilden besteden

[ Voor 4% gewijzigd door Verwijderd op 08-01-2009 20:57 ]