css probleem ie VS ff - Softwareontwikkeling

vrijdag 10 oktober 2008 14:28

Acties:

Verwijderd

Topicstarter

Hallo ik zit hier een tijdje te zoeken op een probleem dat ik heb met css en het correct positioneren van div via css. In internet explorer ziet alles er ok uit,.. Als ik de pagina opendoen met fire fox ziet het er anders uit,...

--> De div hoofd wordt in fire fox bovenop de div haar2 geplaatst. En als mijn denkpiste correct is(een float:left; op haar2 die verkregen wordt doorovererving omdat haar2 zich in een andere div zich bevindt) normaal moet hoofd links naast haar2 komen te staan,...

Css en html is tamelijk nieuw voor mij en er is vast en zeker iets waar ik constant over zit te kijken, maar ik vind het niet (anders zou ik er niet over kijken

) ,... kan er hier iemand mij helpen?

Syntax:

HTML: vraag.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>vraagje</title>
<link href="Vraag.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
 <div class="haar" id="haar1"></div>
 <div class="haar" id="haar2"></div>
 <div class="hoofd" id="vrouw_hoofd"></div>
</div>
</body>
</html>

Syntax:

Cascading Stylesheet: vraag.css

 
 div div{
  position: relative;
  border-style: none;
  float: left;
  }
  
  div .haar {
  background-color: #603913;
  }
  
  #haar1{
  float: none;
  width: 80px;
  height: 20px;
  margin-top: 35px;
  }
  
  #haar2{
  width: 30px;
  height: 70px;
  }

  div .hoofd{
  float: none;
  background-color: #c69c6d;
  }
    
  #vrouw_hoofd{
  width: 55px;
  height: 70px;
  }

[ Voor 13% gewijzigd door Verwijderd op 10-10-2008 15:50 ]

vrijdag 10 oktober 2008 15:29

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Begin eens even eerst met je code tussen code tags te zetten (gebruik daarvoor de Afbeeldingslocatie: http://tweakimg.net/g/forum/images/icons/edit.gif

Afbeeldingslocatie: http://tweakimg.net/g/forum/images/icons/edit.gif

knop) en daarna even een kijkje te nemen in onze WEB Quickstart en Algemeen beleid. Het is hier niet de bedoeling dat je een lap code dumpt en dat wij dan wel even gaan zitten staren waar de fout zit; aan "Als ik de pagina opendoen met fire fox ziet het er anders uit" hebben we dus geen drol. We zien graag omschreven wat er dan niet goed is en daarbij horen we ook graag wat je zelf al geprobeerd, gezocht en gevonden hebt en wat daar dan niet aan werkte. GoT is geen persoonlijke helpdesk of afhaalbalie voor kant-en-klare oplossingen (zie ook Kan iemand even...?)

En ondanks de misschien wat stroeve kennismaking desalniettemin welkom op GoT en een fijne tijd gewenst

[ Voor 5% gewijzigd door RobIII op 10-10-2008 15:32 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 10 oktober 2008 16:00

Acties:

Verwijderd

Topicstarter

Het was ook niet mijn bedoeling voor een kant en klare oplossing te verkrijgen,... Ik zou gewoon graag weten waar mijn denkfout zit. Daarom heb ik ook niet heel de code gepost.

Het totaalresultaat stelt een vrouw en een kind voor (werkje voor school). Dit heb ik eerst gemaakt via obsolute positioning, dit werkte wel in beide browsers.Daarna heb ik heel de code proberen om te zetten naar een relative postioning, gebruik makende van floats.Heel de code werd correct weergegeven in internet explorer (in internet explorer heb ik mijn code constant gecheckt) tot dat ik de pagina open deed in firefox, waar deze een andere weergave toonde. In het voorbeeld dat ik aangeef, zet fire fox de div "vrouw_hoofd" over de div "haar2".

vrijdag 10 oktober 2008 16:26

Acties:

Da Weef

Wat wil je precies bereiken?

Anyway, als je floats gebruikt is het beter om die consistent te gebruiken. In jouw geval wil dat zeggen alles links laten floaten, en waar je een div niet ernaast maar eronder wilt hebben die div clearen. In jouw geval dus alle divs links laten floaten en dan de div haar2 laten clearen (clear:both;).

Nu is de class hoofd geen float en plaatst FF die over de div haar2 heen.

.

vrijdag 10 oktober 2008 20:32

Acties:

Verwijderd

Topicstarter

Da Weef schreef op vrijdag 10 oktober 2008 @ 16:26:

Anyway, als je floats gebruikt is het beter om die consistent te gebruiken. In jouw geval wil dat zeggen alles links laten floaten, en waar je een div niet ernaast maar eronder wilt hebben die div clearen. In jouw geval dus alle divs links laten floaten en dan de div haar2 laten clearen (clear:both;).

Nu is de class hoofd geen float en plaatst FF die over de div haar2 heen.

Aah merci, ik had daar al meer twee dagen mijn hoofd over gebroken,cursussen geherlezen,... waarom de ene browser andere dingen toonde dan de andere,...
Ik begrijp nu iets beter hoe floats juist werken. Dit was mijn opzet (de html blijft hetzelfde):

Syntax:

Cascading Stylesheet: vraag.css

 
 div div{
  position: relative;
  border-style: none;
  float: left;
  }
  
  div .haar {
  background-color: #603913;
  }
  
  #haar1{
  float: none;
  width: 80px;
  height: 20px;
  margin-top: 35px;
  }
  
  #haar2{
  width: 30px;
  height: 70px;
clear:both;
  }

  div .hoofd{
  background-color: #c69c6d;
  }
    
  #vrouw_hoofd{
  width: 55px;
  height: 70px;
  }

Dit werkt nu (normaal gezien) correct in internet explorer en in fire fox!