PDA

View Full Version : My Css is messed up.

Rswinney
04-12-2007, 10:48 PM
Hey all, I run the site http://perderte.org, I've implemented a new layout, which works perfectly on my Mac via Safari, but when checking it in IE and Firefox the CSS is mucked up completely.

Here's how it looks in Safari:
http://perderte.org/designs/images/perderteonline2.jpg

And in Firefox/IE:
http://www.perderte.org/images/Untitled.jpg

Also here is a copy of my Index Code:
<html>
<head>
<title>Perderte.Org &middot Designs &middot Portfolio &middot Blog </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="hover.js"></script>
<link ref="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
</head>

<?php include('/home/rswinney/public_html/header.php'); ?>

<div id="content">
<?PHP
$number=4;
include("/home/rswinney/public_html/cutenews/show_news.php");
?>

</div>
<?php include('/home/rswinney/public_html/footer.php'); ?>

</body>
</html>

And my CSS:
body{
background-image: url('images/bg.gif');
background-repeat: repeat-y;
border-width: 2px;
border-color: #328C50;
font-family: tahoma, arial;
font-size:10px;
color:#000000;
background-color:#818181;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

table {
font-family: tahoma, arial;
background-color:#A9CED5;
font-size:10px;
color:#000000;
}

a:link, a:visited {
font-size:10px;
color:#267081;
letter-spacing:1px;
text-decoration:none;
}

a:hover, a:active {
font-size:10px;
color:#3EB568;
letter-spacing:1px;
text-decoration:underline;
}

b {
color:#366B5E;
}

i {
font-family: times new roman;
font-size:14px;
font-color:#366B5E;
}

.h1 {
background-color: #329AA4;
font-size: 7pt;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
text-align: left;
letter-spacing: 0px;
line-height: 8px;
color: #FFFFFF;
padding: 4px;
}

.content {
position: absolute;
left: 299px;
top: 392px;
width: 409px;
padding: 0px;
background-color: #A9CED5;
}

.bottom {
background-color: #E5EBEC;
text-align: justify;
}

.em {
background-color: #D4DD9C;
color: #626D21;
font-size: 7pt;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
text-align: left;
letter-spacing: 0px;
line-height: 8px;
padding: 4px;
}




Sorry for the long post, but I just wanted to give you all the help I could give. Any advice on the matter is greatly appreciated.
westmatrix99
04-13-2007, 06:32 AM
<script type="text/javascript" src="hover.js"></script>
<link ref="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

You have two .css files you only posted one.
What do those javascript files do?
Don't post the content just explain what each file does.

Cheers
_Aerospace_Eng_
04-13-2007, 06:37 AM
They are for an image gallery, http://jquery.com/demo/thickbox/
I use the same one on my site. I think the issues here are coding with tables, not using a valid doctype, and likely having invalid code. Mainly this line
<link ref="stylesheet" href="style.css" type="text/css"/>
Notice anything wrong?

Also you have 49 coding errors, see them here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fperderte.org%2F). One of them is in the line I pointed out.
westmatrix99
04-13-2007, 06:50 AM
They are for an image gallery, http://jquery.com/demo/thickbox/ (http://jquery.com/demo/thickbox/)



Why not use a flash image viewer in your PHP, much quicker and it's free.
I don't like paying for stuff that I need on any of my sites.
Cheers
_Aerospace_Eng_
04-13-2007, 07:10 AM
Thickbox is also free. Flash can also become bulky. Not everyone has it either. With thickbox the user still sees the larger image if they have JS disabled, its just not in a neat fashion.