[SOLVED] Help with Mozilla positioning

PHP_PhREEEk · November 17, 2007

Hi -

I'm an old skool table programmer struggling with CSS. I could go off on a rant right about now, but I won't... I'm really trying to invest the time necessary to have as much control with CSS as I have with table layouts, so bitchin' about it won't help.

I've posted the following code. The left side menu area lines up just fine in IE7, but has this padded left area under Firefox 2.0.0.9

No matter what I do, I cannot get both IE and FF to agree on how to render this. I've spent about 2 days cramming on CSS positioning and browser workarounds, but am left with no solution. Any help appreciated!

PhREEEk

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Page - Login</title>
<style type="text/css">

/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
    padding:0;
    margin:0;
    background:#888888;
    color: #000000;
    font-family: Trebuchet MS;
}
#outer{
    min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    margin-left:160px;
    background:#888888;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-bottom:-52px;
    color: #000000;
}
* html #outer{height:100%;margin-left:157px}/* ie 3 pixel jog*/ 
#header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#888888;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    overflow:hidden;
    color: #000000;
}
#left {
    position:relative;/*ie needs this to show float */
    width:160px;
    float:left;
    margin-left:-159px;/*must be 1px less than width otherwise won't push footer down */
    padding-top:72px;/*needed to make room for header*/
    left:-1px/* line things up exactly*/
}
* html #left {margin-right:-3px}/* three pixel jog*/
#left p {padding-left:3px;padding-right:2px}


#footer {
    width:100%;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #888888;
    color: #000000;
    text-align:center;
    position:relative;
}
* html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #centercontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

a:link {
    color:#333333;
    text-decoration: none;
}
a:vlink {
    color:#333333;
    text-decoration: none;
}
a:visited {
    color:#333333;
    text-decoration: none;
}
a:alink {
    color:#333333;
    text-decoration: none;
}
a:hover {
    color:#DDDDDD;
    text-decoration: underline;
}
input {
    background-color: #BBBBBB;
    border: 0px;
}
textarea {
    background-color: #BBBBBB;
    border: 0px;
}
td.right {
    text-align: right;
}
span.error {
    color: #FFFF00;
}

/* Nav Testing */
ul#nav {
list-style:none;
    margin:0px;
}
#nav li,ul#nav li a {
    line-height:32px;
    display:block;
}
ul#nav li a {
    border-bottom:1px solid #000;
    text-decoration:none;
    text-indent:8px;
    font-weight:bold;
    color:#000;
}
ul#nav li a span {
    float:left;
    height:24px;
    width:10px;
    margin:4px;
    background:#ccc;
}
ul#nav li a:hover {
    background:#999;color:#fff
}
ul#nav li a:hover span {
    background:#ccc
}

</style>
</head>

<div id="outer"> 
  <div id="left"> 
    some text
    <div>
      <ul id="nav">                              
        <li><a href="#"><span></span>Home</a></li>
        <li><a href="#"><span></span>About Us</a></li>
        <li><a href="#"><span></span>Services</a></li>
        <li><a href="#"><span></span>Consulting</a></li>
        <li><a href="#"><span></span>Case Studies</a></li>
        <li><a href="#"><span></span>News</a></li>
        <li><a href="#"><span></span>Contact Us</a></li>
      </ul>
    </div>
  </div>
  <div id="clearheader"></div><!-- clear header -->
  <div id="centercontent"><!-- center content -->
    <div style="padding: 4px;">
      <p>
      Welcome to My Page!</p>
      <p>

      Please Login to continue:</p>
    </div>
    <form name="login" method="post" action="mypage.php">
    <table border="0" cellpadding="4" cellspacing="0">
      <tr>
        <td class="right">Username:</td>
        <td><input name="user" type="text" size="30" maxlength="30" value="">
      </tr>

      <tr>
        <td class="right">Password:</td>
        <td><input name="pass" type="password" size="30" maxlength="30" value="">
      </tr>
      <tr>
        <td colspan="2" style="padding-top: 20px;"><input type="submit" value="Login"></td>
      </tr>
    </table>

    </form>
  </div>
  <div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer">
  <div style="padding: 4px;">
    <a href="http://validator.w3.org/check?uri=referer"><img style="float: left;" src="http://www.w3.org/Icons/valid-html401-blue"
    alt="Valid HTML 4.01 Transitional" border="0" height="31" width="88"></a>
  </div>
</div>
<div id="header">
  <div style="padding: 4px;"><h3>My Page [HEADER]</h3></div>
</div>
</body>
</html>

PHP_PhREEEk · November 17, 2007

Did all the CSS experts go on vacation this weekend..??

heh

PhREEEk

bronzemonkey · November 18, 2007

You're simply dealing with varied browser default styles that need to be reset. Dump this at the top of your css and the FF/IE7 differences will disappear. Then modify your existing styles to include the padding/margins that you are looking for.

/* CSS RESET
----------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {padding:0; border:0; margin:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100.01%; font-family:inherit; vertical-align:baseline;}

ol, ul {list-style:none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}

It shouldnt be necessary to have so many style declarations aiming to correct margin differences in IE6 either. There is also no need to take IE5 into consideration anymore and you should try to avoid the use of semantically meaningless "clearheader/clearfooter" divs. And you might be better served using a background image in your navigation links rather than an empty span element.

But you have some other problems with your code that will be pointed out by the w3c validators - http://www.w3.org/QA/Tools/

- It doesn't contain <body> directly after </head>

- You css contains non-existent pseudo-classes (:alink, :vlink)

Hope that helps you out. Always a good idea to use some form of css reset to start with a "blank canvas" rather than battle against different browser default styles!

PHP_PhREEEk · November 18, 2007

Hi Bronze, and thanks man! The problem has in fact disappeared for now.

If I could bother with a few more questions so that I can get a better understanding...

Firstly, I have never seen such a huge 'CSS Reset' line before. Is this now standard procedure for getting different browsers to agree on rendering?

Onto my original CSS list... I was searching around for column layouts and ran across a site that had some nice 2 and 3 column styles with anchored footers. Maybe the site was a bit old (hence the references for IE5)? At any rate, if you could modify it for me and strip out what's unnecessary and/or add what's relevant for today (and still maintain the overall styling), that would be really cool. If there exist an even better overall solution, I'd be willing to go with that, I'm just Googled out for now. Fact is, this is a new personal project, and since I'm just working on the template right now, there is no content or anything yet to prevent me from tossing out the bath water and starting over. Since I've never seen a CSS file with so much bloat in it, I'm feeling that this isn't the correct solution, even if it 'appears' to work and render.

Cheers,

PhREEEk

bronzemonkey · November 18, 2007

Firstly, I have never seen such a huge 'CSS Reset' line before. Is this now standard procedure for getting different browsers to agree on rendering?

Everyone should use some form of reset to override the browser defaults. The one I posted is based on Eric Meyer's latest reset. It doesn't actually provide you with a totally blank slate because IE will render <em> and heading tags with italic/bold styles, while most other browsers will not. I added the 100.01% for font size to correct a font-size discrepancy in Opera.

If you google "css reset" you'll get a whole bunch of different resets from different people. The key is simply to use a reset that targets all the elements that you are using or that suits your personal tastes. So if you have no tables or forms in your code there is no point in resetting their styles.

if you could modify it for me and strip out what's unnecessary and/or add what's relevant for today

You could just remove anything that says it is targeting IE5. The best way is just to keep playing around, spying on the source code of websites, reading some blog posts/ebooks/tutorials, and generally build up knowledge for yourself at whatever pace you are happy with. If it's just a personal project then you've got the time to get something working and worry about perfecting the code later when you've had the time to learn things.

PHP_PhREEEk · November 18, 2007

Thanks for the clear guidance...

PhREEEk

Sign In

[SOLVED] Help with Mozilla positioning

Recommended Posts

PHP_PhREEEk

Link to comment

Share on other sites

PHP_PhREEEk

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

PHP_PhREEEk

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

PHP_PhREEEk

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information