Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It only looks right in IE!

    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 and see what i'm doing wrong? Here's my stylesheet:

    Code:
    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?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Valid HTML is the first step in debugging CSS
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Change the copyright symbol to "©" first of all!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It helps if you provide a link to the resource:

    http://validator.w3.org/check?uri=ht...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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool!

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh yeah, I don't think anybody has said this yet:
    Welcome to CodingForums.com!

  • #7
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #10
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •