[Table height IE Firefox]Goed in Firefox niet in IE6 - Softwareontwikkeling

maandag 2 januari 2006 11:35

Acties:

Verwijderd

Topicstarter

Ik heb een raar probleem dat ik nog niet eerder ben tegen gekomen.
Ik heb een pagina die ik opmaak mbv een tabel.
Drie cellen, waarvan cel 1 en 2 een plaatje bevatten en een vaste hoogte en breedte hebben.
De laatste cel wordt met CSS opgemaakt en heeft een achtergrondplaatje/kleur.

Als ik deze tabel in Firefox 1.5 inlaad dat ziet het er precies zo uit als ik het bedoel. Als ik het in IE6 inlaad, maakt IE de hoogte van de cellen net iets groter dan de hoogte van van de plaatjes waardoor de achtergrondkleur van de pagina er bij komt, maar dat doet die dan niet voor de derde cell.

Ik heb snel even een pagina gemaakt met alleen de eerste rij van de tabel en wat contrasterende kleuren om het geheel te verduidelijken.
De pagina is te zien op: http://www.bontepaarden.nl/linksNew/ie.html
De code van deze pagina is:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Test IE Table Height</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY STYLE="background: #000000;">
<!-- Voor createTop -->
<TABLE CELLPADDING="0" CELLSPACING="0">
<TR>
<TD>
    <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="1">
    <TR>
    <TD WIDTH="124px" HEIGHT="106px">
    [img]"images/Logo2.jpg"[/img]
    </TD>

    <TD WIDTH="638" HEIGHT="106px">
    [img]"images/Titel2.jpg"[/img]
    </TD>
    <TD STYLE="background: #990000" HEIGHT="106px">TEST</TD>
    </TR>
    </TABLE>
</TD>
</TR>
</TABLE>
     
</BODY>
</HTML>

Zoals je ziet zijn alle hoogtes ingesteld op 106px. Ik heb de code al door de HTML Validator gehaald, maar alles is standaard HTML4.0.

Heeft iemand hiervoor een nette oplossing, die uiteraard zoveel mogelijk cross-browser is?

Alvast hartelijke dank.

En iedereen nog een goed nieuwjaar gewenst!

Paul

maandag 2 januari 2006 11:40

Acties:

Skaah

HEIGHT en WIDTH nemen hun attributen standaard in pixels. 'px' erbij zetten is dus niet nodig. Wellicht ben je in de war met de CSS eigenschapen width: en height:, die wel verschillende eenheden aankunnen.

HTML:

1	<TD WIDTH="124" HEIGHT="106">

[edit]
Ho, niet helemaal goed gelezen wat precies het probleem is. Voeg dit eens toe aan je pagina, in de <head> sectie:

HTML:

1
2
3

<style>
td img { display: block;}
</style>

[ Voor 48% gewijzigd door Skaah op 02-01-2006 11:42 ]

maandag 2 januari 2006 11:48

Acties:

Sappie

De Parasitaire Capaciteit!

Door "vertical-align: bottom" toe te passen op de plaatjes zorg je ervoor dat de hoogtes van de cellen gelijkt zijn. (btw afmetingen voor tabellen zijn aanbevolen afmetingen.. een browser hoeft zich hier niet aan te houden)

Verder hoef ik vast niet te vertellen dat je op deze manier niet meer echt anno 2006 bezig bent. Tables gebruik je beter niet voor de layout. Semantiek is je zoekwoord. Hier even een url daarover (maar er is erg veel over te vinden uiteraard): http://home.parse.nl/~michiel/semantiek.html

edit: toepassen van "display: block" is ook een mogelijkheid ja.

[ Voor 8% gewijzigd door Sappie op 02-01-2006 11:49 ]

Specs | Audioscrobbler

maandag 2 januari 2006 14:27

Acties:

Verwijderd

Topicstarter

In de tijd dat ik begon met HTML (voor Netscape, IE bestond nog niet) was dit de beste methode.
Ik zal het verhaal over semantiek lezen en hopelijk weer wat nieuws leren

Overigens was de "display: block" de oplossing.

maandag 2 januari 2006 16:08

Acties:

Verwijderd

Topicstarter

Goed.

Ik ben me nu aan het verdiepen in semantiek en ik gebruik nl.tv als voorbeeld en mijn eerder genoemde tabel als leidraad.
De bedoeling is om het logo te tonen dan nog een plaatje en dan een effen kleur om de gehele bovenbalk gekleurd te hebben bij verschillende schermbreedtes.
Hiervoor heb ik de volgende HTML:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>index</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="styles2.css" rel="stylesheet" media="screen, projection" title="default" type="text/css">

</HEAD>
<BODY>

<h1 id="logo"><a href="#">Hier komt nog tekst</a></h1>
<h2 id="titleImage">Bla die bla</h2>
<div id="maxTopRechts"> </div>

<div id="content">


Hier komt tekst

</div>
</BODY>
</HTML>

en als css:

code:

* {
    font: normal 10px Verdana;
    color: black;
    margin: 0px 0px;
    padding: 0px;
}


html {
    border: none;
}

body {
    background: white;
    padding-top: 95px;
    padding-bottom: +100px;
    position: relative;
    margin: 0px auto;
}
#content {
    position: absolute;
    top: 120px;
    left: 20px;
}
h1#logo a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 124px;
    background: #990000 url(images/Logo.jpg) no-repeat 0px 0px;
    display: block;
    height: 0px;
    padding-top: 106px;
    overflow: hidden;
}

h2#titleImage {
    position: absolute;
    top: 0px;
    left: 124px;
    width: 638px;
    background: #990000 url(images/Titel.jpg) no-repeat 0px 0px;
    display: block;
    padding-top: 106px;
    height: 0px;
    overflow: hidden;
}

#maxTopRechts {
    position: relative;
    top: -95px;
    left: 762px;
    width: 100%;
    background: #990000 url(images/BovenRechts.jpg) top left repeat-x;
    display: block;
    padding-top: 106px;
    height: 0px;
    padding-right:100;
}

Dit werkt prima in IE6, maar in firefox worden de plaatjes goed getoont maar de breedte van de pagina is enorm groot, waarschijnlijk doordat in #maxTopRechts de 'width' op 100% is gedefinieerd.
Is dit niet zo heel erg maar ik wil dit toch wel goed hebben.

En in IE6 worden de tekst getoond tussen de H1 en H2 tags terwijl die niet getoond zouden moeten worden. Dat is ook wel weer op te lossen door de tekst weg te halen.

Bovenstaande van de tekst heb ik al opgelost door fons-size:0px; toe te voegen.

[ Voor 24% gewijzigd door Verwijderd op 02-01-2006 16:15 ]

maandag 2 januari 2006 16:49

Acties:

Boelie-Boelie

Heb je snel gedaan, dat omschakelen van tabellen naar structurele markup?

Heel vaak is absoluut positioneren niet nodig, het is zelfs vaak de verkeerde methode. Hoe ik het misschien zou doen:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GoT: [Table height IE Firefox]Goed in Firefox niet in IE6</title>
</head>
<body>
<div id="header">
[img]"logo2.jpg"[/img]
<p>Tekst</p>
</div>
</body>
</html>

Met als daarbij

Cascading Stylesheet:

body {
    background: #000;
}

#header {
    height: 106px;
    width: 830px;
    background: url(Titel2.jpg) #900 124px 0 no-repeat;
}

#header img {
    float: left;
}

#header p {
    float: right;
    margin-right: 10px;
}

[ Voor 15% gewijzigd door Boelie-Boelie op 02-01-2006 16:51 ]

Cogito ergo dubito

maandag 2 januari 2006 17:18

Acties:

Jaap-Jan

Boelie-Boelie schreef op maandag 02 januari 2006 @ 16:49:
Heb je snel gedaan, dat omschakelen van tabellen naar structurele markup?

Heel vaak is absoluut positioneren niet nodig, het is zelfs vaak de verkeerde methode. Hoe ik het misschien zou doen:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GoT: [Table height IE Firefox]Goed in Firefox niet in IE6</title>
</head>
<body>
<div id="header">
[img]"logo2.jpg"[/img]
<p>Tekst</p>
</div>
</body>
</html>

Ik kan me vergissen, maar je haalt allerlei informatie weg die hij wil geven. Ik heb het idee dat die h1 is bedoeld om de naam van de site aan te geven en h2 is bedoeld als paginatitel. Die informatie haal je nu wel weg

.

Ik heb er zelf dit van gemaakt:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="nl">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles2.css" rel="stylesheet" media="screen, projection" title="default" type="text/css">

</head>
<body>

<div id="header">
    <h1 id="logo"><a href="#"><span>Bontepaarden.nl</span></a></h1>
    <h2 id="titleImage"><span>Automatisering voor de paardensport</span></h2>
</div>

<div id="content">


Hier komt tekst

</div>
</body>
</html>

Cascading Stylesheet:

* {
    margin: 0px 0px;
    padding: 0px;
    border: 0px;
}

body {
    width: 100%;
    font: normal 10px Verdana;
    color: black;
}

div#header {
    height: 106px;
    width: 100%;
    background-color: #9C0A0D;
    margin-bottom: 14px;
}

h1#logo {
    float: left;
    height: 106px;
    width: 124px;
    background: #900 url(images/Logo.jpg) no-repeat;
}

h1#logo a {
    display: block;
    width: 100%;
    height: 100%;
}

h1#logo a span {
    display: none;
}

h2#titleImage {
    float: left;
    width: 638px;
    height: 106px;
    background: #900 url(images/Titel.jpg) no-repeat;
}

h2#titleImage span {
    visibility: hidden;
}

div#content {
    clear: both;
}

Maar wel met een opmerking

. Bedenk dat je met zo'n brede titel (het vervangende plaatje die in h2 staat) gebruikers uitsluit met 640 x 480 en handheld devices. Op zulke apparaten zullen deze 2 floats onder elkaar getoond worden.

Qua opmaak: er zijn 2 <span>- elementen toegevoegd om de tekst te hiden en het plaatje weer te geven.

Ook gebruik je absolute waarden voor je fonts (10px), gebruik hiervoor liever relatieve waarden, bijvoorbeeld 0.8em. Dit zorgt ervoor dat je fonts schaalbaar blijven als een gebruiker liever grote fonts gebruikt (en instelt in IE).

[ Voor 82% gewijzigd door Jaap-Jan op 02-01-2006 17:55 ]

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

maandag 2 januari 2006 18:05

Acties:

Verwijderd

Topicstarter

Bedankt allemaal. Ik ben al weer een heel eind verder.
Dat van die brede titel zoek ik nog even uit. Ik heb het nu zonder, zoals Boelie-Boelie voorstelde.
Ik heb nu mijn eerste rij (met logo en titel) aangepast, als ook mijn tweede rij (met een golfje/kronkel) en ik ben nu bezig met mijn derde rij. Hierin komen 5 knoppen (horizontaal).
In mijn oude versie had ik dit in een tabel gepropt en ik keek en zag dat het goed was

In mijn nieuwe versie met structurele markup (wat in nog niet helemaal in de vingers heb) heb ik het zo opgelost:

HTML:

<BODY>
<DIV ID="header">
    <A HREF="index.php" TARGET="_top" TITLE="Bontepaarden.nl - Links voor de paardensport">[img]"images/Logo.jpg"[/img]
    </A>[img]"images/Titel.jpg"[/img]   
</DIV>

<DIV ID="kronkel">
    [img]"images/Kronkel.jpg"[/img][img]"images/KronkelRechts2.jpg"[/img]
</DIV>

<DIV ID="ButtonBar">
    [img]"images/ButtonbarLinks.jpg"[/img]
    <A HREF="index.php">[img]"images/ButtonHome.jpg"[/img]</A>
    [img]"images/ButtonTussen1.jpg"[/img]
    <A HREF="toevoegen.php">[img]"images/ButtonToevoegen.jpg"[/img]</A>
    [img]"images/ButtonTussen2.jpg"[/img]
    <A HREF="rubrieken.php">[img]"images/ButtonRubrieken.jpg"[/img]</A>
    [img]"images/ButtonTussen3.jpg"[/img]
    <A HREF="index.php">[img]"images/ButtonContact.jpg"[/img]</A>
    [img]"images/ButtonTussen4.jpg"[/img]
    <A HREF="index.php">[img]"images/ButtonLogin.jpg"[/img]</A>
    [img]"images/ButtonbarRechts.jpg"[/img]
</DIV>
</BODY>

met als css:

Cascading Stylesheet:

* {
    font: normal 0.9em Verdana;
    color: black;
    margin: 0px 0px;
    padding: 0px;
}


html {
    border: none;
}

body {
    background: white;
    padding-top: 95px;
    padding-bottom: +100px;
    margin: 0px auto;
}
img{
    float: left; 
    margin: 0px;
    padding: 0px;
    border: 0px;
}
#header{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: #990000 url(images/BovenRechts.jpg) top left repeat-x;
}
#kronkel{
    position: absolute;
    top: 106px;
    left: 0px;
    width: 100%;
    background: #990000 url(images/KronkelRechts2.jpg) top left repeat-x;
    margin: 0px auto;
    padding: 0px;
}
#ButtonBar{
    position: absolute;
    top: 168px;
    left: 0px;
}
    

#content {
    position: absolute;
    top: 240px;
    left: 20px;
}

Dit gaat prima in Firefox maar IE6 maakt ruimte tussen de plaatjes. Ik heb al van alles geprobeerd via de img-tag maar de juiste nog niet gevonden.
IE6 zet ook mijn plaatjes niet netjes links tegen de kant maar net weer een stukje ruimte ervoor

Ik zal vast wel iets over het hoofd zien, maar ik kom er niet uit.

Ik was mijn code aan het opschonen en nu werkt het wel in IE6. Zowel de linkermarges als de ruimte tussen de plaatjes.

In ieder geval is hier ter completering

de laatste code:

HTML:

<BODY>
<DIV ID="header">
    <A HREF="index.php" TARGET="_top" TITLE="Bontepaarden.nl - Links voor de paardensport">[img]"images/Logo.jpg"[/img]</A>
    [img]"images/Titel.jpg"[/img]   
</DIV>

<DIV ID="kronkel">
    [img]"images/Kronkel.jpg"[/img]
    [img]"images/KronkelRechts2.jpg"[/img]
</DIV>

<DIV ID="ButtonBar">
    [img]"images/ButtonbarLinks.jpg"[/img]
    <A HREF="index.php">[img]"images/ButtonHome.jpg"[/img]</A>
    [img]"images/ButtonTussen1.jpg"[/img]
    <A HREF="toevoegen.php">[img]"images/ButtonToevoegen.jpg"[/img]</A>
    [img]"images/ButtonTussen2.jpg"[/img]
    <A HREF="rubrieken.php">[img]"images/ButtonRubrieken.jpg"[/img]</A>
    [img]"images/ButtonTussen3.jpg"[/img]
    <A HREF="index.php">[img]"images/ButtonContact.jpg"[/img]</A>
    [img]"images/ButtonTussen4.jpg"[/img]
    <A HREF="index.php">[img]"images/ButtonLogin.jpg"[/img]</A>
    [img]"images/ButtonbarRechts.jpg"[/img]
</DIV>

Nogmaals bedankt voor alle hulp, voorlopig red ik me weer. Morgen is er weer een dag!

[ Voor 35% gewijzigd door Verwijderd op 02-01-2006 18:11 . Reden: probleem opgelost ]

dinsdag 3 januari 2006 12:26

Acties:

Jaap-Jan

Hehe, ik ben er ook eens mee aan de slag geweest, want semantisch klopte het nog van geen kant. Ik heb nu een kronkel zonder die twee staafjes omlaag, maar Internet Explorer gaat niet goed om met de z-index, want ik wil de staafjes (ik heb ButtonBarLeft en Right voorzien van een langere verticale staaf) verbergen achter de kronkel op niet- transparante gedeelten. In Firefox gaat dat goed (alleen heeft die kronkel nog een verloop naar wit waardoor hij niet mooi aansluit), maar in IE krijg ik ze maar niet verborgen.

Maar semantisch gezien is er niets op aan te merken

.

Te zien op: http://vdvn.net/user/paarden/

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

dinsdag 3 januari 2006 15:15

Acties:

Verwijderd

Topicstarter

@Japie_17:
Dat zit er inderdaad goed uit en de code is ook duidelijker.
Ikzelf blijf een beetje hangen tussen het oude met tabellen en echt semantisch.

Ik heb het volgende:
http://www.bontepaarden.nl/linksNew/semantiek.html
Het is nog niet helemaal semantisch verantwoord, maar ik vind zelf dat het al een eind in de goede richting.
Het enige wat nog niet werkt is dat er witruimtes zit tussen de knoppen van de knoppen balk. Was dat gisteren alleen in IE6, na wat aanpassingen is het nu ook in FireFox.
Ik ga nu eerst proberen dat er uit te halen. Vervolgens de achterkant te maken (dat is nl. ook nog een hele klus) en dan probeer ik weer mijn lay-out semantisch verantwoord te maken.

Heel veel dank voor alle hulp en mocht je een oplossing weten voor mijn witruimtes dan hoor ik het graag.

Edit:
De witruimtes zijn weer opgelost. Ik heb alle knoppen achter elkaar gezet op 1 regel. Had ik moeten weten.

[ Voor 8% gewijzigd door Verwijderd op 03-01-2006 15:25 . Reden: Witruimtes opgelost ]

dinsdag 3 januari 2006 15:30

Acties:

Sappie

De Parasitaire Capaciteit!

Ik zie nergens witruimtes.

ff wat tips:

- IE rendert bij jou op dit moment in quirksmode (en gebruikt dus het niet-standaard border-box box-model), vanwege de onvolledigheid van de DTD. Dit is neem ik aan niet wat je wilt en je zal dus een volledige DTD moeten hanteren om ook IE in standards compliant mode te laten renderen.

- Netjes inspringen maakt je code verder ff wat in- en overzichtelijker

Over de semantiek zal ik dan maar niet hebben, want daar was je nog niet klaar mee.

edit:
Dat van die witruimtes was je zelf ook al achter

[ Voor 19% gewijzigd door Sappie op 03-01-2006 15:32 ]

Specs | Audioscrobbler

dinsdag 3 januari 2006 17:12

Acties:

Verwijderd

Topicstarter

Quirksmode! Dat willen we natuurlijk niet. Had nooit begrepen wat dat precies was.

Ik heb nu het doctype aangepast naar:

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dit bedoelde je toch?

Alleen nu gaat het niet helemaal goed in FF.
Om een of andere reden wordt er nu ruimte om de twee plaatjes in het vak getoont die de zijkanten voorstellen.
Ter verduidelijking heb ik de achtergronden contrasterende kleuren gegeven.
Het resultaat is nog steeds te bezichtigen op:
http://www.bontepaarden.nl/linksNew/semantiek.html
De css voor deze twee plaatjes:

Cascading Stylesheet:

.LinksMidden{
    background:black url(images/LinksMidden.jpg) top left repeat-y;
    width:46px;
    min-width: 46px;
    height:100%;
}
.RechtsMidden{
    background:yellow url(images/RechtsMidden.jpg) top right repeat-y;
    width:31px;
    min-width: 31px;
    height:100%;
}

Oveigens als ik de oude doctype gebruik, dus zonder dtd dan gaat het in zowel IE6 als FF goed.

dinsdag 3 januari 2006 17:15

Acties:

ultimasnake

ik weet nog niet of het gezegt is.. maar hier je oplossing

code:

1
2
3

<TD WIDTH="124px" HEIGHT="106px">
    [img]"images/Logo2.jpg"[/img]
    </TD>

maak je

code:

1	<TD WIDTH="124px" HEIGHT="106px">[img]"images/Logo2.jpg"[/img]</TD>

van.. IE rendered een spatie/enter waardoor het niet helemaal klopt

in andere woorden.. alles op 1 regel.. geen spaties tussen de tags.. voila

.. stomme IE render bug achtig iets

[ Voor 66% gewijzigd door ultimasnake op 03-01-2006 17:18 ]

dinsdag 3 januari 2006 17:50

Acties:

Verwijderd

Topicstarter

@ultimasnake:

Ik had het al opgelost. Maar toch bedankt.
Heb je misschien ook een oplossing voor het rare render gedrag van FF zoals ik in de post boven die van jou heb uitgelegt?

dinsdag 3 januari 2006 17:52

Acties:

Sappie

De Parasitaire Capaciteit!

Afmetingen voor tabel cellen zijn aanbevolen afmetingen, UA's hoeven zich hier niet per se aan te houden. Heb je al gekeken naar andere, meer semantisch verantwoordere, oplossingen zoals in je andere topic naar voren zijn gekomen?

Mocht je desondanks toch voor de 'oplossing' met tabellen willen gaan dan zul je denk ik eens moeten kijken naar de breedtes van de table cellen .rechtsOnder en .linksOnder die niet overeen komen met de breedtes van de cellen .rechtsBoven en .linksBoven.

btw je DTD is nu volledig idd

[ Voor 17% gewijzigd door Sappie op 03-01-2006 17:54 ]

Specs | Audioscrobbler

dinsdag 3 januari 2006 19:48

Acties:

Verwijderd

Topicstarter

@Sappie:
Bedankt voor de info. Dus is er niets aan te doen. Ik heb het nu opgelost door de achtergrondkleur van het middenstuk mee te geven.

Inderdaad zal ik later proberen om de layout via een meer semantisch verantwoorde oplossing te presenteren.

Voor nu werkt de lay-out naar tevredenheid en zal ik eerst de achterkant afmaken. Dat gaat overigens met php en MySQL, dus wijzigingen in de lay-out zijn dan vrij eenvoudig door te voeren.

dinsdag 3 januari 2006 22:04

Acties:

Jaap-Jan

'k Kan er niets aan doen, ik wil gewoon bewijzen dat tabellen niet nodig zijn voor opmaak

.

'k Heb weer mijn eigen versie gemaakt voor die boxen, met als achtergrondinformatie een pagina van A List Apart over Custom Corners.

Site is weer te vinden op hetzelfde adres.

De breedte van de box is eenvoudig aan te passen door bijvoorbeeld style="width: 60%" toe te voegen.

[ Voor 16% gewijzigd door Jaap-Jan op 03-01-2006 22:07 ]

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

dinsdag 3 januari 2006 22:46

Acties:

Verwijderd

Topicstarter

@Japie_17:
WOW
Ziet er goed uit. Ik ga er morgen gelijk naar kijken. M'n vriendin is net thuis van het werk, dus....

Wat ik alleen nog niet zo mooi vindt zijn die pootje onder de kronkel naar de buttons toe. Daar kijk ik ook morgen wel naar.

woensdag 4 januari 2006 11:26

Acties:

Verwijderd

Topicstarter

Ik heb er naar gekeken en het ziet er goed uit. Zeker de boxen. Ik zal ze dan ook gaan gebruiken.
Ik zit alleen nog met de width. Ik dacht dat als ik er een monospace van maak dan heb ik een bekende breedte als ik het aantal tekens weet. Maar daar kom ik niet uit.
Als workaround zal ik de breedte in de database meegeven, zodat het wel werkt.
Ik heb overigens je
div.contentfooter a {
verandert in
div.contentfooter span {
zodat bij de detailbox (waar geen link nodig is) de onderste balk niet als link werkt.

Nogmaals erg bedankt voor al het werk.
Ik zal je vernoemen in de code

woensdag 4 januari 2006 13:30

Acties:

Jaap-Jan

Verwijderd schreef op woensdag 04 januari 2006 @ 11:26:
Ik heb er naar gekeken en het ziet er goed uit. Zeker de boxen. Ik zal ze dan ook gaan gebruiken.
Ik zit alleen nog met de width.

Makkelijk op te lossen. Geef de contentbox geen width mee in de css en/ of in de html- code, maar zorg ervoor dat de padding aan de rechterkant van de h3 en de .contentbody 3em is. Dat zorgt ervoor dat de content niet door de border heen loopt en dat de box de breedte aanneemt van het breedste element (de <h3> of het element met als class 'contentbody').

Nogmaals erg bedankt voor al het werk.
Ik zal je vernoemen in de code

Graag gedaan hoor, ik vind het een hele eer $_/-\o_$ .

[ Voor 6% gewijzigd door Jaap-Jan op 04-01-2006 16:38 ]

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

zaterdag 7 januari 2006 19:39

Acties:

Verwijderd

Topicstarter

Zoals verwacht ben ik nog steeds bezig met mijn website op www.bontepaarden.nl/linksNew
Ik ben al een heel eind.
Ik heb nog niet de kronkel en de butttons aangepast, dat ga ik nog zeker doen. Vooral omdat ik een knop ben vergeten

Ik heb het volgende probleempje.

Ik had gisteren het zo gemaakt dat de blokken goed worden getoont en dat er een div-je uiterst recht wordt getoont, hierin komt straks een Google sky-scraper.
Hiervoor had ik de volgende style bedacht:

Cascading Stylesheet:

.ad {
   float: right;
   margin-top: 20px;
   margin-right: 0px;
   margin-bottom: 10px;
   border: solid black 1px;      width: 160px;
   height: 600px;
   display: inline;
}

De HTML is:

HTML:

<div id="content">
   <div class="ad"></div>
   ... rest van de blokken
</div>

Vandaag ben ik druk geweest met de detailblokken, dit zijn in grote lijnen dezelfde blokken alleen heeft elke link een eigen blok en staat er gegevens over de link in.
Daarvoor heb ik de volgende styles toegevoegd:

Cascading Stylesheet:

/* voor de detailbox */
div.contentbody{
   height: 16em;
   font-size: 1.0em;
}
div.contentbody b{
   font-weight: bold;
}
div.contentbody a{
   text-decoration: underline;
}
.stats{
   bottom: 0px;      left: 50px;
   border:0;          width: 24em;
   height:5em;
   border-top: solid black 1px;      text-align: top;
   overflow: hidden;
}
.userTekst{
   border: solid black 0px;          height: 10em;
   padding-bottom: 1em;
   display: block;
   vertical-align: top;
   margin-left: -15px;
   overflow: hidden;
}
.userTekst img{
   width: 50px;
   height: 50px;
   border-bottom: solid black 2px;
   border-right: solid black 2px;
   border-top: solid #ccc 1px;
   border-left: solid #ccc 1px;      float:left;
   clear:left;
   padding:0;          margin-right: 0.5em;
}
#detailBox{
   width: 31.5em;
   overflow: hidden;
}

met als HTML:

HTML:

<div id="content">
 <div class="ad"></div>
 <div class="contentbox" id="detailBox">
   <h3>Welkom bij Western Ranch du Hau</h3>
   <div class="contentbody">
     <div class="userTekst">[img]"http://www.ranch.nl/images/logo.jpg">
[/img]
       <a href="visit.php?ID=309" title="Welkom bij Western Ranch du Haut Languedoc" target="_blank">http://www.ranch.nl/</a><br>
       <br><br>
     </div>
     <div class="stats">
       Aantal kliks: 43
       | Aantal return kliks: 0<br>
       Datum laatste wijziging: 04 Jan 2006 11:43<br>
       Rubrieken: 43
     </div>
   </div>
   <div class="contentfooter">
     <span>&nbsp;</span>
   </div>
 </div>

 ... volgende blokken
</div>

Dit werkt allemaal prima in FF
Alleen in IE6 gebeurt er iets heel raars.
Doordat ik float: right; in .ad gebruik, worden de blokken en de google ad goed getoont alleen de header (logo en titel), de kronkel en de buttonbar wordt niet meer getoont.
Als ik de style verander van float: right; naar float: left; worden ze weer wel getoont.
En wordt uiteraard de google banner aan de linkerkant getoont.

Een voorbeeld hiervan is te zien op:
http://www.bontepaarden.n...ubrieken.php?rubriekID=23

Hier snap ik dus niets van.
Ik ben al de hele dag aan het zoeken, maar ik kom er niet uit.
Iemand een idee??

Alvast bedankt.

Groeten
Paul

Pagina: 1

Reageer