[CSS] Help

Jibbish · 11-02-2008, 08:32 AM

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?

L?KE · 11-02-2008, 03:48 PM

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.

kk. · 11-02-2008, 04:02 PM

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.

Thread: [CSS] Help

Thread Tools

[CSS] Help

Posting Permissions