...

View Full Version : It only looks right in IE!



KingDawg
10-13-2004, 03:31 AM
This is the first CSS layout I've made, and I'm having a problem positioning things correctly. Can somebody take a look at my site www.thefrankinpress.com (http://www.thefrankinpress.com) and see what i'm doing wrong? Here's my stylesheet:


Body {
margin:15px 0px 15px 0px;
text-align: center;
background: url(background.gif);
}

h1 {
font-family : Comic Sans MS;
text-transform : uppercase;
font-style : italic;
letter-spacing : 0.4em;
}
h2 {
font-family : Comic Sans MS;
font-weight: Normal;
font-size: 16px;
}

p {
margin:10px 10px 10px 10px;
font-family: Helvetica;
font-Weight: 100;
}

a {
color:#587FBC;
text-decoration:none;
font-size: 16px;
font-weight:600;
font-family: Comic Sans MS, sans-serif;
}
a:link {color:#587FBC;}
a:visited {color:#587FBC;}
a:hover {color:#69B5D4;}

a:link img {border: 1px solid #000;}
a:visited img {border: 1px solid #000;}
a:active img {border: 1px solid #000;}

Li {list-style: circle;}

.main {
margin: 0px auto;
float: middle;
width:730px;
text-align: left;
background: #ffffff;
border-top: 1px solid #000;
border-Left: 1px solid #000;
border-Right: 1px solid #000;
}

.top {
float: top;
border-bottom: 1px solid #000;
height: 100px;
background: url(topbg.jpg);
background-color: #d1edf3;
}

.Footer {
Text-Align: Right;
width: 730px;
padding: 3px 5px 3px 0px;
border: 1px solid #000;
background: #e8ecec;
font-size:11px;
text-decoration:none;
font-weight:500;
Color: #f7f6e3;
font-family:verdana, arial, helvetica, sans-serif;
}

.hmenu {
padding: 3px 0px 3px 0px;
float: left;
width: 33%;
border-bottom: 1px solid #000;
background: #e8ecec;
}

.hmenu a {
color:#587FBC;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

.hmid {
padding: 3px 0px 3px 0px;
float: left;
width: 34%;
border: 1px solid #000;
border-top: 0px;
background: #e8ecec;
}

.hmid a {
color:#587FBC;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

.vmenu {
Margin: 10px 7px 7px 0px;
padding: 3px 3px 3px 3px;
float: Left;
border: 1px solid #000;
border-left: 0px;
background: #e8ecec;
}

.vmenu a {
color:#587FBC;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

The code for my horizontal menu is pretty disgusting, but I couldn't figure out how to do it... so for some reason the middle link is separate from the other two. There's gotta be a better way to do this...

Also, I have no idea why the footer at the very bottom isnt centering??

And my bullets don't look right either! gah!! Any help?

Vladdy
10-13-2004, 04:43 AM
Valid HTML is the first step in debugging CSS

gohankid77
10-13-2004, 04:46 AM
Change the copyright symbol to "©" first of all!

Roy Sinclair
10-13-2004, 05:30 PM
It helps if you provide a link to the resource:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thefrankinpress.com%2F&charset=utf-8+%28Unicode%2C+worldwide%29&ss=1&verbose=1

Fixing the copyright symbol problem will allow the validation to proceed at which time you'll find that you are missing things like the <ul> </ul> tags which should be around one of your menu lists and other problems in the html.

Once those problems are fixed then you've got a solid basis for fixing the problems with the CSS, until then though you can't count on anything because you can't be sure how the browser is handling the html problems and different browsers will handle those problems in different ways making it impossible to get the CSS to work right across those browsers.

KingDawg
10-13-2004, 06:26 PM
Cool!

gohankid77
10-13-2004, 06:32 PM
Oh yeah, I don't think anybody has said this yet:
Welcome to CodingForums.com!

KingDawg
10-13-2004, 06:56 PM
Hmm... I changed the copyright symbol to "&copy;" and it's still saying


Sorry, I am unable to validate this document because on line 120 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

gohankid77
10-13-2004, 07:43 PM
I get validation errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thefrankinpress.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&verbose=1).

Roy Sinclair
10-13-2004, 08:30 PM
I see you've got it looking pretty much the same now in Firefox as in IE and that you've eliminated all those html errors. So, did you have to change the CSS any or did it all work once the html was good?

KingDawg
10-13-2004, 08:31 PM
Yea, I found out it was my "-" doing it so i replaced it with "&ndash;", was on my way back to here and my connection died.

Alright, it tentatively validates in HTML 4.0 and validates in CSS now. Rock on, thanks alot for the help and also for the welcome :D

KingDawg
10-13-2004, 08:34 PM
I had to make some changes to the CSS. My original horizontal menu was pretty retarded, so I just looked up a tutorial on it and went with that.

JamieR
10-13-2004, 08:45 PM
you need a content type tag in your html

add this to your html above your stylesheet reference:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

then try and re validate it
-Jamie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum