-
[CSS] Help
Right, if you go on my site
http://www.jakeyjames.com/
The buttons are displayed perfectly in FireFox but terribly in Internet Explorer.
Heres the css code
HTML Code:
@charset "utf-8";
/* CSS Document */
body, html
{
background: #69696A;
margin: 5px;
font-family: Tahoma;
font-size: 11px;
color: #333233;
padding: 0;
}
tr, td, div
{
font-family: Tahoma;
font-size: 11px;
color: #333233;
}
#container
{
text-align: left;
margin: 0px auto;
background: url('images/container.png');
width: 769px;
}
#innercontainer
{
text-align: left;
margin: 0px auto;
background: url('images/inner_container.png');
width: 743px;
}
#bottom
{
text-align: left;
margin: 0px auto;
background: url('images/bottom.png');
width: 769px;
height: 13px;
}
#logo
{
float: left;
background: url('images/logo.png');
width: 379px;
height: 156px;
}
#logocontainer
{
background: url('images/logo_container.png');
height: 156px;
position: relative;
}
#logocontainer #text
{
position: absolute;
bottom: 0px;
padding-left: 370px!important;
padding-left: 230px;
margin-left: 0px;
}
#logoleft
{
background: url('images/logo_left.png');
height: 156px;
width: 15px;
float: right;
}
#bar
{
background: url('images/bar.png');
height: 82px;
color: #7c7c7c;
}
#bar2
{
text-align: left;
margin: 0px auto;
background: url('images/gradient.png') repeat-x;
height: 4px;
width: 755px;
}
#barleft
{
background: url('images/bar_left.png');
height: 82px;
width: 8px;
float: left;
}
#barright
{
background: url('images/bar_right.png');
height: 82px;
width: 8px;
float: right;
}
#footer
{
background: url('images/footer.png');
height: 36px;
color: #7c7c7c;
}
#content
{
background: url('images/content.png');
width: 95px;
height: 25px;
}
#contentcontainer
{
background: url('images/contentcontainer.png');
width: 513px;
height: 25px;
float: right;
}
#spacer
{
background: url('images/spacer.png');
height: 4px;
width: 6px;
float: left;
}
#spacer2
{
height: 4px;
width: 6px;
float: left;
}
#side
{
background: url('images/side.png');
width: 220px;
color: #FFFFFF;
padding-top: 24px;
padding-left: 5px;
}
#sideheadlines
{
background: url('images/side.png');
padding-left: 5px;
width: 220px;
color: #FFFFFF;
}
img
{
border: 0px;
}
Can you help?
-
Could you work out how to display it in internet explorer, then use this php code to chose the right stylesheet:
PHP Code:
<?php
$browser = $_SERVER['HTTP_USER_AGENT'];
if($browser == "ie") {
$style = "ie.css";
} elseif($browser == "firefox") {
$style = "ff.css";
} else {
$style = "other.css";
}
?>
<html>
<head>
<link rel="stylsheet" type="text/css" href="<?php echo $style ?>" />
<title>Browser Specific Stylesheets ;)</title>
</head>
<body>
*Your crud here*
</body>
</html>
Haven't tested, but I'm pretty sure that will work. Please correct me if I'm wrong.
-
dont use a table for the navigation. put it in a seperate div such as
#nav {
width:100px;
background-image:"navbutton.png";
}
then just put the home, blog portfolio etc in as text. it will load faster aswell.
