...

View Full Version : Thinking I have to add something to CSS



Hardwire
12-18-2007, 09:00 AM
Hello all,
I am currently redoing my fan site and first I would like to say FF everything works and looks perfect and does what I wanted the site to do on the new layout. IE Ehhh not so much. Some reason IE likes to be a pain to me, and some reason the pages like to go at the end of the whole page to start when I would like them to start at the top. I have really no idea how to do this, if anyone could help it would be much appreciated.

FF: Pic:Firefox Example(GOOD) (http://img525.imageshack.us/img525/4521/ffpa8.jpg)
IE: Pic: Internet Explorer Example 6.0(BAD) (http://img525.imageshack.us/img525/72/ieqt3.jpg)


body {
padding : 0;
margin : 0;
font : 12px Arial, sans-serif;
line-height : 1.5em;
background : #393939;
color : #fff;
}
a {
color : #d0eb55;
background : inherit;
text-decoration : none;
}
a:hover {
color : #d0eb55;
background : inherit;
text-decoration : underline;
}
p {
margin : 5px 0;
}
h1 {
font : bold 1.8em Arial, Sans-Serif;
padding : 8px 0 4px 0;
margin : 0;
letter-spacing : -1px;
}
h2 {
font : bold 1.6em Arial, Sans-Serif;
letter-spacing : -1px;
}
h3 {
padding : 4px 0;
margin : 0;
}
ul {
margin : 0;
padding : 0;
list-style : none;
}
img {
border : 0;
}
hr {
height : 1px;
border-style : none;
color : #d0d0d0;
background-color : #c0c0c0;
margin : 10px 0;
}
ol {
padding : 0;
margin : 0;
}
.code {
padding : 3px 5px 3px 35px;
border : 1px solid #666;
list-style-type : decimal-leading-zero;
font-family : Courier;
}
.code code {
font-family : Monaco, "Courier New", Tahoma;
font-size : 1.2em;
}
.code li {
margin : 2px 0;
padding : 0 5px;
background : #333;
}
.code li.t1 {
padding-left : 4ex;
}
.code li.t2 {
padding-left : 8ex;
}
.code li.t3 {
padding-left : 12ex;
}
.code li.t4 {
padding-left : 16ex;
}
.code li.t5 {
padding-left : 20ex;
}
.code li.t6 {
padding-left : 24ex;
}
.code li.t7 {
padding-left : 28ex;
}
.code li.t8 {
padding-left : 32ex;
}
.content {
margin : 0 auto;
width : 1000px;
}
#topbar {
height : 20px;
background : #212121;
width : 100%;
}
#topbar #icons {
float : right;
margin : 10px 0 0;
padding : 0;
}
#topbar #icons img {
padding-right : 4px;
border : 0;
}
.url {
padding : 10px 0;
}
.url a {
color : #454545;
text-decoration : none;
}
.url a:hover {
color : #fff;
}
#top {
padding-top : 0;
background : #3d3d3b url(images/topbg.gif) repeat-x;
height : 85px;
margin-bottom : 25px;
}
#top h1 {
font : bold 2.6em Arial, Sans-Serif;
padding : 20px 0 0 0;
margin : 0;
letter-spacing : 1px;
color : #d0eb55;
}
#top a:hover {
text-decoration : none;
}
#top h2 {
font : 0.9em Arial, Sans-Serif;
letter-spacing : 0;
color : #868686;
margin : 0;
padding : 0;
}
#menu {
float : right;
height : 23px;
margin-top : 35px;
}
#menu a {
color : #fff;
background : inherit;
text-decoration : none;
padding-left : 10px;
line-height : 23px;
font-weight : bold;
}
#menu a span {
padding-right : 10px;
}
#menu a, #menu a span {
display : block;
float : left;
}
#menu a:hover, #menu .current {
color : #fff;
background : #a9bc52 url(images/tabl.gif) no-repeat left top;
padding-left : 10px;
height : 23px;
}
#menu a:hover span, #menu .current span {
background : url(images/tabr.gif) no-repeat right top;
padding-right : 10px;
height : 23px;
cursor : pointer;
}
#menu ul {
list-style : none;
padding : 0;
margin : 0;
}
#menu li {
float : left;
margin : 0 0 0 5px;
}
#main {
width : 1000px;
margin : 0;
padding : 0;
}
.right_side {
float : right;
width : 202px;
background : inherit;
overflow : hidden;
}
.right_side .pad {
padding : 0 0 10px 17px;
}
.right_side p {
padding : 0 0 5px 5px;
}
.right_side ul {
padding : 3px 0 12px 5px;
}
.right_side li {
line-height : 18px;
background : inherit;
list-style : square;
padding-left : 0px;
margin-left : 17px;
color : #b4e04a;
}
.right_side a {
background : inherit;
text-decoration : none;
}
.right_side a:hover {
text-decoration : underline;
}
.right_side h3 {
color : #eee;
font : bold 1.2em Arial, Sans-Serif;
background : url(images/rmenuhead.gif) no-repeat top;
width : 202px;
height : 30px;
padding-top : 7px;
text-indent : 10px;
}
#left_side {
background : inherit;
margin-bottom : 10px;
width : 590px;
display: table-header-group;
}
#left_side .intro {
background : #414141;
color : #fff;
}
#left_side .intro .pad {
padding : 10px;
}
#left_side .intro a {
color : #b4e04a;
text-decoration : none;
}
#left_side .intro a:hover {
color : #cdff56;
text-decoration : underline;
}
#left_side .mpart {
padding : 20px 0 0 0;
}
#left_side h2 {
background : inherit;
padding : 0;
margin : 0;
font : 1.8em verdana, Arial, Sans-Serif;
}
#left_side .mpart h3 {
background : inherit;
padding : 0;
margin : 0 0 15px 0;
font : 0.9em verdana, Arial, Sans-Serif;
color : #a5a5a5;
}
#left_side p {
color : #e7e7e7;
padding : 0;
text-align : justify;
}
#left_side img {
float : left;
padding : 0 10px 5px 0;
}
#left_side blockquote {
padding-left : 10px;
border-left : 3px solid #a7cc44;
margin : 10px 0 10px 25px;
}
.date {
padding : 7px 35px 0 0;
margin : 10px 0 25px 0;
text-align : right;
height : 32px;
}
.date a {
font : bold 1.2em Arial, Sans-Serif;
color : #a9bc52;
background : transparent;
}
#left_side .rs {
float : right;
margin : 0 0 0 10px;
border : 1px solid #888;
padding : 5px;
background : inherit;
}
#left_side ul {
list-style-position : inside;
margin-left : 2px;
}
#left_side ul li {
list-style-type : square;
margin-left : 15px;
}
#left_side ul ul li {
list-style : none;
margin-left : 10px;
list-style-type : lower-alpha;
list-style-position : inside;
}
#left_side .greybox {
border : 1px solid #ccc;
background : #f5f5f5;
width : 628px;
padding : 10px;
}
#footer {
clear : both;
width : 100%;
margin : 0 0 0 0;
color : #777;
border-top : 1px solid #444;
background : inherit;
}
#footer .right {
float : right;
}
#footer a {
text-decoration : none;
background : inherit;
}
Thanks again.

effpeetee
12-18-2007, 09:19 AM
* {
padding : 0;
margin : 0;

Have you tried this. Put at the start of your css code, it makes certain that all browsers start off the same.

Also you do not have a Doctype. This is essential for consistent results. No Doctype puts the browser into Quirks mode, Each browser has its own idea of what that means.

What version of IE you are using.

Also we only have your css. What about the other code?

A link is the most useful.



Frank

ahallicks
12-18-2007, 10:23 AM
How do you know there is no doctype Frank? The HTML wasn't posted? Also, it's IE6 that the problem occurs. From this I would suggest that there is a padding, or margin problem and remember that floating objects and applying margin to the same side will double the margins in IE 6. To solve this use display: inline;

As Frank says, a link is most useful

effpeetee
12-18-2007, 12:15 PM
How do you know there is no doctype Frank? The HTML wasn't posted? Also, it's IE6 that the problem occurs. From this I would suggest that there is a padding, or margin problem and remember that floating objects and applying margin to the same side will double the margins in IE 6. To solve this use display: inline;

As Frank says, a link is most useful
I went in to Forever-Ashley.com

Frank

ahallicks
12-18-2007, 12:40 PM
I went in to Forever-Ashley.com

Frank

See now that is some smart thinking there Frank!

Apostropartheid
12-18-2007, 02:52 PM
I think this is the IE5 box model and/or the double-margin float bug.

#left_side {
background : inherit;
margin-bottom : 10px;
width : 590px;
display: table-header-group;
}
Are you sure this is the display type you want?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum