Forums | MacLife

Hmm, I really hope you're right, but that also worries me a bit because it makes the web even MORE unpredictable... bad enough as it is. (Fun stuff.)

I'll take a screen shot and get back to ya.

Hmm, I set a few of those to zero. The only relevant ones I wouldn't have are html and p... could try that. Good chance!

The rendering is consistent between FF and IE, but not between machines, e.g. it almost doesn't seem like the browsers are the problem but I'm not sure.

penguinsocks wrote:

But that also worries me a bit because it makes the web even MORE unpredictable... bad enough as it is. (Fun stuff.)

No truer words can be spoken.  The web is VERY unpredictable, the user is the one in control, not the the person who designs the site

I always expect perfection.

Just don't use any graphics and only use <p> tags. 

I like the PDF idea Miles... brilliant!

-mark

I got a screen shot for y'all...



The site has not launched yet so that's why there's messy bits I've erased.

So as you can hopefully see, the menu is sitting at the top of the window instead of nestled against the main "frame" of the site. There's also supposed to be a banner back there. If you need it I'll show you what it's supposed to look like but I'd have to edit out some information.

Any ideas? Thanks!!

Last edited by penguinsocks (2007-09-25 11:15 am)

Ah! Of course. Silly me. The code isn't sensitive.

And just to reiterate, the screen shot above is from the home PC that displays it all wonky, whereas the work PC displays it correctly.


Sliding doors CSS menu imported into the main stylesheet (took out part of the urls):

#menu {
    height: 28px;
    width: 778px;
    text-align: left;
    margin: 0;
}

#menu ul {
width: 778px;
margin: 0; padding: 0;
list-style-type: none;
}

#menu ul li {
float: left;
}

#menu a {
    color: #fff;
    text-decoration: none;
}


    li.about a {
    width: 189px;
    height: 28px;
    display: block;
    background: url("images/about.jpg") no-repeat left top;
    text-indent: -999px;
    text-decoration: none;
    }
   
    li.about a:hover, body#about li.about a {
    background: url("images/about_over.jpg") no-repeat top;
    }


    li.faq a {
    width: 77px;
    height: 28px;
    display: block;
    background: url("images/faq.jpg") left top no-repeat;
    text-indent: -999px;
    text-decoration: none;
    }
       
    li.faq a:hover, body#faq li.faq a {
    background: url("images/faq_over.jpg") no-repeat top;
    }
   
    li.how a {
    width: 168px;
    height: 28px;
    display: block;
    background: url("images/how.jpg") left top no-repeat;
    text-indent: -999px;
    text-decoration: none;
    }
   
    li.how a:hover, body#how li.how a {
    background: url("images/how_over.jpg") no-repeat top;
    }
   
    li.blank a {
    width: 344px;
    height: 28px;
    display: block;
    background: url("images/null.jpg") left top no-repeat;
    text-indent: -999px;
    text-decoration: none;
    }
   
    li.blank a:hover, body#blank li.blank a {
    background: url("images/null.jpg") no-repeat top;
    }


#menu {
  background:url("images/about_over.jpg") no-repeat;
  background-position:-1000px -1000px;
}

#menu {
  background:url("images/faq.jpg") no-repeat;
  background-position:-1000px -1000px;
}


#menu {
  background:url("images/how_over.jpg") no-repeat;
  background-position:-1000px -1000px;
}


and the main stylesheet:

body {
    padding: 0;
    margin: 0 auto 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}

#container {
    text-align: center;
    margin: 12px auto 0 auto;
    width: 778px;
    height: auto;
    position: relative;
    top: 0px;
}

img {
    display: block;
}

#banner {
    width: 100%;
    height: 125px;
    position: relative;
    top: 0px;
}

#content {
    position: relative;
    top: 0px;
    width: 778px;
    padding: 0 0 24px 0;
    min-height: 531px;
      height:auto !important;
      height: 531px;
    background: #1A1A1A url("images/center.jpg") repeat-y left top;
    margin-left: 0px;
}

etc.

D'oh. Sorry, I am SO distracted.

<body id="home">

<div id="container">

    <div id="banner">    
        <?php include('includes/top.html'); ?>    
    </div>

    <div id="content">

include contains ( absolute URLs stripped out):

    <a href="index.php"><img src="images/banner.jpg" /></a>
            <div id="menu">
                <ul class="menu">
                <li class="about"><a href="about.php">About</a></li>
                <li class="faq"><a href="faq.php">FAQ</a></li>
                <li class="how"><a href="who/" target="_blank">How...?</a></li>
                <li class="blank"><a href="#"></a></li>
                </ul>
            </div>

So in other words:

<body id="home">

<div id="container">

    <div id="banner">    
            <a href="index.php"><img src="images/banner.jpg" /></a>
            <div id="menu">
                <ul class="menu">
                <li class="about"><a href="about.php">About</a></li>
                <li class="faq"><a href="faq.php">FAQ</a></li>
                <li class="how"><a href="who/" target="_blank">How...?</a></li>
                <li class="blank"><a href="#"></a></li>
                </ul>
            </div>    
    </div>

    <div id="content">

Last edited by penguinsocks (2007-09-25 6:14 pm)

Does he use his own style sheet?  Set his own fonts?  Use an unusually large system font?   User styles take precidence for the "cascading" part of CSS.

penguinsocks wrote:

Not as far as I know because usually I have no problem rendering my sites on his computer... doesn't set his own fonts, nor large... I don't think he'd know how to actually hah.

Did he buy his computer new or used? If he got it used, the previous owner might have changed the browser prefs.

It was new.

Thanks, Altivec, that sounds like a good idea.
He just upgraded his IE6 to 7 so I'll check it out there too.