<hr> met CSS
of
padding-top:-1px;
weet ut ff niet meer uit me hoofd :P
Plus dat als het wel zou werken, de HR in IE nog steeds niet de look van een HR in FF heeft. En dat is wat ik wil bereiken.
In ieder geval bedankt!
ps, sorry dat ik zo'n zeurpiet ben :P.
-edit-
Na klooien met de borders, kom ik dus niet op hetzelfde uit als FF. FF gebruikt voor een HR een soort van groove (style van een border), dus donkerdere bovenlijn en lichtere onderlijn.
Het lijkt dan net een soort inkeping.
Probeer ik dit met een border te doen met als style: groove met de donkere kleur als border-color, dan geeft hij in IE totaal andere kleuren weer als FF.
Gewijzigd op 01/01/1970 01:00:00 door J V
Dan is alles opgelost
Al geef ik border-color: #403c34 (soort bruin) mee, dan is in FF de bovenste kleur 403c34 en de onderste een lichtere vorm van die kleur.
In IE is de onderste kleur #403c34 en de bovenste kleur donkerder dan de onderste kleur.
IE zet de kleur die ik wil standaard als onderste en lichtste kleur , FF zet de kleur als bovenste en donkerste kleur.
Als draai je dit om door de style ipv groove, ridge mee te geven (die is precies omgedraaid)
Dan word in IE de kleur die ik bovenaan wil hebben (#403c34) als lichtste kleur bovenaan gezet. Nu word de kleur eronder alleen donkerder.
In FF worden de 2 kleuren die ik al had gewoon omgedraaid bij style:ridge.
Nu staat die lichtere vorm van #403c34 bovenaan en #403c34 staat onderaan.
IE word dus nooit zoals FF.
Ik hoop dat het een beetje duidelijk is.
Aanschouw mijn uiteindelijke resultaat wat ik wilde bereiken!!!
klik
Het is omslachtig en ik had het al eerder kunnen doen, maar helaas kon ik geen andere manier vinden om het zo te krijgen in IE en FF. (het is gewoon een plaatje ;))
Gewijzigd op 01/01/1970 01:00:00 door J V
Kan je niet beter een aparte footer onder je container klussen die een border-top van 1px solid die de bepaalde kleur heeft?
Hier zijn de hr-en niet voor bedoeld :)
kan je tog ook ,?
Hij is bedoelt om tekst van elkaar te scheiden, zodat alles overzichtelijker word, maar ik vond hem ook mooi om mijn footer een soort van onafhankelijk iets te maken.
En ja je kan een border 1 kleur geven, maar zoals ik al gezegd had, wilde ik precies hetzelfde als een HR lijn in FF. Die heeft 2 kleuren.
En ik weet dat hr-en niet hiervoor bestemd zijn, maar met css kan je het wel mooi stylen. Als ik nu een hr tag invoer, heb je echt een soort van scheiding tussen de tekst, wat ik mooi vind. (lijkt een soort inkeping)
Dat resultaat wat ik wilde bereiken heb ik dus bereikt dmv een plaatje in een div met daarin een onzichtbare HR. Wel moet je in je div je font-size naar 1 pixel maken, omdat IE anders je andere font-size overerft, waardoor je div niet kleiner kan worden dan je font-size van bijv je content. (ik hoop dat die duidelijk is)
@ wouter:
Wat bedoel je precies? Ik ga geen aparte stylesheet aanmaken voor IE, ik heb in mijn css bestand al hacks staan voor IE, dus geen aparte stylesheet nodig om hem in FF en IE er hetzelfde uit te laten zien.
Een HR ziet er in FF nou eenmaal anders uit als in IE. Je kan die van FF wel het uiterlijk geven van een HR in IE, maar in IE zal je altijd een lege ruimte boven en onder de HR hebben. Kijk maar eens goed naar alle sites die uitleg geven over HR's, en dan kijken in FF en IE, dan zal je zien dat bij IE meer ruimte boven en onder de HR's zit dan bij FF.
Gewijzigd op 01/01/1970 01:00:00 door J V
gewoon de container een border-bottom geven en de footer een border-top... zo kan je je probleem eenvoudiger oplossen denk ik. Gaan lopen kloten met twee verschillende css bestanden is een beetje erg jammer...
Nu kan je in FF wel met margin gaan werken enzo, maar dan kom je met het probleem dat FF en IE een groove en ridge anders opvatten.
Want ik wilde een border met 2 kleuren.
Met 1 kleur is het zo gedaan, maar ik wilde er 2.
Plus dat als je nu goed kijkt naar het plaatje dat ik gebruik, kan het niet eens met borders. Plaatje
Gewijzigd op 01/01/1970 01:00:00 door J V
om nog duidelijker te zijn: weg met die hr!
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
En waarom moet die hr weg? :P.
Als ik nou nog meer scheidingstekens wil gebruiken, moet ik altijd die div plaatsen?
Ik ga even proberen hoor.
Code (php)
1
div.hr {background: url(hr.gif) 50% 50% repeat-x;}
CSS is uit mijn hoofd, dus zou ik even moeten nazoeken.
Jan Koehoorn schreef op 14.12.2007 15:00:
Een hr is niet lekker crossbrowser te stylen. De oplossing die ik altijd gebruik is een divje te nemen met als background een image, desnoods 1px hoog. En dan in je CSS:
CSS is uit mijn hoofd, dus zou ik even moeten nazoeken.
Code (php)
1
div.hr {background: url(hr.gif) 50% 50% repeat-x;}
CSS is uit mijn hoofd, dus zou ik even moeten nazoeken.
Dat is exact wat ik nu heb jan ;).
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
div.hr {
font-size: 1px;
height: 2px;
background-image: url(images/div_hr.gif);
width: 100%;
}
hr {
display: none;
}
font-size: 1px;
height: 2px;
background-image: url(images/div_hr.gif);
width: 100%;
}
hr {
display: none;
}
HTML:
Code (php)
1
2
3
2
3
<div class="footer">
<div class="hr"></div>
</div>
<div class="hr"></div>
</div>
Dit is dus nie texact hetzelfde :P, te snel gekeken.
Maar jij gebruikt helemaal geen hr, ik ga het net zoals jij doen.
Dus dat als ik een lege div plaats, met als classnaam hr, dat hij dan een mooie lijn neerzet.
Zo ga ik het doen en ik denk dat Chrispijn dit ook bedoelde.
Dus weg met die HR!
Gewijzigd op 01/01/1970 01:00:00 door J V
Code (php)
1
2
3
2
3
hr {
display: none;
}
display: none;
}
En dit had totaal geen nut, ik heb nu gewoon een divnaam met classnaam hr.
Als ik een lege div plaats met classnaam hr, komt er automatisch een mooi lijn, die er net zo uitziet als een HR lijn in FF. Ik heb die lijn gewoon nagetekend in photoshop en als achtergrond gezet in de div met classnaam hr.
Klik hier om het te zien
Gewijzigd op 01/01/1970 01:00:00 door J V