473,848 Members | 1,590 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

DIV positioning fine in Firefox but out of place in IE

2 New Member
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 that I have already tried:

What I'm trying to do:
Basically, I'm trying to lower all the tables in Myspace and place my own DIVs in the new leftover space above them.

What keeps happening:
In Firefox, everything is perfect so far. In IE, however, my DIVs are way out of place from the top.

What I believe the problem is:
Well, after countless hours of looking into this, it seems IE is treating my created DIVs as though they are one of the Myspace tables, and is lowering their position on the page as well. The horizontal positioning from the left seems okay, though. See for yourself in both browsers:

http://www.myspace.com/theceejus (links don't seem to be working with this site)

The CSS (what I think the problem is in bold)
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. .extras1 { background-image:url("http://s9.imagehosting.us/uploadpoint/imagehosting_upload_storage/nouser_1636/T0_-1_1636270.gif");  
  3. border:5px solid; border-color:000000;
  4. width:700px; height:366px;
  5. position:absolute; z-index:2; left:156; top:142; !important;}
  6.  
  7. .extras2 {
  8. background-image:url("http://img101.imageshack.us/img101/1681/ceejsigek6.jpg");  
  9. border:5px solid; border-color:000000;
  10. width:350px; height:250px;
  11. position:absolute; z-index:2; left:156; top:535; !important;}
  12.  
  13. .extras3 {
  14. background-image:url("http://img47.imageshack.us/img47/2029/cjwelcomeve9.gif");  
  15. border:5px solid; border-color:000000;
  16. width:350px; height:250px;
  17. position:absolute; z-index:2; left:506; top:535; !important;}
  18.  
  19. .extras4 {
  20. background-color:transparent;
  21. border:1px solid; border-color:000000;
  22. width:274px; height:146px;
  23. z-index:3; left:546; top:600;
  24. position:absolute; text-align:justify; !important;}
  25.  
  26. .mygen { Background Properties }
  27. table, tr, td { background-color:transparent; border:none; border-width:0;}
  28.  
  29. body {
  30.     background-image: url('http://img220.imageshack.us/img220/233/ceejsidezn1.gif');
  31.     background-attachment: fixed;
  32.     background-repeat: no-repeat;
  33.     background-position: center left;}
  34. span.blacktext12 {
  35.  scrollbar-face-color:FFFFFF;
  36.  scrollbar-highlight-color:FFFFFF;
  37.  scrollbar-3dlight-color:000000;
  38.  scrollbar-shadow-color:FFFFFF;
  39.  scrollbar-darkshadow-color:000000;
  40.  scrollbar-arrow-color:FFFFFF;
  41.  scrollbar-track-color:FFFFFF;
  42.   }
  43.  
  44. .mygen { Table Properties }
  45. table table table table {border:0px;}
  46. td.text table, td.text table td {width:400px; padding:0px;}
  47. td.text table table table table, 
  48. td.text table table table table td {width:0px;}
  49. table table {position:relative; bottom: -654px;}
  50. table table table {position:static;}
  51. table table { border: 0px }
  52. table table table table{border:0px}
  53. table table td.text table td.text table table {background-color:transparent;}
  54. table table table {
  55.  border-style:solid;
  56.  border-width:5px;
  57.  border-color:000000;
  58.  background-image:url('http://img119.imageshack.us/img119/8806/grid2ju3.gif');
  59.  background-repeat: repeat;
  60.  background-attachment: fixed
  61.       }
  62.  
  63. .mygen { Text Properties }
  64. table, tr, td, li, p, div { font-family:tahoma; color:000000; font-size:9px;     } 
  65. .btext { font-family:arial; color:000000;  text-decoration:overline;      } 
  66. .blacktext10 { font-family:courier new; color:CCCCCC;      } 
  67. .blacktext12 {   font-size:0px;     } 
  68. .lightbluetext8 { font-family:impact; color:000000; font-size:10px; font-weight:normal; border:1px solid;     } 
  69. .orangetext15 { font-family:tahoma; color:CC4422; font-size:10px;     } 
  70. .redtext { font-family:verdana; color:CC8822; font-size:12px; font-weight:bold;     } 
  71. .redbtext { font-family:verdana; color:CC8822; font-size:12px; font-weight:bold;     } 
  72. .text { font-family:courier new; color:AAAAAA; font-size:12px;     } 
  73. .whitetext12 { font-family:tahoma; color:CC4422; font-size:10px;     } 
  74. a:active, a:visited, a:link { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline;     } 
  75. a:hover { font-family:tahoma; color:CC8822; font-size:9px;     } 
  76. a.navbar:active, a.navbar:visited, a.navbar:link { font-family:tahoma; color:000000; font-size:9px;     } 
  77. a.navbar:hover { font-family:tahoma; color:FFFFFF; font-size:9px;     } 
  78. a.redlink:active, a.redlink:visited, a.redlink:link { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline;     } 
  79. a.redlink:hover { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline;     } 
  80. .nametext { font-family:verdana; color:EECC22;      } 
  81.  
  82. .mygen { Miscellaneous Properties }
  83. a:hover img { filter:Blur(Add = 0,  Direction = 225,  Strength = 10);}
  84. tr {background:transparent;}
  85. body table div font a, body table div div {visbility:hidden;}
  86. body table table div font a, body table table div div {visibility:visible;}
  87. </style>
  88.  
  89. <style type="text/css">
  90. table table table td {vertical-align:top;}
  91. span.blacktext12 {
  92. background-color:transparent;
  93. background-image:url("http://img215.imageshack.us/img215/1360/myspacebanner4cf0.gif");
  94. background-position:center center;
  95. font-size:0px; letter-spacing:-0.5px;
  96. width:400px; height:100px; display:block; }
  97. </style>
  98.  
  99. <style>
  100. .{hiding the bottom links}
  101. table tr td div div {visibility:hidden;border:0px!important;background-color:transparent;}
  102. </style>
  103.  
  104. <style>
  105. .a {hide copyright}
  106. table div font {visibility:hidden;}
  107. table table div font {visibility:visible;}
  108. </style>
  109.  
  110. <style>body div table tbody tr td font {visibility:hidden;}
  111. .navbar {visibility:visible;}
  112. .navbar font {visibility:hidden;}</style>
  113.  
  114. <style>body div table tbody tr td font {position:absolute; top:120px;
  115. left:50%;
  116. margin-left:-318px;
  117. z-index:9}
  118. .navbar {visibility:visible;}
  119. .navbar font {visibility:hidden;}</style>
  120.  
  121. <style>
  122. table table td {width:10px;}
  123. div table table td, table table table td {width:auto;}
  124. table table img {display:none;}
  125. table table table img {display:inline;}
  126. td.text td.text table table div,
  127. </style>
  128.  
  129. <style>
  130. div table table a.navbar {visibility:visible; !important;}
  131. </style>
  132.  
  133. <div class="extras1">
  134. </div>
  135.  
  136. <div class="extras2">
  137. </div>
  138.  
  139. <div class="extras3">
  140. </div>
Is there an extra tag I can add in there to make IE keep the positioning the way I set it to, or is there no possible solution to this mess?

Other things I have tried
- Setting a doctype. Basically, you can't. You have to work with what myspace gives you, which is basically no doctype.
- Setting the repositioning of the tables to absolute instead of relative. Setting it to anything else but relative messes the positioning up even more.
- Leaving out a position. That screwed up my positioning more than just about anything I tried.
- Putting the position tag inside the DIV itself rather than in the CSS styles. That basically didn't do anything. It had the same effect.
- Setting the left tag to 50% and the top tag to 0%, then using margin-top and margin-left to position it from there. That still didn't fix my IE problem, not to mention the effect was still no different.
- I can't position them as plain images because I plan on putting text over the one that says "Welcome", which will be the extras4 div that I decided not to show just yet.
- Placing an "!important ;" tag inside the tags. That did absolutely nothing.
- Using javascript to fix the problem. You can't. Myspace filters it.

With that said, I know for a fact the solution to this must be fairly simple, if there is one. It may look like a complex problem in text, but it's really not. I just have no clue what so ever on how to fix this. If you know the answer, then hands down... you are a genius with html/css. Thanks beforehand for any suggestions BTW. Again, I would really appreciate any assistance.
Oct 2 '06 #1
4 7822
drhowarddrfine
7,435 Recognized Expert Expert
Will try and answer some of your questions.
1) IE will never perform correctly without a proper doctype. So this is a big hangup with myspace and other free web sites which tend to throw a wrench into proper web development. Right now, IE is in 'quirks' mode.
Oct 2 '06 #2
drhowarddrfine
7,435 Recognized Expert Expert
Will try and answer some of your questions.
1) IE will never perform correctly without a proper doctype. So this is a big hangup with myspace and other free web sites which tend to throw a wrench into proper web development. Right now, IE is in 'quirks' mode.
2) Using tables for layout is a no-no. I've never done it that way so I can't help with that.
Oct 2 '06 #3
drhowarddrfine
7,435 Recognized Expert Expert
IE tends to screw up margins and padding on borders so try adding *{margtin:0;pad ding:0} to your css.
Oct 2 '06 #4
TheCeej
2 New Member
Will try and answer some of your questions.
1) IE will never perform correctly without a proper doctype. So this is a big hangup with myspace and other free web sites which tend to throw a wrench into proper web development. Right now, IE is in 'quirks' mode.
2) Using tables for layout is a no-no. I've never done it that way so I can't help with that.
Well, I'm not actually creating any tables. I'm just moving the Myspace tables further down the page, and adding in DIVs where they originally were. Many people choose to hide these myspace tables, then make the entire thing with DIVs. That always works. However, I don't wanna get rid of those tables, so I'm just moving them down with that part of the CSS that states:

Expand|Select|Wrap|Line Numbers
  1. table table {position:relative; bottom: -654px;}
  2. table table table {position:static;}
The problem is that in IE, that little bit of coding is also bringing my DIVs further down the page along with the tables. In Firefox, the DIVs are unaffected by this. So basically, what IE is obviously doing is treating my DIVs as though they are tables with that coding listed above. I'm just thinking there must be something else I can add in my coding to prevent IE from bringing the DIVs down with the tables. A code to seperate them more or less. Any ideas? BTW, I really appreciate the help.
Oct 2 '06 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

21
2824
by: Applebrownbetty | last post by:
Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a completely CSS positioned page, and was wondering if any resident CSS guru might quickly be able to find the problem(s). Thank you. In IE, the page looks how I want it to look (picture below): www.sunbadgeco.com/sunmetal/ie.jpg In Mozilla Firefox, somehow it's not quite right (pic below): www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
5
3956
by: ogdenmd | last post by:
I want to give the user the abillity to add extra fields as needed. I've got it working in IE (surprsingly this works in IE but not in Firefox), however, basically I have an input field for a paragraph. If the user decides they want two paragraps then they can click an image and a new textarea field is show that allows them to add another paragraph. The fields are named as an array for example name="para" the next one would then be...
1
1509
by: pyropyro78 | last post by:
ok heres the problem when fightersguildss.tripod.com is viewed in firefox all the stuff is placed on left but i typed in <br><table style="Position:absolute; top:300; left:295;"><ilayer name="scroll1"><br><div id="scroll3" style="width:200; height:130;overflow:auto"> <center><br><font color=red><b>AS ONE WE FALL<p>TOGETHER WE RULE</b> </table></font><br></table> ^ just an eg from my site.
3
2400
by: gstick | last post by:
I am missing something about css positioning if Firefox is always right. I have simplifed some code that I've tested in both browers. Firefox responds to the left position code but not the top. IE responds to both. Would someone point out where I have gone wrong? The Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Home</title> <meta...
3
3064
by: goldenboy651 | last post by:
My Positioning in IE 6 is exactly the way I want it, but when I view the page in my firefox browser things are out of place. When I try and change the css my IE page moves, but the firefox doesn't. Any help would be greatly appreciated. I have set the margin and padding to 0. I am new to html and css so I don't know what else to try. Thanks I have a doc type... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
5
4192
by: Cate Archer | last post by:
I'm trying to position images using CSS. I put inline style code in the <imgtag. Why does this line of code work in IE7 but not in Firefox 2.0? Anybody got a better way? <img height="160" width="160" style="position=relative; top=20; left=20;" src="images/bomb.jpg">
1
8118
by: awolfe76 | last post by:
The xml and javascript are below. IE finds everything fine, Firefox gives the following error - xmlDoc.getElementsByTagName("lab_name") has no properties on this line - alert(xmlDoc.getElementsByTagName('lab_name').childNodes.nodeValue); I am using Firebug to help me debug. When I look at the DOM right after the page loads the childNodes part of my xmlDoc tree is empty, this explains why I get the error. But why is it empty????!!!!! It...
7
1775
by: Slimane | last post by:
Hello, We have a classic problem concerning DIV positioning in Firefox. We had a tool's UI designed with DIV elements inside a table. It looks OK in IE but completely out of whack in Firefox. You can see it here and compare the rendering by the 2 browsers (the tool is in the blue table on the right): http://www.sweetartsdesign.com.ws026.alentus.com/200WebSite/indexb.html This is what we are trying to do - we need to keep the same...
0
9892
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, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9735
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
10997
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...
1
10718
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7889
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
7067
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
5731
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5917
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4542
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.