PDA

View Full Version : CSS in IE = screwy

Miss Wiggle
03-04-2005, 06:00 PM
I've been working on my website for awhile. I've redone it like...3 times and I seem to be almost getting it working, but for some reason, in IE there are issues with the center (or "content") div.

I'm a retard when it comes to this. This is my first go at using CSS, and while I can see so many benefits, cross browser trouble is driving me up the wall. I don't want to go further with my site until I get the basic structure corrected.

http://wiggle.howarddesigns.biz/layout.html

That's the link to my site. It appears alright in Netscape, Mozilla, Firefox, and even Opera. IE is the only problem, but because it's such a widely used browser, I'd like to correct it. Here is the css code i'm using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<LINK REL=stylesheet HREF="http://wiggle.howarddesigns.biz/style.css" TYPE="text/css">

<style type="text/css">
#container {
width: 750px;
\width: 770px;
w\idth: 750px;
border: 10px double #7F7460;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#banner {
padding: 5px;
margin-bottom: 0px;
background-color: #D6BB90;
background-image: url("images/banner3.jpg");
height: 250px;
border: 1.5px solid #A79472;
}

#content {
padding: 10px;
padding-top: 2px;
padding-left: 7%;
padding-right: 7%;
height: 1000px;
margin-left: 130px;
margin-right: 130px;
background-color: #D6BB90;;
border: 1.5px solid #A79472;
}

#sidebar-a {
float: left;
height: 1000px;
width: 130px;
\width: 120px;
w\idth: 130px;
margin: 0;
margin-right: 0px;
padding: 10px;
padding-top: 2px;
background-color: #D6BB90;;
border: 1.5px solid #A79472;
}

#sidebar-b {
float: right;
height: 1000px;
width: 130px;
\width: 120px;
w\idth: 130px;
margin: 0;
margin-left: 0px;
padding: 10px;
padding-top: 2px;
background-color: #D6BB90;;
border: 1.5px solid #A79472;
}


ul#menulist {
position: relative;
top: 91%;
left: 50%;
margin: 0 0 0 0px;
padding: 0 0 0 0px;
}

ul#menulist li {
display: inline;
list-style: none;
}


</style>


Thanks. :D
MaGiCSuN
03-04-2005, 06:03 PM
your .css file should have this in it:


BODY {margin: 0}

a:link { color: #836E4B; text-decoration: none; }
a:active { color: #E8DAA4; text-decoration: underline; }
a:visited { color: #836E4B; text-decoration: none; }
a:hover { color: #524229; text-decoration: underline;}

P {
font-family: comic-sans;
font-size: 12pt;
font-style: small caps;
font-style: normal;
font-opacity: 60%;
color: #393A33;
font-weight: demi-bold;
font-stretch: condensed;
word-spacing: 1.5px;
letter-spacing: 1px;
line-height: 120%;
}

.psmall {
font-family: comic-sans;
font-size: 10.5pt;
font-style: small caps;
font-style: normal;
font-opacity: 60%;
color: #393A33;
font-weight: demi-bold;
font-stretch: condensed;
word-spacing: 1.5px;
letter-spacing: 1px;
line-height: 120%;
}

.aquaduct {
font-family: sans-serif;
font-size: 9pt;
font-style: italic;
font-opacity: 60%;
color: #836E4B;
font-weight: bold;
word-spacing: 1.5px;
letter-spacing: 1px;
line-height: 160%;
background: transparent;
}

.sublinks {
font-family: sans-serif;
font-size: 12.5pt;
font-style: italic;
color: #836E4B;
font-weight: bold;
word-spacing: 1.5px;
letter-spacing: 1px;
line-height: 180%;
background: transparent;
}

.heading {
color: #393A33;
font-family: comic-sans;
font-size: 13pt;
font-style: small caps; underlined;
font-opacity: 60%;
font-weight: bold;
font-stretch: condensed;
text-indent: 1cm;
text-decoration: underline;
text-align: right;
word-spacing: 2px;
letter-spacing: 1px;
line-height: 140%;
}

.heading2 {
color: #393A33;
font-family: comic-sans;
font-size: 13pt;
font-style: small caps; underlined;
font-opacity: 60%;
font-weight: bold;
font-stretch: condensed;
text-indent: 1cm;
text-decoration: underline;
text-align: left;
word-spacing: 2px;
letter-spacing: 1px;
line-height: 140%;
}


no <style></style> tags in a .css file :)

Love,
Mirna
Miss Wiggle
03-04-2005, 08:03 PM
Okay, I fixed that stuff up. There are still gaps between the center div and the side divs in internet explorer, though.

:\

I'm not esactly sure how to fix it, either. I don't know what I've coded wrong...or is IE just retarded. Perhaps, both....
Monkey Bizzle
03-04-2005, 08:30 PM
Okay, I went thru your style sheet, and the only errors I found are that you left the <style> tags in. An external sheet has NO style tags. Also, you have the same 3 recurring mistakes thru-out your stylesheet as well:

font-style: small caps;
small caps is not a valid font style

font-opacity: 60%;
opacity is not a valid property

font-weight: demi-bold;
demi-bold is not a valid weight for a font

And I've never seen anything like this before:

width: 130px;
\width: 120px;
w\idth: 130px;

Not sure what that does but the validator says it's valid. Anyways, I think that maybe the problem is that you left your style tags in.