Website wil niet in IE en FF

Snel eens gekeken in Firefox en er is geen hoogte gedefinieerd. Voeg gewoon height:250px toe en dat zou moeten werken want normaal gezien veranderd de hoogte niet? Anders kun je ook nog altijd media queries gebruiken om dit probleem op de lossen als de hoogte verschilt per scherm.

Edit: de foto gaat nu onder de bovenste. Hoe je dat moet oplossen weet ik niet. Want in totaal gebruik je 3 foto's?

Wanneer ik een hoogte definieer dan wordt het statisch en het moet dynamisch zijn (responsive).
Media queries lijken mij hier niet de oplossing, gezien het in Chrome "gewoon werkt".

Het zit als volgt in elkaar:

div.logo -> houten achtergrond
- div.slider-wrapper
-- div#header-line
--- img -> golf met hout aan de bovenkant, onderkant is transparant
-- div.nivoSlider
--- img -> de slider afbeeldingen

Ofwel:

<div class="logo">
	<div class="slider-wrapper">
		<div id="header-line">
			<img src="golf.jpg" alt="">
		</div>
		<div id="slider" class="nivoSlider">
			<img src="slide1.jpg" alt="">
			<img src="slide2.jpg" alt="">
			<img src="slide3.jpg" alt="">
		</div>
	</div>
</div>

Met de CSS:

.logo {
	background: url(hout.jpg) center;
}

.slider-wrapper {
	max-width: 1200px;
	margin: auto;
}

#header-line {
	position: absolute;
	z-index: 999;
}

#header-line img {
	max-height: 249px;
}

.nivoSlider img {
	position: absolute;
	display: none;
}

Het gaat dus fout met "#header-line img" waar ik een max-height opgeef. Chrome snapt dat deze dus verkleind moet worden wanneer het venster kleiner wordt, de andere browsers helaas niet.

Ik kan natuurlijk wat gaan "hacken" met JS maar lijkt me dat dit enkel met CSS te regelen is?

Nogmaals gekeken. Ik had m'n scherm niet genoeg verkleint en dus bleef de groote 250px. Maar zou je geen transparant plaatje kunnen gebruiken i.p.v. het plaatje die buigt en dan een buigende plaatje toevoegen met background?

#header-line {
	position:absolute;
	z-index:999;

	background:url("/wordpress/wp-content/themes/roots/assets/img/header-line.png") no-repeat fixed center top transparent;
	width:100%;
}

Dan heb je wel het probleem dat '{title}' te groot wordt op kleine schermen. Dit is waarschijlijk ook niet de beste oplossing maar ik ben dan ook geen CSS guru.

Sorry, ik snap je suggestie niet helemaal.

Wel nog even aan de hand van je code gespeeld door de afbeelding (div#header-line img) als achtergrond in te stellen i.p.v. in een img tag. Helaas mocht dit ook niet baten.

Zou je de bedrijfsnaam willen verwijderen uit je bericht? Wat betreft de grootte daarvan, dit heb ik al afgevangen middels media queries zodat deze niet zichtbaar is bij kleinere schermformaten.

<div id="header-line">
	<img src="transparant" alt="Hier een beschrijving?" />
</div>

Dan moet je wel nog background met fixed gebruiken zoals daarnet al beschreven. Dit is geen mooie oplossing, maar wel de enige zonder javascript. Natuurlijk kan ik verkeerd zijn en zijn er misschien mooiere oplossing zonder javascript.

Toch snap ik je nog steeds niet terwijl ik je hulp gigantisch waardeer!

Wat nu zegt heb ik toch al?

<div id="header-line">
    <img src="golf.jpg" alt="">
</div>

Waarbij golf.jpg deze afbeelding is.

Wat je in je eerdere reactie aangeeft is dus die afbeelding als achtergrond bij "div#header-line" instellen i.p.v. "div#header-line img". Wat ik zojuist geprobeerd heb maar hetzelfde doet.

golf.jpg moet een transparante afbeelding zijn. Daarnaast moet je wel nog altijd voor #header-line de background met css instellen. Dat werkte bij mij in Firefox. De transparante afbeelding moet dan wel 250px hoog zijn. (Maximale hoogte van de slider)

Maar nogmaals, of dit de beste oplossing is weet ik niet. Anders moet je even denken aan $(window).resize(function() { }); aangezien jQuery al nodig is voor de slider.

Ik heb even gespiekt in Nivo Slider, het probleem wordt veroorzaakt doordat de afbeelding die niet mee werkt als "position", "absolute" heeft. Dat is bij de slides ook het geval. Daar kwam ik het volgende stukje tegen:

display: block !important;
position: relative !important; 
width: 100% !important;

Daar even mee gespeeld met als simpel resultaat:

#header-line img {
	max-height: 249px;
	width: 100% !important;
}

En het lijkt te werken! Mocht iemand nog in een aantal verschillende browsers willen testen, graag!