Archief - Klein layout-probleempje IE

Jerom · 30 jul 2010

Hallo,

Ik heb een kleine website in elkaar geknutseld: Zita voetbalprono 2010-2011. Ik werk normaal op Ubuntu en met Firefox. Daar ziet het er ook uit zoals ik wil dat het eruit ziet (code wss nogal lelijk, maar 't was lang geleden

).

Ik heb nu net even in Internet Explorer gekeken, en dat geeft niet helemaal het gewenste resultaat. Als je de pagina 'stand' opent, zie je dat in het rechtermenu 5 cijfers naast elkaar worden weergegeven en het zesde eronder. In Firefox worden ze netjes alle zes naast elkaar geplaatst (zoals ik het wil). Nochtans is de cel even breed (gemeten met een meetlat op het scherm) in beide browsers.

Kan iemand helpen?

Hartelijk dank!
Jerom

Eleven · 30 jul 2010

Probeer eens eerst een CSS reset: Eric Meyer of YUI.

(BTW, wat staan die PHP tags in uw code te doen? Er zijn trouwens nog andere zaken in uw code die beter kunnen.)

BjoJn · 30 jul 2010

Je zal idd best eens een reset uitvoeren zoals eleven zegt... bij de reset rekening houden dat hij zeker reset voor tables, aangezien uw site een tabel is.

mss best je code eens bekijken, php tags in het begin, iFrame? say whut

Jerom · 31 jul 2010

Wat doet zo'n reset juist? Ik vond niet veel uitleg... Heb es gelinkt naar die stylesheet van YUI, maar dan ziet mijn layout er pas helemaal verkloot uit

Ik denk dus dat ik het principe niet helemaal door heb.

Die php-tags zijn uiteraard fout. Een find/replace 'html'->'php' die een beetje uit de hand gelopen is. Op Zita voetbalprono 2010-2011 heb ik een kopie staan waar ik in kan prutsen. Heb dat al aangepast maar maakte uiteraard niet uit.

Zero Grav · 31 jul 2010

Een CSS reset zorgt ervoor dat alle standaard opmaak verdwijnt. Browsers hebben allemaal zo hun eigen manier van dingen op te maken, bijvoorbeeld hoe een lijst wordt ingesprongen, wat het standaard lettertype en de grootte ervan is, etc. Die CSS reset zorgt ervoor dat alles terug op 0 gezet wordt zodat ge u daar niets van moet aantrekken en ge volledig op uw eigen code kunt vertrouwen.

Maar als ge dat achteraf pas gaat invoegen dan kan het niet goed gaan, toch niet zonder dat ge achteraf alles nog eens gaat aanpassen.

Jerom · 31 jul 2010

Dus ik moet zo'n css-reset-stylesheet gebruiken, en van daaruit alle layout beginnen aanpassen tot het eruit ziet zoals ik wil? Maar dan veronderstel ik dat ik toch dingen in die reset-stylesheet moet aanpassen ook - of worden die "overschreven" en krijgt een andere voorrang?

Excuses voor de n00b-vragen

Zero Grav · 31 jul 2010

Ge gaat die waardes later terug overschrijven ja. Maar het punt is dat als ge bijvoorbeeld een ul hebt dat die dan standaard geen margin en geen padding gaat hebben. Ge gaat dus in alle browsers exact dezelfde lijst hebben.

Gebruikt ge geen CSS reset dan gaat ge bijvoorbeeld in Internet Explorer een list krijgen die 20 pixels padding-left gaat hebben en 0 pixels margin-left, maar in Firefox 0 pixels padding-left en 20 pixels margin-left. Na een CSS reset hebt ge in zowel IE als FF 0 pixels margin-left en 0 pixels padding-left. Achteraf zet gij gewoon zelf de margin-left die ge zelf wilt. Zo hebt ge alle vrijheid van de wereld.

Een voorbeeldje van hoe het er in de praktijk zou uitzien:

Code:

/***************/
/** CSS RESET **/
/***************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, * {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;}

table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
form legend {display: none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
ol, ul {list-style: none;}

:focus {outline: 0;}



/**********/
/** MAIN **/
/**********/

body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.7em;
	color: #434343;
	background-color: #ffffff;
}

.accessibility {
	position: absolute;
	top: -10000px;
	left: 0;
}

#container {
	width: 980px;
	margin: 0 auto;
}

strong {
	font-weight: bold;
}

.clear {
	display: block;
	clear: both; height: 0.01em;
}


/**********/
/** HEAD **/
/**********/

#head {
	height: 96px;
}

#head h1 {
	padding-top: 23px;
	width: 318px; height: 50px; float: left;
	background: url("../images/logotype.png") no-repeat 0 23px;
}

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

	/**********************/
	/** PROMOTIONAL FLOW **/
	/**********************/
	
	#promotional-flow, #product-range {
		background-color: #fff;
		height: 640px; margin-bottom: 20px; overflow: hidden;
		background: url("../images/product-background.png") no-repeat;
	}
	
	#promotional-flow li {
		height: 100%;
	}
	
	#promotional-flow img {
		float: left;
		max-width: 460px;
	}
	
	#promotional-flow h2 {
		color: #fff; float: left;
		margin-left: 10px; clear: right;
		padding-top: 220px; width: 510px;
		margin-bottom: 20px;
	}
	
	#promotional-flow p {
		width: 440px; float: left;
		color: #fff; font-size: 1.2em;
		line-height: 2em; margin-left: 10px;
		font-family: helvetica, verdana, arial, sans-serif; font-weight: normal;
	}

	/****************/
	/** NAVIGATION **/
	/****************/
	
	#nav {
		padding-top: 33px;
		float: right;
	}
	
	#nav li {
		float: left; width: 90px; font-size: 1.1em;
		margin-right: 3px;
		display: block; text-align: center;
	}
	
	#nav li a, #nav li.active {
		display: block; text-decoration: none;
		padding: 0 10px; line-height: 27px; color: #000; width: 70px;
	}
	
	#nav li.active, #nav li a:hover {
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		color: #fff; background: #000;
	}
	
	#SWFNav {
		float: right; height: 60px;
		margin-top: 33px;
	}


/********************/
/** NEWS ACCORDION **/
/********************/

#news-accordion {
	border: 1px solid #eee;
	background: #fdfdfd;
	width: 480px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

#news-accordion h2 {
	margin: 0 1px;
	height: 39px; line-height: 39px;
	text-shadow: 1px 1px 0 #f6f6f6;
	color: #6f6d6d; padding-left: 10px;
	border-top: 1px solid #fff;
	font-weight: bold; letter-spacing: 0.5px;
	display: block; cursor: pointer;
	background: url("../images/titles-background.png") repeat-x;
}

#news-accordion h2:first-child {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px;
	-moz-border-top-right-radius: 6px;
}

#news-accordion h2.last {
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px;
	margin-bottom: 1px;
}

#news-accordion h2 + div {
	border-bottom: 1px solid #f1f1f1;

}

#news-accordion h2.last.ui-state-active {
	-webkit-border-radius: 0;
}

#news-accordion h2.ui-state-active {
	cursor: inherit;
}

#news-accordion h2.last + div {
	border: 0;
}

.ui-icon { 
	display: block;
	width: 8px; height: 16px;
	margin-right: 10px;
	background: url(../images/arrow.png) no-repeat;
	background-position: 2px 0;
	float: left; margin-top: 17px
}

.ui-icon-minus { background-position: -13px 0; }

#news-accordion div p  {
	padding: 10px 10px 10px 30px;
	line-height: 1.7em;
}

#news-accordion .readOn {
	text-align: right;
	padding-right: 10px;
	line-height: 30px;

}

.readOn a {
	color: #565656;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
}

.readOn a:hover {
	text-decoration: underline;
}

/*******************/
/** PRODUCT RANGE **/
/*******************/

#product-range h2 {
	background: url("../images/the-dyson-collective.png") no-repeat;
	width: 416px; height: 29px; margin-top: 50px; margin-left: 50px;
	padding-top: 40px; font-size: 3.3em; color: #b5b5b5; text-transform: lowercase;
	font-weight: lighter; padding-left: 9px;
}

	/**************/
	/** PRODUCTS **/
	/**************/
	
	#products {
		margin-top: 20px;
		height: 400px;

	}
	
	#products li {
		float: left;
		height: 100%;
		width: 33%;
		text-align: center;
		position: relative;
	}
	
	#products li img {
		position: absolute;
		left: 90px;
		bottom: 0;
	}

/************/
/** FOOTER **/
/************/

#footer {
	height: 60px;
	background: url("../images/logotype-small.png") no-repeat 10px 19px;
	margin-top: 20px;
	border-top: 1px solid #e3e3e3;
	padding-top: 15px;
}

#footer p {
	margin-left: 100px;
	border-left: 1px solid #e3e3e3;
	padding-left: 30px;
	line-height: 1.7em; font-size: 0.85em;
}


/**********/
/** NEWS **/
/**********/

#sidebar, #article {
	float: left;
}

#article {
	width: 470px;
}

#news-content {
	width: 570px;
	float: left;
}

#article h2 {
	font-size: 1.6em;
	font-weight: 300;
	letter-spacing: -20;
	font-family: "Lucida Sans Unicode"; /*******************************************************************/
}

#article p#lead {
	color: #444;
	line-height: 1.5em;
	text-align: justify;
	font-weight: 600;
}

#article div {
	padding: 15px 20px 0 0;
}

#article p {
	color: #000;
	font-size: 1.2em;
	margin-bottom: 20px;
	line-height: 1.7em;
	font-family: georgia, serif;
}

#article h3 {
	font-weight: 400;
}

#article p strong {
	color: #333;
}

#article p a {
	color: #178fb7;
}

#article p a:hover {
	text-decoration: none;
}

#article blockquote p {
	border-left: 5px solid #dbdbdb;
	padding-left: 10px; color: #7b7b7b;
}

#date {
	height: 200px; display: inline-block; width: 60px;
	background: url("../images/news.png") no-repeat;
	background-position: 20px 75px; overflow: hidden;
	float: left; margin-right: 40px;
}

#date span {
	color: #d4d4d4;
	text-transform: uppercase;
	border-bottom: 1px solid #d4d4d4;
	display: inline-block;
	font-size: 1.4em;
	line-height: 1.4em;
	padding-bottom: 10px;
	text-align: right;
	float: right;
	width: inherit;
}

h3 {
	font-size: 1.6em;
	margin-bottom: 10px;
}

	/******************/
	/** NEWS SIDEBAR **/
	/******************/
	
	#sidebar {
		width: 320px;
		color: #666;
		margin-left: 55px;

	}
	
	#sidebar li, #searchresults li {
		margin-bottom: 20px;
		background: url("../images/prev-next.png") no-repeat 0 center;
		display: inline-block; min-height: 39px; width: 100%;
	}
	
	#searchresults li {
		background: none;
		margin-bottom: 5px;
	}
	
	#sidebar a, #searchresults a {
		color: #363636;
		display: block;
		font-size: 0.9em;
		line-height: 1.5em;
		text-decoration: none;
		padding-left: 65px;
	}

	#searchresults a:hover {
		border-bottom: 1px solid #187fb1;
	}
	
	#sidebar .next {
		padding-left: 0; margin-top: 10px;
		background-position: right center;
	}
	
	#sidebar h2 a, #searchresults h2 a, #searchresults h2 span {
		color: #178fb7;
		margin: 0; padding: 0;
		font-size: 2.2em;
		font-weight: 300;
		width: 300px;
		padding-left: 65px;
	}
	
	#searchresults h2 a {
		padding: 0;
		display: inline;
	}
	
	#sidebar .next a {
		padding-left: 0;
	}

	#sidebar .next > a {
		padding-right: 65px;
	}
	
	/************/
	/** SEARCH **/
	/************/
	
	#news-search {
		float: left;
		margin-left: 55px;	
		margin-bottom: 10px;
	}
	
	#news-search input[type=text] {
		border-bottom: 1px solid #ececec;
		width: 264px; margin-right: 10px;
		color: #666666;
		font-size: 1.2em; font-weight: 300;
	}
	
	#news-search input[type=submit] {
		color: #178fb7;
		background: #fff;
		cursor: pointer;
	}
	
	#searchresults {
		width: 320px; margin-bottom: 40px;
		float: left; margin-left: 55px;
		border-bottom: 1px solid #ececec;
	}


/*********/
/** 404 **/
/*********/

#brokenpage {
	margin-top: 70px;
	text-align: center;
	font-size: 2.8em;
	height: 250px;
	margin-bottom: 30px;
	background: url("../images/broken.png") no-repeat center bottom;
}

Homer` · 31 jul 2010

Is zo'n CSS reset aangeraden voor iedereen, altijd? Of enkel als er problemen zijn? Of is het meer voorkomen dan genezen?

Zero Grav · 31 jul 2010

Het is sowieso altijd aangeraden omdat ge veel minder cross-browser problemen gaat tegengekomen. Het valt wel onder het mom beter voorkomen dan genezen ja.

Jerom · 1 sep 2010

Door vakantie-omstandigheden een tijdje niet meer kunnen zoeken op m'n probleem, vandaag er nog es aan gewerkt en vanaf nul begonnen (ga die vieze iframes buiten gooien).

Op Zita voetbalprono 2010-2011 staat de 'nieuwe' versie. In Firefox ziet het eruit zoals het moet, maar in IE is de verhouding binnen de tabel volledig om zeep (heb ik gecontroleerd via IE NetRenderer - Browser Compatibility Check -, omdat ik op Linux geen IE heb).

Ik veronderstel dat borders, paddings etc. anders worden geïnterpreteerd in IE... dus mijn CSS reset zal niet veel uitgehaald hebben. Iemand die me op weg kan helpen?

Jerom · 1 sep 2010

Op CSS Box Model las ik dat het er in IE anders kon uitzien maar dat dit kon opgelost worden door een Doctype toe te voegen. Maar dit heb ik al gedaan...

Eleven · 1 sep 2010

Aan je CSS en HTML te zien denk ik dat je gewoon de class "rechts" vergeten toe te voegen bent aan de rechtse kolom, je zou dit eventueel ook kunnen oplossen door de volledige tabel een width te geven. De foute (maar meer logische) implementatie van het box model van IE heeft hier niets mee te maken.

Overigens is die tabel al even vies als je iframes in dit geval, een tabel dient om data weer te geven, niet om voor de opmaak/indeling van een site te zorgen. Hiervoor gebruik je divs (of de fancy, meer semantische, nieuwe HTML elementen. Maar let dan wel op voor problemen met sommige browsers). En om kolommen te maken kan je jezelf best verdiepen in floats en het clearen ervan. Eventueel zou je kunnen gebruik maken van display: table, maar ook hier zit je weer met problemen in sommige browsers.

Jerom · 2 sep 2010

Dankje, Eleven, daar zat inderdaad het probleem. Ik weet dat tabellen niet echt daarvoor bedoeld zijn, maar dat zit er nog een beetje in van vroeger... als ik nog wat tijd vind ga ik me toeleggen op het gebruik van divs.

Ik ben ondertussen alweer een stapje verder. Nu ben ik aan het knoeien met de 'select'-boxes ("Ingeven" en daarna speeldag 6 kiezen, gebruiker en paswoord "nieuw"). Op de oude versie (Zita voetbalprono 2010-2011) staan ze in Firefox zoals ik ze wil, op de nieuwe (Zita voetbalprono 2010-2011) om de een of andere reden anders.

Waarschijnlijk is er iets in die CSS reset die hiervoor zorgt, maar ik vind niet direct wat

Archief - Klein layout-probleempje IE

Jerom

Legacy Member

Eleven

Legacy Member

BjoJn

Legacy Member

Jerom

Legacy Member

Zero Grav

Legacy Member

Jerom

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Jerom

Legacy Member

Jerom

Legacy Member

Eleven

Legacy Member

Jerom

Legacy Member