473,746 Members | 2,311 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE and Firefox positioning different

The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
Can anyone see why this is happening? I can't seem to figure it out!
TIA
Jeff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Browse r Quirks</title>
<style type="text/css">

div.navmenu{
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
background-color:#e4e4e4;
position:absolu te;
left:5px;
top:60px;
height:800px;
width:200px;
padding:0;
border-left:1px solid gray;
}
div.content{
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
position:absolu te;
left:470px;
top:60px;
width:400px;
}

</style>

</head>

<body>

<div class="navmenu" >
Line A
</div>
</body>
</html>

Jul 21 '05 #1
17 14370
Els
pa*******@yahoo .com wrote:
The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
[snip]
border-left:1px solid gray;


If you take the border off, do FF and IE have equal left margin sizes?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: L.A. Guns - The Ballad of Jane
Jul 21 '05 #2
pa*******@yahoo .com wrote:
The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
Can anyone see why this is happening? I can't seem to figure it out! div.navmenu{ <...> border-left:1px solid gray;


There's your problem. IE and FF handle the display of borders differently.
Change the border width and watch how your spacing changes.

--
Tony Garcia
Web Right! Development
Riverside, CA
www.WebRightDevelopment.com
Jul 21 '05 #3
Thanks for the replies.. changing border width will not change the
margin problem - try it yourself with the code above. Firefox still
has has left margin of 4 px, IE has 5.

Jul 21 '05 #4
Els
pa*******@yahoo .com wrote:
Thanks for the replies.. changing border width will not change the
margin problem - try it yourself with the code above. Firefox still
has has left margin of 4 px, IE has 5.


Code above?

Please quote what you are replying to - it's easier for everyone.
Also, I don't feel like copy pasting someone else's code into my text
editor, save it somewhere where it occupies space, upload it to my
webserver, and then open a browser window to see it.

So.. how about /you/ do all that, and then we'll look :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone
Jul 21 '05 #5
Sorry about that, I'm being lazy. Here it is:

http://www.aztecfreenet.org/azaclub/

Simple Code. The left border helps show the margin difference. Again,
IE is 5 pixels, FF is 4. Changing doctype header between various
"quirks" and "standards" mode doesn't make any difference, AFAIK.

Jul 21 '05 #6
Els
pa*******@yahoo .com wrote:
Sorry about that, I'm being lazy. Here it is:

http://www.aztecfreenet.org/azaclub/

Simple Code. The left border helps show the margin difference. Again,
IE is 5 pixels, FF is 4. Changing doctype header between various
"quirks" and "standards" mode doesn't make any difference, AFAIK.


The difference you see is an optical illusion, caused by the light
grey part of the blue (in WinXP at least) border of the window.

It does look like a pixel difference, but if you change the value of
'left' to 4px, then 3, then 2, then 1px, you'll first see that the
margin does get smaller every time, and also, that even when it's set
to 1px, both browsers show a 1 pixel gap. Easier to see by setting the
background to red.
To make the gap disappear, both browsers need "left:0;".

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone
Jul 21 '05 #7
Els
pa*******@yahoo .com wrote:
OK - so this is a basic problem between the browsers.
I need the navigation bar to have a left margin. ( required pixel
perfect aligment)
Unfortunately I will have to go back to tables to make this happen!
Thanks anyway


You're misunderstandin g, and you're not quoting anything.
I said: it's an optical illusion. In reality, both FF and IE show the
same margin.
If you set left:5px, this margin is 5px.
If you set left:1px, this margin is 1px.

On a side note: it is (imnsho of course) completely and utterly
ridiculous to go back to table design because of 1px which isn't even
there.

If you want to go back to table design because you don't understand
CSS, fine. But don't blame it on the poor pixel ;-)

Now try and set a table, absolute positioned with "left:5px;" . My best
guess is that you'll see the same difference between FF and IE as you
are seeing now.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone
Jul 21 '05 #8
Els wrote:
pa*******@yahoo .com wrote:
OK - so this is a basic problem between the browsers. I need the
navigation bar to have a left margin. ( required pixel perfect
aligment)
Why? Do you think various visitors will be comparing their
experiences with each other? "Hey, did you see pasdecrap's web site?
There's a *missing pixel* on his home page!!!!!1!!"

That said, use the style
body { margin: 0; padding: 0 }
and see if your non-troubles go away.
Unfortunately I will have to go back to tables to make
this happen! Thanks anyway

Only because you don't know CSS.

[Els:] You're misunderstandin g, and you're not quoting anything.
Organization: http://groups.google.com
If you want to go back to table design because you don't understand
CSS, fine. But don't blame it on the poor pixel ;-)


Oh yeah, you already said that. <g>

--
-bts
-This space intentionally left blank.
Jul 21 '05 #9
Els
Beauregard T. Shagnasty wrote:
Els wrote:

You're misunderstandin g, and you're not quoting anything.


Organization: http://groups.google.com


I know, but that's not an excuse. Even if he can't find the slightly
obscured reply button that /does/ quote, (or so I've heard), he could
copy paste to make things easier for the rest of the Usenet population
:-)
If you want to go back to table design because you don't understand
CSS, fine. But don't blame it on the poor pixel ;-)


Oh yeah, you already said that. <g>


Indeed I did ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone
Jul 21 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

16
1444
by: Aurelio | last post by:
I'm developing a Web application with ASP.NET and C# and i'm having problems with Opera and FireFox. The controls don't appear situated correctly. Why?. What ca i do?
3
2362
by: Dave | last post by:
I am designing a web page using VS2003 ASP.NET. The page contains various DIVs (panels), one of which is in grid layout. The controls in this DIV render correctly in IE, but when using Firefox they are incorrectly positioned. VS sets the positioning of the controls to absolute, and because the DIV is to the right of another DIV Firefox (correctly, I suspect) positions the controls absolutely, which means they are too far to the left, while...
4
1309
by: News | last post by:
If I try the following div { position: relative; top: 50%; left: 40%; } It shows different in IE 6.0 , Firefox 1.5 and Netscape 8.0.4 .
20
1765
by: ridergroov | last post by:
I had this message previously in another group and I was told to try here. Hopefully someone can help out. Site was created in Dreamwaver MX 04 and I cna't figure out why there are so many errors or how to fix them. Original thread can be found here: http://groups.google.com/group/mozilla.support.firefox/browse_thread/thread/9f479425c897212b/106dbd2754e85252?q=looks+good+in+firefox&rnum=1#106dbd2754e85252 I've been working on our...
4
7815
by: TheCeej | last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things...
2
16418
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using to overlap correctly. You can see it on this page: www.creativekaysjewelry.com The images overlap exactly how I wanted and in the right position
8
2526
by: GA | last post by:
I have a weird CSS problem at: In firefox, the most recent version, none of the links work: header photo/logo is supposed to link, the buttons on the right are rollover links. I can't even select the text with my mouse in firefox! Everything is fine in IE..... http://copland.udel.edu/stu-org/foodscience/index.html
6
2155
by: dontwantspam | last post by:
Hello everyone, I'm working on this css site redesign http://www.maranathamalta.com/4given/testingmain.php I've tested on my machine running XP using Firefox 2.0.0.4, IE6 and IE7. It looks right on those browsers. However on some other machines running XP, MacOS and Linux, using firefox 2 and firefox 1.5, the cross graphic gets shifted down. On another Linux machine with firefox 2, the graphic looks right.. I'm trying to determine...
2
2449
by: agbee1 | last post by:
Hello: I've finally made the effort to ween myself from overly using tables and use CSS for my positioning. However, I am having a problem with my navigational menu properly aligning in Firefox, despite the fact that I have gotten a green light from W3. link to problem page: I didn't see a feature to attach my css code so I pasted sections of the code that dealt with layout and navigation below. Thanking you in advance,
0
8975
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look ! Part I. Meaning of...
0
8801
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9516
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9351
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9219
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6774
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6062
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4840
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3294
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.