www.webdeveloper.com
Results 1 to 4 of 4

Thread: Positioning Divs problem in IE

  1. #1
    Join Date
    Nov 2011
    Posts
    3

    Positioning Divs problem in IE

    Hey guys,

    I have a website to create for my school. It should be tested to work both in Firefox and Internet Explorer.
    When I first read the assignment I was a little bit unattentive and I read Chrome instead of Internet Explorer, so I made my website to work in Chrome and Firefox( and it's really working in those 2). The way it displays in Internet Explorer is very unpleasent as some divs are one over the other, but is very difficult to modify something as it will effect some of the other pages which are displayed correctly.

    I must mention that my website uses only one CSS file along with a few embedded style sheets inside every page to personalize them.

    What would be the solution in this case?

    These are 2 screenshots of one of my page, one previewed in Chrome and one previewed in Internet Explorer.

    Chrome
    http://i43.tinypic.com/206mpmt.jpg

    Internet Explorer
    http://i42.tinypic.com/9pooxt.jpg


    HTML code:
    Code:
    <div id="mainContent">
      <div id="chooser">
        <a href="#gladiator" class="gladiatortransp"></a>
        <a href="#harrypotter" class="harrypottertransp"></a>
        <a href="#troy" class="troytransp"></a>
        <a href="#transformers" class="transformerstransp"></a>
        <a href="#avatar" class="avatartransp"></a>
          <img src="assets/separator.png" width="1020" height="2" alt="separator">
      </div>
    
      <div id="article1"> <img src="assets/gladiator.jpg" alt="A picture of Maximus from The Gladiator movie" width="400" height="250">
          <h2 id="gladiator">The Gladiator</h2>
          <p>This film has won 5 Oscars and possesses one of the most fascinating, gripping storyline, and it constitutes the first choice on my list of favorite movies. The commitment and determination of the main character, Maximus, was always a source of inspiration, and so it helped me overcome many obstacles. Although it is not equipped with remarkable special effects, the war, drama and passion atmosphere made it worthwhile watching.<br>
            <a href="#chooser">Choose another movie</a>
            <a href="http://www.fanpop.com/spots/gladiator"><img src="linkImages/fanpage.png" alt="fanpage"></a></p>
      </div>
      <div id="article2">
          <h2 id="harrypotter">Harry Potter</h2>
          <img src="assets/harry_potter_12.jpg" alt="A picture of the 3 most important characters from the first episode of Harry Potter" width="400" height="300">
          <p>Just a few words are enough to describe this entry: The movie I have grown with, the movie of my generation. With its stunning special effects and well-thought storyline, Harry Potter was a complete success from the first day of its launching. Everybody loved it, everybody dreamed of being like him, and that makes him memorable for me and for millions of other kids that grow up with it.<br><br><br><br>
            <a href="#chooser">Choose another movie</a>
            <a href="http://www.harrypotterspage.com/"><img src="linkImages/fanpage.png" alt="fanpage"></a></p>
        </div>
      <div id="article3">
        <h2 id="troy">Troy</h2>
          <img src="assets/troy.jpg" alt="Achile from the Troy Movie" width="400" height="300">
          <p>The movie that speaks for himself. It has a strong action, great actors, brilliant storyline based on reality, it has everything. Its thrilling changes of situation along with the battle scenes sets you up for a great viewer experience full of everything you need to enjoy the movie.<br>
    <a href="http://www.reelviews.net/movies/t/troy.html">"Troy is loosely (and I emphasize loosely) based on Homer's epic poem "The Illiad," which many educated viewers will have read once (probably in a high school literature class).</a>"<br><br>
            <a href="#chooser">Choose another movie</a>
            <a href="http://en.wikipedia.org/wiki/Troy_(film)"><img src="linkImages/fanpage.png" alt="fanpage"></a></p>
        </div>
      <div id="article4">
          <h2 id="transformers">Transformers</h2>
          <img src="assets/transformers.jpg" alt="Transformers official poster" width="400" height="270">
          <p>Thatís the kind of movie I would like to work on in the future although it requires an tremendous amount of work to get it done. The special effects let you speechless, the storyline of the trilogy is staggering and the output is just beautiful.<br>
            <a href="#chooser">Choose another movie</a>
            <a href="http://www.seibertron.com/"><img src="linkImages/fanpage.png" alt="fanpage"></a></p>
        </div>
      <div id="article5">
          <h2 id="avatar">Avatar</h2>
          <img src="assets/avatar.jpg" alt="Avatar movie poster" width="400" height="250">
          <p>Avatar it is told to be the movie that revolutionized the industry, setting a new standard among science fiction movies. It is by far the most visually dazzling movie Iíve ever seen, and in my opinion,itís the movie of the next generation. Every single shot is highly detailed and the technology used to make characters(50% human, 50% Computer Graphics) is unparalleled.<br>
            <a href="#logo">Back to top</a>
            <a href="http://www.avatar-movie.org/"><img src="linkImages/fanpage.png" alt="fanpage"></a></p>
        </div>
    </div>
    CSS Code:
    Code:
    #mainContent {
    	background-color: #FFF;
    	min-height: 300px;
    	width:1030px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-style:solid;
    	border-width: 1px;
    	border-color: #CCC;
    	position:relative;
    	-webkit-box-shadow: 0px 0px 10px #dcdcdc;
    	-moz-box-shadow:0px 0px 10px #dcdcdc;
    }
    #chooser {
    	margin: 5px;
    	float: left;
    }
    #article1 {
    	padding: 5px;
    	margin: 0px;
    	background-image: url(assets/separator.png);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    }
    #article1 a {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 0.9em;
    	font-weight: normal;
    	color: #333;
    	text-decoration: underline;
    	padding: 0px;
    	margin: 0px;
    }
    #article1 a:link {
    	color:#333;
    }
    #article1 a:hover {
    	color: #222;
    }
    #article1 a:visited {
    	color:#333;
    }
    #container #mainContent #article1 img {
    	overflow: auto;
    }
    #container #mainContent #article1 h2 {
    	float: right;
    	font-family: "Myriad Pro", sans-serif;
    	font-size: 4em;
    	font-weight: bold;
    	text-decoration: underline;
    	margin-top: -5px;
    	margin-right: 100px;
    	display: block;
    }
    #container #mainContent #article1 p {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	font-weight: normal;
    	padding: 5px;
    	width: 600px;
    	float: right;
    	position: relative;
    	bottom: 200px;
    	margin-top: 10px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    
    #container #mainContent #article1 p a img {
    	float: right;
    	margin-right: 20px;
    }
    #article2 {
    	padding: 5px;
    	margin-top: 20px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	background-image: url(assets/separator.png);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    }
    #article2 a {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 0.9em;
    	font-weight: normal;
    	color: #333;
    	text-decoration: underline;
    	padding: 0px;
    	margin: 0px;
    }
    #article2 a:link {
    	color:#333;
    }
    #article2 a:hover {
    	color: #222;
    }
    #article2 a:visited {
    	color:#333;
    }
    #container #mainContent #article2 img {
    	overflow: auto;
    }
    #container #mainContent #article2 h2 {
    	float: right;
    	font-family: "Myriad Pro", sans-serif;
    	font-size: 4em;
    	font-weight: bold;
    	text-decoration: underline;
    	margin-top: 20px;
    	margin-right: 120px;
    	position: relative;
    	bottom: 200px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    #container #mainContent #article2 p {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	font-weight: normal;
    	padding: 5px;
    	width: 600px;
    	float: right;
    	position: relative;
    	bottom: 250px;
    	margin-top: 10px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    #container #mainContent #article2 p a img {
    	float: right;
    	margin-right: 20px;
    }
    #article3 {
    	padding: 5px;
    	margin-top: 12px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	height: 310px;
    	background-image: url(assets/separator.png);
    	background-repeat: no-repeat;
    	background-position: bottom;
    }
    #article3 a {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 0.9em;
    	font-weight: normal;
    	color: #333;
    	text-decoration: underline;
    	padding: 0px;
    	margin: 0px;
    }
    #article3 a:link {
    	color:#333;
    }
    #article3 a:hover {
    	color: #222;
    }
    #article3 a:visited {
    	color:#333;
    }
    #container #mainContent #article3 img {
    	position: relative;
    	left: 0px;
    	top: -90px;
    	right: 0px;
    	bottom: 0px;
    	overflow: auto;
    }
    #container #mainContent #article3 h2 {
    	float: right;
    	font-family: "Myriad Pro", sans-serif;
    	font-size: 4em;
    	font-weight: bold;
    	text-decoration: underline;
    	margin-top: 15px;
    	margin-right: 0px;
    	bottom: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	left: 350px;
    	top: -20px;
    	right: 0px;
    	position: relative;
    }
    #container #mainContent #article3 p {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	font-weight: normal;
    	padding: 5px;
    	width: 600px;
    	float: right;
    	position: relative;
    	bottom: 340px;
    	margin-top: 10px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    #container #mainContent #article3 p a img {
    	float: right;
    	margin-right: 20px;
    	position: relative;
    	top: 30px;
    }
    
    }

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    For starters... is that all the HTML code? Where is the DOCTYPE declaration?
    http://htmlhelp.com/tools/validator/doctype.html
    Validate your page here:
    http://validator.w3.org/
    Validate, correct errors and let us take another look.
    And a link to the actual page is always the best.
    Best of luck,
    Eye for Video
    www.cidigitalmedia.com

  3. #3
    Join Date
    Nov 2011
    Posts
    3
    Hi,
    It's not the whole html code, the document itself has no errors, i've already validated it... i've only posted the defective part, that which doesn't work good.

    http://dai4.student.eda.kent.ac.uk/DW_site/ -> this is the link to the page...

    I have to get it done by tomorrow, so I will have an all-night thingy...hehe.

    Thanks,
    Dragos
    Last edited by Lancerlove; 11-14-2011 at 11:06 AM.

  4. #4
    Join Date
    Nov 2011
    Posts
    3
    All right, everything is solved now.

    The solution was to change every div float property to left or right depending on their position..
    When I did that, relative positioning was no longer necessary, it all flowed flawlessly.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles