Firefox / IE show different div width Options

[kaje103]

The "main" div is set to a width of 568 and shows up level with the header image in IE7 but in Firefox it overlaps a few pixels. Changing the width to look correct in one browser makes it look wrong in the other. Any suggestions?

http://www.myspace.com/kwjohns

About me:

CODE

<style type="text/css">
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,p,xmp,table,tr,td,th{
background-image: url(http://pages.suddenlink.net/kwjohns/myspace/23169ab.gif);
background-repeat: repeat-x;
background-color: 000000;
background-attachment: fixed;
font-family: arial;
font-size:9pt;
color: 6F6F6F;
border: none;}

b {
font-family:                    Trebuchet MS, Times New Roman;
color:                          90AF1B;
font-weight:                    bold;
text-transform:                 none;}

u {
font-family:                    Trebuchet MS, Times New Roman;
color:                          6F6F6F;
font-weight:                    bold;
text-transform:                 none;
}

i {
font-family:                    Trebuchet MS, Times New Roman;
font-weight:                    bold;
color:                          6F6F6F;
font-style:                     italic;
text-transform:                 none;}

h1 {
    margin:1;
    padding:0;
    font-family:Trebuchet MS;
        color:ffffff;
    font-size:13pt;
        font-weight:none;
    line-height:15pt;
    text-transform:uppercase;
    background-color:90AF1B;
        display: block;
        
}

.bannertext {
font-family: arial;
font-weight: bold;
letter-spacing: -1px;
color: 000000;
text-align: justify
line-height: 12px;
      
}

input, textarea {
font-family: courier new;
font-size:12pt;
text-align:justify;
color:ffffff;
border-color:000000;
border-style: solid;
border-width: 1px;
background-image:url(http://pages.suddenlink.net/kwjohns/myspace/23169ac.png);

}

a:link{color: ffffff; text-decoration:none;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
a:visited{color:ffffff; text-decoration:none;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
a:active{color:ffffff;text-decoration:none;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
a:hover {color:000000;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}


span, table, td, text,div, tr,a,p{font-size:12px !important;color:6F6F6F; font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
div table td font {visibility:hidden;}
div table table td font a {visibility:visible;}
table td div {visibility:hidden;}
table table td div {visibility:visible;}
div td td font {display:none;}

form {display:none;}
table table table form {display:inline;}
.a {hide bottom links div}
table div {display:none;}
table table div {display:block;}
td {height:0px;}


div table div {display:block;}
table, tr, td {background-color:transparent;}
.navigationBar {display:none;}
body div table tbody tr td font {visibility:hidden;}
body table div table tbody tr td font {visibility:visible;}
div div select, div div form {display:none !important;}
select { visibility:hidden!important; WIDTH:0px!important;}

body div td div div select {position:absolute!important;top:-1000px;}
body div div form {display:none !important;}
table table div form {display:inline !important;}
</style>


<div class="main" style="position: absolute; left:250; top:180; width:568; height:567; overflow: hidden;">
<img src="http://pages.suddenlink.net/kwjohns/myspace/23169aa.png" USEMAP="#nav" BORDER=0>
<map name="nav">
  <area name="Home" shape="rect" coords="8,4,85,21" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbQ=="  alt="Home">
  <area name="Message" shape="rect" coords="94,5,174,22" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD00MTgyNzU3Jk15VG9rZW49MGVhM2IyMGItZTJiNS00YTAyLThiYTMtMTdjMzZmM
M3ZTFm"  alt="Message me">
  <area name="Pictures" shape="rect" coords="185,3,260,20" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD00MTgyNzU3"  alt="View pictures">
  <area name="Add" shape="rect" coords="268,3,345,23" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5h
GRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPTQxODI3NTc="  alt="Add me">
</map>
</div>


<div class="bannertext" style="position: absolute; left:480; top:230; overflow: hidden;width:200; height:100; ">
<font size="4"></font>
</div>

I'd like to meet:

CODE

<style type="text/css">
    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}

</style>


<div class="content" style="position: absolute; left:255px;  top:280px; width:560px;height:530px;overflow: auto;background-color:212121;padding-left:10px;padding-top:10px;">


<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD1YWFg="><img src="http://i4.tinypic.com/80vol5l.gif"align="left"></a>
Profile Here

<br/><br/><br/><br/>
test
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h1>Friends;</h1>
<center>
<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>

<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>

<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>

<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>
</center>

<br/><br/>
<h1>Comment;</h1>
<center>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="XXX FRIEND ID HERE" type="hidden"><textarea name="f_comments" col; style="color:ffffff; text-align:center; font-family: courier new; font-size: 12px; height:100px; width:300px; border: 1px solid black; background-image:url(http://pages.suddenlink.net/kwjohns/myspace/23169ac.png)">Leave comments.</textarea><br /><input type="submit"value="Send" style="color:ffffff; text-align:center; font-family: courier new; font-size: 12px;border: 1px solid black; background-image:url(http://pages.suddenlink.net/kwjohns/myspace/23169ac.png);"><br></center>

</div>

[CrotchetTheLeper]

You need to get rid of the padding on the divs. In Firefox, the padding shows up as an addtion to the width of your div. If you get rid of it, they should be the same width.

[kaje103]

Thanks a lot for your help!

One other thing I just noticed is that in Firefox my status update is appearing out of place whereas on IE it is just to the right of the add tab. Any clue on moving that?

[CrotchetTheLeper]

No problem.

Edit: Your status updates aren't aligned like the rest of your profile, so it's position changes relative to the size of the browser (my screen's very large and so it's misaligned in both IE and FF).

From what I can see, it looks like you havn't re-positioned your status updates? If you give it an absolute position, it should stay where you want it. Unfortunatley, I don't happen to know the code to use when you want to re-position that..

Hahaha does anyone else know?

[kaje103]

I happened to realize that too after posting. Hmmm. If there's no way to fix the position, I wouldn't mind hiding it altogether.

[kaje103]

I've gotten a little further with it. I found this patch of code that can be used to position it:

CODE

<style>
table.extendedNetwork {display:block !important;
visibility:visible !important;
position:absolute; top:155px; left:50%; margin-left:-60px;
z-index:5;}
</style>

However, with the position being set to absolute, it stays put in IE but will still move based on the size of the browser's window in Firefox. Also, for some reason in Firefox is appears higher up than it does in IE. I'd also like the status to be left aligned but text-align: left didn't do the trick.

[CrotchetTheLeper]

If the status updates are showing up at different "heights" on the browser, you can put an underscore here: _top:155px;

That will tell the browser to only read that in IE. Then you can create another top:??px; without an underscore that will only be read by Firefox. You can figure out where it looks good on FF, and then put that pixel value there. This way, you can have them both in the right spot in each browser.

As for the movement of the extended network; I'm not really sure how to fix this. I tried to put an !important after the position:absolute but that didn't work... Anyone else know?

[kaje103]

If the status updates are showing up at different "heights" on the browser, you can put an underscore here: _top:155px;

That will tell the browser to only read that in IE. Then you can create another top:??px; without an underscore that will only be read by Firefox. You can figure out where it looks good on FF, and then put that pixel value there. This way, you can have them both in the right spot in each browser.

Thanks for the tip!

[CrotchetTheLeper]

Glad I could help.