Float-bugg?

Hej igen!

Nu har jag stött på en till misstänkt bugg i IE på mac (har inte kollat på pc än).

Trots att #header har en fast bredd (980px) och samtliga element (div och a) som ligger floatade däri tillsammans också har en bredd på 980px så trollar IE på mac bort sista float-elementet (#menuright). Antagligen för att den inte tycker att den får plats. Jag testade att ändra bredden på #menuright och jag var tvungen att gå från 46px till 28px innan #menuright behagade att dyka upp på sidan. Dock halv såklart. Har IE någon osynlig 18px mariginal som ligger och spökar? Jag har sökt runt, men inte hittat något som tar upp precis det här än. Det ser bra ut i alla andra läsare som jag har provat till mac...

#header {
	width:				980px;
	height:				79px;
	margin-top:			51px;
	margin-bottom:			23px;
}

#logo {
	width:				310px;
	height:				79px;
	background:			url(../images/seist.jpg) no-repeat;
	float:				left;
}
#members {
	width:				159px;
	height:				79px;
	display:			block;
	background:			url(../images/members.jpg) no-repeat;
	float:				left;
}
#listen {
	width:				111px;
	height:				79px;
	display:			block;
	background:			url(../images/listen.jpg) no-repeat;
	float:				left;
}
#gallery {
	width:				114px;
	height:				79px;
	display:			block;
	background:			url(../images/gallery.jpg) no-repeat;
	float:				left;
}
#guestbook {
	width:				127px;
	height:				79px;
	display:			block;
	background:			url(../images/guestbook.jpg) no-repeat;
	float:				left;
}
#contact {
	width:				113px;
	height:				79px;
	display:			block;
	background:			url(../images/contact.jpg) no-repeat;
	float:				left;
}
#menuright {
	width:				46px;
	height:				79px;
	background:			url(../images/menuright.jpg) no-repeat;
	float:				left;
}

[...]

<div id="header">

  <div id="logo"></div>
  <a href="#" id="members"></a>
  <a href="#" id="listen"></a>
  <a href="#" id="gallery"></a>
  <a href="#" id="guestbook"></a>
  <a href="#" id="contact"></a>
  <div id="menuright"></div>

</div>

Taxi!

Förslag? :)

#menuright {
	width:				46px;
	[b]/*\*//*/ width:			28px; /**/[/b]
	height:				79px;
	background:			url(../images/menuright.jpg) no-repeat;
	float:				left;
}

Det funkade inte som jag hade tänkt mig. Jag vet inte vad alla /* gör men IE satte bredden till 28px medans safari körde på 46px. Det är iofs bättre än att IE inte visar någonting, men tanken är ju att jag ska kunna ha 46px i alla läsare utan att det buggar sig. Alternativet tabeller finns ju alltid, men det måste ju finnas en lösning på det?

Det mellan /*\*//*/ och /**/ visas bara för IE/Mac. Det är en tolkningsbugg i den webbläsaren ("\" borde inte vara ett magiskt tecken inuti kommentarer).

Jag sitter inte vid en Mac just nu så jag kan inte testa, men du kan alltid experminentera med att mata IE/Mac med olika egenskaper inuti den konstiga kommentaren (padding kanske?). Om inte annat skulle jag inte oroa mig så mycket om en webbläsare som inte längre stöds av dess tillverkare. :)

Ja det är sant. Man kan inte alltid få som man vill. Ska mixtra lite med inställningarna för IE/mac och se om det går att få lite bättre iaf.

Vilka fler sådana där kommentars-grejer finns det för att bara skriva till en viss läsare?

bassebhu skrev:

Vilka fler sådana där kommentars-grejer finns det för att bara skriva till en viss läsare?

http://www.quirksmode.org/css/csshacks.html