right, i did a layout using html <a href="http://www.createblog.com/layouts/code.php?id=18779">here</a>
and it looks really strange in firefox.
like, theres a small div box with everything in.
but, like, whats the difference in the coding?
why would it come out with something different to IE?
could someone please help im so confused. =S
Full Version: difference between firefox and IE coding?
Moved to Myspace Support -->
IE:
Firefox:
Firefox:
CODE
<style type="text/css">
.links1{line-height:1pt;background-COLOR:transparent; position:absolute;height:100px; width:230px; left:265;top:18}
.links2{line-height:1pt;background-COLOR:transparent; position:absolute;height:124px; width:140px; left:46;top:198}
.links3{line-height:1pt;background-COLOR:transparent; position:absolute;height:124px; width:140px; left:624;top:198}
.links4{line-height:1pt;background-COLOR:transparent; position:absolute;height:37px; width:251px; left:275;top:168}
.links5{line-height:1pt;background-COLOR:transparent; position:absolute;height:52px; width:199px; left:300;top:268}
.home:hover{height:100px; background-position: bottom left;}.home{height:100px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/home-1.png) top left no-repeat; display: block;}
.add:hover{height:125px; background-position: bottom left;}.add{height:124px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/add-1.png) top left no-repeat; display: block;}
.msg:hover{height:126px; background-position: bottom left;}.msg{height:124px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/msg-2.png) top left no-repeat; display: block;}
.pics:hover{height:37px; background-position: bottom left;}.pics{height:37px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/pics-2.png) top left no-repeat; display: block;}
.cmnt:hover{height:52px; background-position: bottom left;}.cmnt{height:52px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/cmnt-1.png) top left no-repeat; display: block;}
body {
background-color:236573;
scrollbar-face-color:767676;
scrollbar-highlight-color:767676;
scrollbar-3dlight-color:767676;
scrollbar-shadow-color:e12c2c;
scrollbar-darkshadow-color:e12c2c;
scrollbar-arrow-color:dfe12c;
scrollbar-track-color:767676;
cursor:crosshair;
}
.text {
background:transparent;
height:410px;
width: 270px;
border:0;
overflow: auto;
text-size:12px;
color:ef6e6d;
position: absolute;
left:210;
top:448;
}
.friends {
visibility:visible;
width:100px;
height:410px;
position:absolute;
top:448px;
left:500px;
overflow:auto;
background-color:transparent;
font-family:georgia;
border:0;
z-index:2px;
}
a:active,a:visited,a:link {
font-family: verdana;
font-size: 8pt;
color:dfe12c;
text-transform:lowercase;
text-decoration:underline;
}
a:hover {
font-family: verdana;
font-size: 8pt;
color:ef6e6d;
text-transform:lowercase;
text-decoration:strike;
}
EMBED{width:0px;height:0px;} div table table table td font {visibility:visible;} table table embed {display:block; position:absolute; top:11px; left:0px; visibility:visible;} table table table embed {position:static;} .herpe td td object {position:absolute; left:40%; margin-left:-100px;}
embed, object {position:absolute; display:block; left:355px; top:170px; }
.comments{visibility:visible;width:2px; height:1px;position:absolute;
top:200px;left:10px;
overflow:auto;background-color:white;font-family:georgia;
border:black 0px solid;z-index:2px;}
.orangetext15, .navbar, .contacttable {display:none;visibility:hidden;}
div table {background-color:transparent;}
td.text table {visibility:hidden;}
td.text table table, td.text table table td.text {visibility:visible;}
td td td td td div {background-color:transparent;}
td td td td td div strong {visibility:hidden;}
table table table {visibility:hidden;}
table, tr, td {background:transparent; border:0px;}
table table table {background-color:transparent;}
input {background-color:transparent !important;}
}
img {border:0px;}
.blacktext10 {display:block;}
.comt td, .comt table{width:0px!important;
height:0px!important;
background-color:transparent!important;
border:0px!important; _padding:2px!important;}
.comt .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;}
.comt td b, .blacktext10 {display:block;}
.comt {z-index:7;}
.comt { width:500px;
height:225px;
overflow:auto;
background-color:transparent;
border:0px solid;
border-color:none;
position:absolute;
top:518px;
left:50%;
margin-left:-260px;}
.blacktext10 {width: 320px;}
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}td.text td.text table {background-color:transparent;}td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}td.text td.text table table td {padding:3;}td.text td.text table table br {display:inline;}
td.text td.text td td a, .redlink, td.text td.text td b a {visibility:visible!important;} td.text td.text td a {visibility:hidden;}
</style>
<div style="position:absolute; left:-110px; top:-250px; border:0; width:900px; height:900px;">
<img src="http://i130.photobucket.com/albums/p273/sebcglbailey/background.png">
<div class="links1">
<a alt="HOME!" href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
</div>
<div class="links2">
<a alt="ADD ME!" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX" class="add"></a>
</div>
<div class="links3">
<a alt="MESSAGE ME!" href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="msg"></a>
</div>
<div class="links4">
<a alt="PICTURES!" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=XXXXXXXX" class="pics"></a>
</div>
<div class="links5">
<a alt="COMMENT ME!" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX" class="cmnt"></a>
</div>
<div class="text">
remember to replace all the XXXXXXXX's with your friend ID.<br>
you can write whatever you want here...<br><br>
and if you were wondering where all the navigation is... its on the robot's head =)<br>
hover around and you'll work it out.<br><br>
<strike>strike</strike>, <b>bold</b>, <a href="http://www.myspace.com">link</a><br><br><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
</div>
<div class="friends"><marquee direction=up scrollamount=8 height=410><center>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
</marquee>
</div></div>
<div class="comments"><br></center> <table><tr><td><table></div>
.links1{line-height:1pt;background-COLOR:transparent; position:absolute;height:100px; width:230px; left:265;top:18}
.links2{line-height:1pt;background-COLOR:transparent; position:absolute;height:124px; width:140px; left:46;top:198}
.links3{line-height:1pt;background-COLOR:transparent; position:absolute;height:124px; width:140px; left:624;top:198}
.links4{line-height:1pt;background-COLOR:transparent; position:absolute;height:37px; width:251px; left:275;top:168}
.links5{line-height:1pt;background-COLOR:transparent; position:absolute;height:52px; width:199px; left:300;top:268}
.home:hover{height:100px; background-position: bottom left;}.home{height:100px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/home-1.png) top left no-repeat; display: block;}
.add:hover{height:125px; background-position: bottom left;}.add{height:124px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/add-1.png) top left no-repeat; display: block;}
.msg:hover{height:126px; background-position: bottom left;}.msg{height:124px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/msg-2.png) top left no-repeat; display: block;}
.pics:hover{height:37px; background-position: bottom left;}.pics{height:37px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/pics-2.png) top left no-repeat; display: block;}
.cmnt:hover{height:52px; background-position: bottom left;}.cmnt{height:52px; background-COLOR:transparent; hidden; background: url(http://i130.photobucket.com/albums/p273/sebcglbailey/cmnt-1.png) top left no-repeat; display: block;}
body {
background-color:236573;
scrollbar-face-color:767676;
scrollbar-highlight-color:767676;
scrollbar-3dlight-color:767676;
scrollbar-shadow-color:e12c2c;
scrollbar-darkshadow-color:e12c2c;
scrollbar-arrow-color:dfe12c;
scrollbar-track-color:767676;
cursor:crosshair;
}
.text {
background:transparent;
height:410px;
width: 270px;
border:0;
overflow: auto;
text-size:12px;
color:ef6e6d;
position: absolute;
left:210;
top:448;
}
.friends {
visibility:visible;
width:100px;
height:410px;
position:absolute;
top:448px;
left:500px;
overflow:auto;
background-color:transparent;
font-family:georgia;
border:0;
z-index:2px;
}
a:active,a:visited,a:link {
font-family: verdana;
font-size: 8pt;
color:dfe12c;
text-transform:lowercase;
text-decoration:underline;
}
a:hover {
font-family: verdana;
font-size: 8pt;
color:ef6e6d;
text-transform:lowercase;
text-decoration:strike;
}
EMBED{width:0px;height:0px;} div table table table td font {visibility:visible;} table table embed {display:block; position:absolute; top:11px; left:0px; visibility:visible;} table table table embed {position:static;} .herpe td td object {position:absolute; left:40%; margin-left:-100px;}
embed, object {position:absolute; display:block; left:355px; top:170px; }
.comments{visibility:visible;width:2px; height:1px;position:absolute;
top:200px;left:10px;
overflow:auto;background-color:white;font-family:georgia;
border:black 0px solid;z-index:2px;}
.orangetext15, .navbar, .contacttable {display:none;visibility:hidden;}
div table {background-color:transparent;}
td.text table {visibility:hidden;}
td.text table table, td.text table table td.text {visibility:visible;}
td td td td td div {background-color:transparent;}
td td td td td div strong {visibility:hidden;}
table table table {visibility:hidden;}
table, tr, td {background:transparent; border:0px;}
table table table {background-color:transparent;}
input {background-color:transparent !important;}
}
img {border:0px;}
.blacktext10 {display:block;}
.comt td, .comt table{width:0px!important;
height:0px!important;
background-color:transparent!important;
border:0px!important; _padding:2px!important;}
.comt .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;}
.comt td b, .blacktext10 {display:block;}
.comt {z-index:7;}
.comt { width:500px;
height:225px;
overflow:auto;
background-color:transparent;
border:0px solid;
border-color:none;
position:absolute;
top:518px;
left:50%;
margin-left:-260px;}
.blacktext10 {width: 320px;}
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}td.text td.text table {background-color:transparent;}td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}td.text td.text table table td {padding:3;}td.text td.text table table br {display:inline;}
td.text td.text td td a, .redlink, td.text td.text td b a {visibility:visible!important;} td.text td.text td a {visibility:hidden;}
</style>
<div style="position:absolute; left:-110px; top:-250px; border:0; width:900px; height:900px;">
<img src="http://i130.photobucket.com/albums/p273/sebcglbailey/background.png">
<div class="links1">
<a alt="HOME!" href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
</div>
<div class="links2">
<a alt="ADD ME!" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX" class="add"></a>
</div>
<div class="links3">
<a alt="MESSAGE ME!" href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="msg"></a>
</div>
<div class="links4">
<a alt="PICTURES!" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=XXXXXXXX" class="pics"></a>
</div>
<div class="links5">
<a alt="COMMENT ME!" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX" class="cmnt"></a>
</div>
<div class="text">
remember to replace all the XXXXXXXX's with your friend ID.<br>
you can write whatever you want here...<br><br>
and if you were wondering where all the navigation is... its on the robot's head =)<br>
hover around and you'll work it out.<br><br>
<strike>strike</strike>, <b>bold</b>, <a href="http://www.myspace.com">link</a><br><br><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
</div>
<div class="friends"><marquee direction=up scrollamount=8 height=410><center>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTQzNDY0MTEx"><img src="http://i130.photobucket.com/albums/p273/sebcglbailey/friend.png" width="99px"></a>
</marquee>
</div></div>
<div class="comments"><br></center> <table><tr><td><table></div>
generally speakin... IE sux.
IE isn't as bad as it used to be, but it sucks in one main way which causes all hell to break loose in web designs.
I'm not sure if you all have heard of this, but HTML/DOM (pretty much DHTML/JavaScript)/CSS are web standards, and an organization called W3C spends a lot of time carefully documenting all the specifications and nuances of each web "language." Unfortunately, the people working on IE didn't think this specification was good enough, so they decided to add a few extra "features" and break from the specification. Many of these "features" and differences in the way IE reads your HTML have been exploited in many of the web designs on createblog and blogging/social networking sites.
Firefox, on the other hand, dots all its "i"s and crosses all its "t"s. They follow the W3C specifications down to the letter, which is how it should be, and almost anything out of spec won't display properly. Thus, many of the designs around here will only work on Internet Explorer.
I highly recommend you to do all your initial testing on Firefox. Generally, things are more likely to work on both browsers if they're first designed on Firefox instead of IE. Better yet, I'd recommend everyone here to find a book on Javascript or DHTML, and learn how these languages really work. To truly create cross-browser compatible webpages, you really need to understand HTML and DOM (the document object model, or the structure behind HTML that allows JavaScript to interact with it) rather than copy+paste pieces of script.
Also, if you ever need to figure out how to do something in HTML, and you want to do it in a way that works on all browsers, I highly recommend you to look at this HTML reference guide by the creators of Firefox: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference. Microsoft also has one, make sure you look at the "standards information" section to check that it's an HTML standard and not something that works only on IE: http://www.microsoft.com/downloads/details...;displaylang=en
It might be difficult to understand these reference guides at first, but it's definitely worth it in the long run if you want to really understand HTML/JavaScript. When you're debugging your website, I also recommend learning how to use Firefox's DOM Inspector and Error Console. The DOM Inspector analyzes how firefox interprets your HTML, and the error console shows what problem there is in your JavaScript. Sometimes Internet Explorer will parse HTML differently, so you might also want to download the internet explorer developer toolbar, which has similar features: http://www.microsoft.com/downloads/details...;displaylang=en
Sorry if that was a bit dense, but if you fully learn everything up there, you'll easily tackle any problems you encounter in your webpages. I've taught myself much of this, and honestly many of the problems people are encountering on this site are pretty easy to solve.
I'm not sure if you all have heard of this, but HTML/DOM (pretty much DHTML/JavaScript)/CSS are web standards, and an organization called W3C spends a lot of time carefully documenting all the specifications and nuances of each web "language." Unfortunately, the people working on IE didn't think this specification was good enough, so they decided to add a few extra "features" and break from the specification. Many of these "features" and differences in the way IE reads your HTML have been exploited in many of the web designs on createblog and blogging/social networking sites.
Firefox, on the other hand, dots all its "i"s and crosses all its "t"s. They follow the W3C specifications down to the letter, which is how it should be, and almost anything out of spec won't display properly. Thus, many of the designs around here will only work on Internet Explorer.
I highly recommend you to do all your initial testing on Firefox. Generally, things are more likely to work on both browsers if they're first designed on Firefox instead of IE. Better yet, I'd recommend everyone here to find a book on Javascript or DHTML, and learn how these languages really work. To truly create cross-browser compatible webpages, you really need to understand HTML and DOM (the document object model, or the structure behind HTML that allows JavaScript to interact with it) rather than copy+paste pieces of script.
Also, if you ever need to figure out how to do something in HTML, and you want to do it in a way that works on all browsers, I highly recommend you to look at this HTML reference guide by the creators of Firefox: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference. Microsoft also has one, make sure you look at the "standards information" section to check that it's an HTML standard and not something that works only on IE: http://www.microsoft.com/downloads/details...;displaylang=en
It might be difficult to understand these reference guides at first, but it's definitely worth it in the long run if you want to really understand HTML/JavaScript. When you're debugging your website, I also recommend learning how to use Firefox's DOM Inspector and Error Console. The DOM Inspector analyzes how firefox interprets your HTML, and the error console shows what problem there is in your JavaScript. Sometimes Internet Explorer will parse HTML differently, so you might also want to download the internet explorer developer toolbar, which has similar features: http://www.microsoft.com/downloads/details...;displaylang=en
Sorry if that was a bit dense, but if you fully learn everything up there, you'll easily tackle any problems you encounter in your webpages. I've taught myself much of this, and honestly many of the problems people are encountering on this site are pretty easy to solve.
ah thanks!
i think i got the main jist of that =)
i think i got the main jist of that =)
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.