472,986 Members | 2,929 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,986 software developers and data experts.

DIV positioning fine in Firefox but out of place in IE

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;}
  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;}
  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;}
  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;}
  26. .mygen { Background Properties }
  27. table, tr, td { background-color:transparent; border:none; border-width:0;}
  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.   }
  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.       }
  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;      } 
  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>
  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>
  99. <style>
  100. .{hiding the bottom links}
  101. table tr td div div {visibility:hidden;border:0px!important;background-color:transparent;}
  102. </style>
  104. <style>
  105. .a {hide copyright}
  106. table div font {visibility:hidden;}
  107. table table div font {visibility:visible;}
  108. </style>
  110. <style>body div table tbody tr td font {visibility:hidden;}
  111. .navbar {visibility:visible;}
  112. .navbar font {visibility:hidden;}</style>
  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>
  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>
  129. <style>
  130. div table table a.navbar {visibility:visible; !important;}
  131. </style>
  133. <div class="extras1">
  134. </div>
  136. <div class="extras2">
  137. </div>
  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 7764
7,435 Expert 4TB
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
7,435 Expert 4TB
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
7,435 Expert 4TB
IE tends to screw up margins and padding on borders so try adding *{margtin:0;padding:0} to your css.
Oct 2 '06 #4
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

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...
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...
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...
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...
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. ...
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"...
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 -...
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. ...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

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.