Help - Search - Members - Calendar
Full Version: IE Is The Devil
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
sheertalentx
So, my navigation map and header link look fabulous in FF yet they are way off in IE. Also, I can't seem to get my content bar and sidebar to line up properly in IE6. All my coding is valid...whats going onn??

Here is my code...

QUOTE
/*
Theme Name: Nonsensicality
Theme URI: http://nonsensicality.net/
Description: A cute nighttime layout. Clean and refreshing and slightly comical
Version: 4.0
Author: Nicole
*/

/* ----------------------------------------------------------------------------BODY */
body {
margin : 0;
padding : 0;
color : #041d3c;
font-size : 9pt;
line-height : 12pt;
font-family : sans-serif;
background-color : #0c376a;
}
p {
text-align : justify;
line-height : 13pt;
}
li {
list-style-type : none;
}
ul {
list-style-type: none;
}
A:link, a:active, a:visited {
color : #0f396c;
font-size : 10px;
line-height : 11px;
letter-spacing : 2px;
border-bottom : 0 dotted #ffffff;
text-decoration : none;
font-weight : bold;
font-family : arial, verdana, tahoma, sans-serif;
height : 1px;
text-transform : uppercase;
list-style-type : none;
}
A:hover {
color : #e5d33d;
border-bottom : 0 dotted #e8d669;
text-decoration : none;
font-size : 10px;
line-height : 11px;
letter-spacing : 2px;
font-weight : bold;
font-family : arial, verdana, tahoma, sans-serif;
text-transform : uppercase;
list-style-type : none;
}
/* ----------------------------------------------------------------------LAYOUT STYLES */
input, textarea, select {
background : #deebfc;
font-size : 11px;
font-weight : bold;
font-family : tahoma;
color : #041d3c;
border : 2px solid #041d3c;
}
i {
font-size : 8.5pt;
line-height : 9pt;
font-family : Arial;
color : #9bc6d6;
font-weight : bold;
letter-spacing : 2px;
text-transform : uppercase;
}
b {
font-size : 9pt;
line-height : 10pt;
font-family : tahoma;
color : #daa025;
letter-spacing : 2px;
text-transform : uppercase;
}
u {
font-size : 9pt;
line-height : 10pt;
font-family : tahoma;
color : #8abad0;
font-weight : bold;
letter-spacing : 2px;
text-transform : uppercase;
}
s {
font-size : 9pt;
line-height : 10pt;
font-family : tahoma;
color : #562a11;
font-weight : bold;
letter-spacing : 2px;
text-transform : uppercase;
}
strong {
font-size : 9pt;
line-height : 10pt;
font-family : tahoma;
font-weight : bolder;
color : #daa025;
letter-spacing : 2px;
text-transform : uppercase;
}
em {
font-size : 9pt;
line-height : 10pt;
font-family : Arial;
color : #9bc6d6;
font-weight : bold;
letter-spacing : 2px;
text-transform : uppercase;
}
.head {
font : 700 1.4em arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
padding-left : 0;
text-align : justify;
text-transform : uppercase;
font-weight : bold;
color : #575757;
border-bottom : 1px solid #598ddb;
}
.head2 {
color : #051656;
letter-spacing : 1px;
border-bottom : 2px solid #434343;
font-weight : bold;
line-height : 10px;
font-size : 20px;
text-align : center;
font-family : arial, verdana, tahoma, sans-serif;
}
.head3 {
color : #575757;
font : 700 1.4em arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
padding-left : 0;
text-align : justify;
text-transform : uppercase;
font-weight : bold;
border-bottom : 1px solid #858585;
}
.head4 {
color : #575757;
font : 10px arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
text-transform : uppercase;
font-weight : bold;
float : left;
padding : 0 0 0 5px;
}
.head5 {
font : 700 1.4em arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
padding-left : 0;
text-align : justify;
text-transform : uppercase;
font-weight : bold;
}
.head6 {
font-family : Georgia, Times, serif;
color : #0c3464;
height : 10px;
text-transform : uppercase;
font-size : .9em;
font-weight : bold;
background-image : url(http://nonsensicality.net/images/stoledmoon/navhead.jpg);
background-repeat : no-repeat;
width : 248px;
height : 49px;
text-align : center;
padding: 16px 0 0 0;
}
a img {
border : none;
border-bottom : 0;
}
/* ----------------------------------------------------------------------------LAYOUT */
#container {
margin-top : 0px;
background-color : #ffffff;
background-image : url(http://nonsensicality.net/images/stoledmoon/bg.jpg);
background-repeat : repeat-y;
width : 950px;
}
#header {
background-image : url(http://nonsensicality.net/images/stoledmoon/header.jpg);
background-color : #ffffff;
height : 400px;
width : 950px;
}
#content {
width : 420px;
margin-left : 130px;
float : left;
text-align : left;
margin-top : -60px;
}
#content a img {
border : 5px solid #4b4b4b;
padding : 0;
margin : 5px 3px 0;
}
#content a:hover img {
border : 5px solid #1b8cd1;
}
#banner h1 {
margin : 0;
padding : 0.5em;
}
#hlink {
height : 186px;
width : 88px;
}
/* ----------------------------------------------------------------------SIDEBAR */
#sidebar {
float : right;
width : 248px;
margin-right : 130px;
margin-top : -30px;
text-align : left;
color : #041d3c;
line-height : 12pt;
list-style: none;
list-style-type: none;
}
/* ----------------------------------------------------------------------NAVIGATION */
#navigation {
width : 188px;
height : 88px;
}
/* ----------------------------------------------------------------------FOOTER */
#footer {
clear : both;
background-color : #ffffff;
background-image : url(http://nonsensicality.net/images/stoledmoon/footer.jpg);
background-repeat : no-repeat;
padding : 0em;
width : 950px;
height : 500px;
text-align : right;
margin-bottom : 0px;
}
#credits {
float : left;
width : 232px;
margin-left : 32px;
margin-top : 110px;
text-align : left;
color : #041d3c;
line-height : 12pt;
}
#about {
float : left;
width : 210px;
margin-left : 130px;
margin-top : 115px;
text-align : left;
font-family : sans-serif;
text-align : justify;
line-height : 12pt;
}
/* ----------------------------------------------------------------------Zooomr */
#zooomr {
width : 200px;
margin-top : 80px;
margin-left : 15px;
float : left;
}
#zooomr ul {
list-style : none;
}
#zooomr ul li {
display : inline;
}
#zooomr ul, #zooomr ul li {
padding : 0;
margin : 0;
border : 0;
}
#zooomr a img {
border : 5px solid #4b4b4b;
padding : 0;
margin : 5px 3px 0;
}
#zooomr a:hover img {
border : 5px solid #0c376a;
}
nitrogoat
Unfortunately this is just a part of web design. IE can be really infuriating at times but you have to keep at it until you can reach some form of compromise between IE and Firefox.
There is one trick that can help though-
If you insert an underscore such then the following coding is only recognised in Firefox-

CODE
_top: 100px; top: 90px;


That would ensure that when viewed in Firefox the element would be 100 pixels from the top, though when viewed in IE it would be only 90 pixels from the top.
fixtatik
^ other way around. if you don't have an underscore, every browser will read it. if there is an underscore, only IE will read that property.
manny-the-dino
Topic Closed, and Moved to Resolved Topics. Please PM a moderator if you would like this reopened.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.