Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display issues with the new update of Firefox and IE

    Hey all,

    I am fairly new to CSS, but I have done HTML and Scripting quite frequently in the past, so I am loving what I am learning. However, I must admit that I am having quite a bit of difficulty with the new update of Firefox (2.0.0.5), as well as IE (6 [sorry, I refuse to use 7]).

    Basically, I want a centered page inside a div content wrapper and a top nav. bar. Well, everything was looking just GREAT until the new update of Firefox. Now all of my text has been aligned to the left and the nav bar exceeds the header and content wrapper.

    Here is my HTML, in which I am still tweaking the internal CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
    /xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content-"text/html"; charset=iso-8859-1" />
    <meta name="keywords" content="St. Aloysius, LifeTeen, Life Teen, Jesus Christ, Hickory, NC, Catholic, Youth Group" />
    <meta name="description" content="St. Aloysius is a parish in Hickory, North Carolina. Lifeteen is a program specially directed towards high school youth and its goal is to lead teens closer to Christ." />
    <title>St. Aloysius Lifeteen | Leading Teens Closer to Christ</title>
    <style type="text/css">
    @import url(styles.css);

    .sidebar{
    width:200px;
    height: 70%;
    float:right;
    margin:10px;
    margin-top:5px;
    border: solid 2px #2892d7;
    padding: 10px;
    overflow:auto;
    }
    .sidebar h3{
    color:#666;
    font-size:.95em;
    letter-spacing:-1px;
    font-family: "Helvetica", "Verdana", Arial, sans-serif;
    margin:0;
    text-align:center;
    background:#a5d5f4;
    }
    .sidebar p{
    font-size:.8em;
    margin: 5px;
    }
    .copyright{
    font-size:.8em;
    font-style:italic;
    margin-top:25%;
    float:bottom;
    text-align:center;
    }
    </style>
    </head>
    <body class="bg">
    <div id="wrapper">
    <img alt="St. Aloysius Lifeteen" img src="images/stal_head3.jpg"/>

    <ul class="nav">
    <li><a href="index.html">Home </a></li>
    <li><a href="about.html">About </a></li>
    <li><a href=#>Calendar </a></li>
    <li><a href=#>Photos </a></li>
    <li><a href=#>Forum </a></li>
    </ul>
    <br><br>

    <div class="sidebar">
    <h3>From the Youth Minister</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci.</p>
    <br>
    <h3>Have You Heard?</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci.</p>
    </div>

    <h2>Welcome to St. Aloysius Lifeteen</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>

    <h2>Things you Need to Know</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>

    <h2>Where We Are Located</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</p>
    <div class="copyright">
    Copyright 2007 St. Aloysius Catholic Church
    </div>
    </body>
    </div>
    </html>
    And my external CSS for the nav bar, etc:

    body{
    background: url(images/stripe4_bg.jpg);
    background-repeat:repeat-x;
    background-position:top left;
    }

    ul.nav{
    margin-left:0px;
    margin-top:-5px;
    padding-right:5px;
    list-style:none;
    border: 1px solid #000;
    float:left;
    width:98%;
    background: url(images/nav_bg.jpg) repeat-x left top;
    }
    ul.nav li{
    float:left;
    }
    ul.nav a{
    display:block;
    padding: 5px 15px 5px 15px;
    border-right:1px solid #000;
    margin-right: 5px;
    font-family:"Century Gothic";
    font-weight:bold;
    font-variant: small-caps;
    text-align:center;
    text-decoration:none;
    color:#000;
    }
    ul.nav a:hover{
    background:#ff954f;
    }

    h2{
    color:#666;
    font-family: "Helvetica", "Verdana", Arial, sans-serif;
    font-size:1em;
    letter-spacing:-1px;
    line-height: 100%;
    margin-bottom:0px;
    margin-top:23.5px;
    border-bottom: solid 2px #2892d7;
    overflow: hidden;
    zoom:1;
    }

    p{
    margin-top:0;
    margin-bottom:10px;
    color:#000;
    font-family:Verdana, Arial, sans-serif;
    font-size:.8em;
    overflow:hidden;

    }

    #wrapper{
    width:800px;
    height:830px;
    margin: 0 auto;
    padding: 0 8px 15px 15px;
    border: 1px solid #666666;
    background:url(images/body_bg.jpg);
    }
    Knowing me, it is probably a very simple solution that I just looked over in my haste. If someone could possibly offer their help I would be GREATLY appreciative.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to your CSS
    Code:
    * {
    margin:0;
    padding:0;
    }
    You may want to validate your document. http://validator.w3.org
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh wow I feel like a moron. That solved the problem immediately! Thank you so much - you certainly live up to the "Supreme Coder" ranking. Now, could you explain to me WHY this worked? As happy as I am to know WHAT I fixed, I would love to learn the "why" as well.

    Thanks again!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well browsers have default margins/padding on some elements. This varies among browsers. Using the universal select * will make all margins and padding on all elements 0. This is gives you a better starting point in cross browser CSS. Now you just have to manually add in padding/margin where needed.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks! Now for another problem with floating images.

    Excellent. Seems to make sense. So is that "kosher" for me to have a universal selector in my CSS in professional web design?

    And, as a matter of fact, I have yet ANOTHER problem. As you can see in my code, I have a nice little sidebar that is floated to the right side of my page. Now, I want to put a small image in that sidebar that is floated to the right.

    The code I would use in the internal CSS:

    .sidebar img{
    float:right;
    }
    And then just put the image in the HTML. The problem comes, yet again, with Firefox. The problem seems just fine in IE, and the text actually wraps around the image. In Firefox, the text wraps...but the browser seems to read the img as if the height is that of the first paragraph, so the text gets spread very far down my sidebar and forces a scrollbar in my sidebar (which is supposed to happen if the text exceeds my preset height of the sidebar). Does that make sense? I could post an image if that would help.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No you aren't making sense. You really shouldn't set any heights that you know will have content in them.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I'm setting the height because it was the only way to keep the sidebar from extending beyond my content wrapper - but that does not matter. Here is the problem I'm talking about:

    In Firefox:


    In IE:


    As you can see, the same code turns out differently in Firefox. In IE, the content wraps around my floated image (yes I am aware about the padding). I cannot figure out what would be so different between Firefox and IE to not let the content wrap around the image in a sidebar...

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Post a link to your site.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, but I have not published my site yet.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •