CSS troubles in FireFox and IE and I dont understand why
I am creating a new site as a learning experience and I am having CSS troubles.
In Safari and Chrome it looks good.
In FireFox, the style is off and I dont understand why.
in IE, it is horrible and most of my style is not working.
The site is: http://6colors.co.
I posted yesterday and someone recommended an CSS reset at the top of my style sheet. This worked rather well and from that I made a number of changes to get it in the shape it is in. Differences in FireFox and IE not working properly I dont follow.
Here is the stylesheet:
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
pa开发者_如何学Pythondding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 2;
background-image: url('media/background.png');
width: 90%;
}
header {
margin-top: 10px;
margin-left: 30px;
margin-right: auto;
width: 70%;
}
AppleBlue { color: #009edc; }
ApplePurple { color: #934e84; }
AppleRed { color: #c55152; }
AppleOrange { color: #e19433; }
AppleYellow { color: #f2be2e; }
AppleGreen { color: #76b845; }
PostListing {
margin-top: 20px;
margin-left: 300px;
text-align: left;
float: left;
width: 70%;
border: 1px solid #3F4933;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-image: url('media/transwhite.png');
line-height: 1;
}
a {
color: #666666;
text-decoration: none;
}
PostContent {
font-size: 18px;
font-weight: normal;
font-style: italics;
color: #666666;
}
PostTitle {
font-size: 22px;
font-style: normal;
font-weight: bold;
color: #666666;
}
PostTitleUnderline {
font-size: 22px;
font-style: normal;
font-weight: bold;
color: #666666;
text-decoration: underline;
}
PostExcerpt {
font-size: 14px;
font-weight: normal;
font-style: italics;
color: #666666;
}
PostDate {
text-align: right;
float: right;
font-size: 12px;
font-weight: normal;
font-style: italics;
color: #666666;
}
ReturnHomeLink {
text-align: right;
float: right;
font-size: 12px;
font-weight: normal;
font-style: italics;
color: #666666;
}
BoxHouse {
margin-left: 72px;
margin-right: 20px;
}
FloatingBox {
text-align: center;
float: left;
width: 220px;
border: 1px solid #3F4933;
padding: 12px;
background-image: url('media/transwhite.png');
margin-top: 10px;
margin-left: 0.5em;
margin-right: 5px;
font-size: 22px;
font-style: normal;
font-weight: bold;
}
You are using non-HTML elements, like <FloatingBox> and <AppleBlue>, which confuse Firefox's HTML parser (and likely IE's as well). For instance, if you look at the parsed tree in Firebug, you will see that most of the elements that are nested within <FloatingBox> are not parsed as being nested within it.
I would recommend using only standard HTML elements. If you want to add an element purely for the purpose of setting CSS properies on it, such as your <FloatingBox> and <AppleBlue>, you should use <div> (for block level elements) and <span> (for inline elements) tags with class attributes on them. For instance, in your HTML:
<div class="FloatingBox">
...
<span class="AppleBlue">Blog</a>
</div>
And in your CSS
.FloatinBox {
...
}
.AppleBlue {
}
First: Some problem might be due to an invalid doctype tag... yours is <!DOCTYPE html>, but you should specify exactly what standard the browser should adhere to, otherwise the browser will enter it's 'quirks' mode in which they all render differently.
Try this instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Read more about doctypes here:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Second, the CSS for floatingbox should be .floatingbox{/somecss/} - the dot in front of "floatingbox" indicates that it is a class. The class is then wired up to an HTML element like this: <div class="floatingbox">{somecontent}lt;/div>
加载中,请稍侯......
精彩评论