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.
<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>
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.
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.
Reply With Quote
Bookmarks