The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Huge difference between IE and FF
Henkeuh100
post Mar 27 2010, 11:23 AM
Post #1





Group: Members
Posts: 4
Joined: 27-March 10
Member No.: 11,504
Dear forum users,

before I posted this topic, I have been busy for 3 days to find out how to solve the problem, and I really have NO idea.
I really hope you can help me out with this. The problem:

I am making a website with CSS. Everything went OK, but then I saw the difference between Internet Explorer and Firefox.
In Internet Explorer, things are on the right place, but when I open my site in Firefox, the menu has been moved, some
images has been moved and the screen is way too large. I searched for a solution everywhere.

The website is: www.henklast.nl/rijschool

My css:

CODE

body {
  background-color: 666666;
}

#les {
    position:relative;
    left: 1240px;
    bottom: 1180px;
}

#header {
    position:relative;
    left: 325px;
    bottom: -60px;

}
#autosmall {
    position:relative;
    left: 1150px;
    bottom: -150px;
}

#motorsmall {
    position:relative;
    left: 1150px;
    bottom: -225px;
}


#textbg {
    position:relative;
    left: 326px;
    bottom: 300px;
}


and my HTML:

CODE

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>*****</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="header"><img src="header.png"></div>

<div id="autosmall"><img src="autosmall.jpg"></div>

<div id="motorsmall"><img src="motorsmall.jpg"></div>

<div id="textbg"><img src="achtergrond.jpg"></div>

<div id="les"><img src="kleinl.gif"></div>



<DIV STYLE="position:absolute; top:335px; left:580px; width:200px; height:25px">
<CENTER><FONT SIZE="+2" COLOR="000000">
<b>Welkom!</b>

</FONT></CENTER>
</DIV>

<DIV STYLE="position:absolute; top:400px; left:350px; width:700px; height:200px">
<CENTER><FONT SIZE="+1" COLOR="000000">
*****

<p>*****.</p>
<p>&nbsp;</p>
<p>Hopelijk tot snel!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</CENTER>


</FONT><FONT COLOR="000000">
<p align="center"><i>*****</i></FONT></DIV>

<script SRC="menu.js"></SCRIPT>

</body>

</html>


Many thanks in advance for your help! When further information is required, please tell me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 27 2010, 12:19 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
For starters, the online tools report markup and CSS errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
http://jigsaw.w3.org/css-validator/validat...g=1&lang=en

You have no doctype declaration, so browsers are using quirks mode:
http://hsivonen.iki.fi/doctype/
http://web.archive.org/web/20080329005114/...iki.fi/doctype/

FWIW, I see pretty much the same thing in all my browsers: Firefox, Chrome, Safari, and Opera.

If you specify distinct background colors for your div elements, then it will be easier to see what is going on. In particular: div#autosmall div#motorsmall div#les
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Henkeuh100
post Mar 27 2010, 12:53 PM
Post #3





Group: Members
Posts: 4
Joined: 27-March 10
Member No.: 11,504
Thank you for your reply, I really appreciate it.

I've read all the errors, but I still don't see which error could cause the difference between IE and FF. In Firefox for example, you should see the menu is not exactly under the image, but there are just a few pixels between the picture and the menu. In Internet Explorer, there is no space between them. And in Firefox you can scroll horizontally, and that's no problem in IE.

Thank you for your help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 27 2010, 01:17 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
You'll find out when you fix the errors. happy.gif

It isn't necessarily the errors that cause the problem, but you can't know that until you've fixed them. And put a doctype on so you get the page out of Quirks Mode.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Henkeuh100
post Mar 27 2010, 02:30 PM
Post #5





Group: Members
Posts: 4
Joined: 27-March 10
Member No.: 11,504
Thanks for the tip for the doctypes, now the result in IE and FF is almost the same, I'm really happy with it!

I'm trying to fix the errors now (for a beginner this is really the same as Chinese, like "ALT not specified etc."), , but there's still one problem. There is still a horizontally scroll, the webpage is far too wide. Don't know how to fix it.

Many thanks for your help so far!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 27 2010, 02:55 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Add this to your style sheet and you can see what causes that.
CODE
#les,#autosmall,#motorsmall
{ border: 5px dotted red }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Henkeuh100
post Mar 27 2010, 03:13 PM
Post #7





Group: Members
Posts: 4
Joined: 27-March 10
Member No.: 11,504
Wow, indeed. They are large too wide. I added a new width line to my css, for each image. Problems fixed now. Many thanks!

There are still small differences in positions of the menu and images, especially on other computers.
Maybe that will be solved later.

Thanks for your help.

This post has been edited by Henkeuh100: Mar 27 2010, 03:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eduby
post Apr 6 2010, 10:58 AM
Post #8





Group: Members
Posts: 9
Joined: 30-March 10
Member No.: 11,528
One of the reasons it can show up different on different computers is because of the screen resolution. A page is going to look different shown in 1024x768 from 1280x960 for example. All you can do it try to make it look okay with as much as possible, I think someone would go crazy trying to make it flawless on all browsers and all resolutions.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 08:12 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC