MSIE Padding bij tabbladen

Status
Niet open voor verdere reacties.
L

Lapixx

Gebruiker
Lid geworden
2 mei 2008
Berichten
132
Hoi,

ik heb een layout met een aantal tabbladen gemaakt. Zie deze pagina. In FF en Safari ziet alles eruit zoals het hoort. Het witte blok (van de pagina die is geopend) sluit aan bij het content gedeelte van de pagina. Echter, wanneer je de pagina in MSIE7 bekijkt, word er een soort padding toegevoegd aan de onderkant, waardoor je nog een niet al te kleine groene balk onder de tabbladen hebt staan. Niet erg mooi dus en niet de bedoeling van de layout.

CSS nog eens doorgelopen maar vind niet wat er ontbreekt of mis is. Kan iemand me helpen?

Alvast bedankt.

HTML: 
<html>
	<head>
		<title>tabs</title>
		<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#headstroke{
background-color: #009933;
}
#header{
width: 800px;
background-color: #009933;
color: #FFFFFF;
font-family: Verdana;
padding-bottom: 25px;
text-align: left;
}
#header #title{
color: #FFFFFF;
font-size: 25pt;
padding: 30px;
padding-top: 40px;
}
#navigation{
margin: 0px;
padding: 0px;
}
#navigation li{
float: left;
list-style: none;
padding: 0px;
margin: 0px;
}
#navigation li.push{
float: right;
}
#navigation li a{
background-color: #009933;
color: #FFFFFF;
display: block;
text-decoration: none;
padding: 0px 15px 0px;
line-height: 25px;
}
#navigation li a:hover{
background-color: #006633;
color: #FFFFFF;
}
#navigation li a:active{
background-color: #666666;
color: #FFFFFF;
}
#navigation li a.opentab{
background-color: #FFFFFF;
color: #333333;
}
#navigation li a.opentab:hover{
background-color: #FFFFFF;
color: #333333;
}

		</style>
	</head>
	<body>

	<div id="headstroke">
	<center>
	<div id="header">
		
	<div id="title">Tabbladen</div>
		
	<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#" class="opentab">Projects</a></li>
	<li><a href="#">ROFL</a></li>
	<li><a href="#">Contact</a></li>
	<li class="push"><a href="#">Login</a></li>
	</ul>

	</div>
	</center>
	</div>

</body>
</html>
 
Laatst bewerkt:
ik weet niet zeker of dit het was, maar IE (ook 7) heeft nog wel eens problemen met dit soort dingen. In dat geval zal je een extra stijlblad moeten maken, speciaal voor ie7 met de conditional comments (google).


Wat je zowiezo eerst moet proberen is zoiets:
PHP: 
/* css */

#navigation
{
   margin: 0px;
   padding: 0px;
   /*toevoeging:
   maak m onderaan vast: */
   position: relative;
   bottom: 0px;
}
oid.
 
Laatst bewerkt:
position: relative;
bottom: 0px;

Doet toch niets? Relatief gezien 0px naar onder verplaatsen... of niet?
 
oh, my bad, ik bedoelde zoiets:
PHP: 
{
   position: absolute;
   top: 100px; /* 100 is even verzonnen, vul hier in: hoogte_groene_bar - hoogte_navigatie_bar */
}

zelf zou ik de conditionele comments gebruiken. Zijn een stuk makkelijker dan dit 'speciaal voor IE tweaken'
 
Laatst bewerkt:
Hmm, zal zo eens even proberen. Lijkt mij dat dit in principe goed in alle browsers moet werken. Alvast bedankt in ieder geval ;)

EDIT: Werkte niet helemaal, maar toen zag ik opeens de fout die ik op een bepaalde manier heletijd over het hoofd heb gezien: het #header element heeft de eigenschap padding-bottom: 25px. Die hoorde eigenlijk bij #header #title te staan.

Hoe dan ook, bedankt voor je hulp!

(off: en nog bedankt voor de toevoeging aan de credits bij je jTile engine)
 
Laatst bewerkt:
Heh, no prob - ben ondertussen druk bezig met een nieuwere versie.
 
Laatst bewerkt:
Oke, ik zal er zo af en toe eens naar kijken ;)

Overigens was mijn vraag toch niet helemaal opgelost.

Probleem is als volgt: #headstroke is 100% breed, en #header slechts 800px. Dit zorgt ervoor dat de pagina in principe 800px breed is, maar dat de blauwe streep wel mooi doorloopt. Wanneer de navigatiebalk onder #header staat krijg je buiten de 800px een witte rand te zien (of, liever gezegd, GEEN blauwe rand) omdat die navigatiebalk dus ook maar 800px breed is.

Daarom is er een padding van 25px (de hoogte van de navigatiebalk) toegevoegd, die in FF, Chrome en Safari achter de navigatiebalk doorloopt, en het goede effect maken. In MSIE lijkt de navigatie echter niet te zweven maar echt vast te zitten, waardoor de padding ONDER de balk komt, en de navigatie balk dus te hoog staat.

Dat is dus een beetje het probleem. Heeft MSIE geen juiste Float support of iets dergelijks? Of kan ik dit misschien op een andere manier oplossen?
 
Ik heb m, zo:
PHP: 
//css
#header{
   margin: 0px auto 0px auto;
   width: 800px;
   font-family: Verdana;
   text-align: left;
   border: 1px dotted #0f6;
   overflow: hidden;
}
(heb even wat gestript met de stijl qua kleur etc.)

Het idee is dat er een overflow: hidden; is bijgekomen, en de padding-bottom: 25px; weg is. Dat overflow-hidden is een truckje om te zorgen dat het allemaal (container) meerekt, ook bij floating divs :)
 
Laatst bewerkt:
Geweldig :) Werkt nu inderdaad goed.

Overigens, is dit trucje ook een trucje die hoort te bestaan? Of is dit een (soort van) bug die bij de huidige browsers zit?

Bedankt in ieder geval.
 
geen idee. Zover ik weet werkt het echter wel in Firefox, Opera, Safari, IE, en Chrome, dus het zal wel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan