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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer CSS Link & Layout Help

    I have uploaded my first XHTML & CSS layout ( yey!) to http://spyderz.port5.com/index.html. However, I have two problems, both on the hosted version and locally. All but one link (the one that reads "XHTML 1.0") do not have the style I set in the style sheet (http://spyderz.port5.com/style.css), but revert to my browser settings (IE 6.0 ). I thought that external style sheets overide user preferences? I have checked the style sheet and HTML file thoroughly, but I can't find anything wrong.

    Secondly, there is a small gap between my header image and menu. This might be an IE problem, but I have tried everything I can think of and it still doesn't work , so if any of you guys could find of some kinda remedy, it would be most appreciated !

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here are the problems I see with your page in Firefox:

    Not centered like in IE
    A gap between your bottom section and your menu (not present in IE)


    What browser are you using to test every time to make sure it works? I recommend testing with Firefox and then correcting it for IE (if you are even concerned about cross-browser rendering).

    Your centering problem is due to an IE bug. It misapplies the text-align attribute. Keep it, but add

    margin: 0 auto;

    to the the body element (I think). Adjust "auto" to your liking for centering, although this is a menu, so I think you want just the text centered rather than the entire page.
    Last edited by gohankid77; 09-19-2004 at 04:27 PM.

  • #3
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am testing it with IE - I used to have Firefox but it kept crashing Windows so I uninstalled it.

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What version of Windows and what version of Firefox? Also, have you tried Mozilla or Netscape?

  • #5
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Windows XP Pro, and I'm not quite sure what version of Firefox, but the .EXE file say 1.0PR. And no, I haven't tried Mozilla or Netscape but I might try them.

    Edit: I still can't get the links to work, they keep changing between my style sheet and IE default
    Last edited by chilipie; 09-19-2004 at 06:47 PM.

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you have predefined your browser colors in IE (which tells IE to disregard site colors), you will get IE's colors, not your style sheet's. As specified in CSS2, a user's style sheet overrides an author's style sheet.

  • #7
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How do you "undefine" the IE colours? Secondly, IE uses my stylesheet for the a:hover, but the predefined colours for a:link, visited, active, which doesn't make sense.

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I have Windows ME, but I'll see if I can help anyway...

    Go to your Internet Properties (Tools-->Internet Options) and click the 'Colors' button. You should be able to figure out the rest.

  • #9
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks gohankid77 ! It looks loads better now, but I think I might get Mozilla for testing (I spent about 4 hours today trying to get that to work, and it was just stupid IE ). However, if anyone knows how to remove the gap between the header and menu bar that would be great as well .

  • #10
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't see a gap between the menu bar and the header, but between the footer and the menu bar (only in Firefox).

    /* Edit */

    Hmm... The hover effects don't work in Firefox...

    /* Edit */

    Duh! I forgot! :link and :visited need to come AFTER :hover!
    Last edited by gohankid77; 09-19-2004 at 08:16 PM.

  • #11
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by gohankid77
    Your centering problem is due to an IE bug. It misapplies the text-align attribute. Keep it, but add

    margin: 0 auto;

    to the the body element (I think). Adjust "auto" to your liking for centering, although this is a menu, so I think you want just the text centered rather than the entire page.
    margin: 0 auto; should be applied to the element that you want centered.

  • #12
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wahey ! It's centered in Mozilla! Thanks guys, you've helped loads . There are 2 things I still don't understand though - in Mozilla there is a gap between the menu/content area and the footer/content area. In IE though, there is only a small gap between the menu/content area, but not one by the footer. Also my links only half work in Mozilla and IE, so it can't be an IE problem.

    N.B. If you're bored stupid with all these annoying posts you don't have to answer - but remember, I know where you live... .

    Kidding !

    Last edited by chilipie; 09-20-2004 at 07:31 PM.

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I took the liberty of cleaning up some of your code and getting rid of those gaps. They were created by some weird margin on the paragraphs. Nothing that a little css couldn't fix.

    CSS:
    Code:
    /* copyright 2004 redblizzard design */
    
    
    body {
    
    background : transparent url(images/back.gif) fixed;
    
    font : small Arial, Helvetica, sans-serif;
    
    text-align : center; 
    
    color : #000;
    
    }
    
    
    
    #header {
    
    height : 100px;
    
    width : 650px;
    
    margin: 0 auto;
    
    background: transparent url(images/header.gif) no-repeat;
    
    }
    
    
    #menu { 
    
    width : 650px; 
    
    padding : 0; 
    
    background-color : #c00;
    
    margin: 0 auto;
    
    }
    
    
    
    #content {
    
    width : 650px; 
    
    background-color : #fff;
    
    margin: 0 auto;
    
    padding: 0;
    
    }
    
    #content p {
    
    background-color : #fff;
    
    padding-top: 1%;
    
    padding-bottom: 1%;
    
    margin: 0;
    
    }
    
    
    
    #bottom { 
    
    width : 650px;
    
    background-image : url(images/bottom.gif); 
    
    font-size: small;
    
    margin: 0 auto;
    
    }
    
    
    
    #menu a:link, #menu a:visited {
    
    color: #000;
    
    font : bold small Arial, Helvetica, sans-serif; 
    
    background-color : #c00; 
    
    text-decoration : none; 
    
    } 
    
    
    
    #menu a:hover {
    
    color: #c00;
    
    font-weight: bold;
    
    background-color : #000; 
    
    text-decoration : none; 
    
    }
    
    
    
    #content a:link, #content a:visited {
    
    color: #c00;
    
    background-color : #fff; 
    
    text-decoration : none; 
    
    }
    
    
    
    #content a:hover {
    
    color: #000;
    
    font: small Arial, Helvetica, sans-serif; 
    
    background-color : #fff; 
    
    text-decoration : underline; 
    
    }
    
    
    
    #bottom a:link, #bottom a:visited {
    
    color: #000;
    
    font-weight : bold; 
    
    background-color : transparent; 
    
    text-decoration : none; 
    
    }
    
    
    
    #bottom a:hover {
    
    color: #c00;
    
    font-weight : bold; 
    
    background-color : transparent; 
    
    text-decoration : none; 
    
    }
    HTML:
    Code:
    <body>
    <div id="header"></div>
    
    <div id="menu">
      <a href="index.html" title="home">home</a> | 
      <a href="services.html" title="services">services</a> | 
      <a href="aboutus.html" title="about us">about us</a> | 
      <a href="portfolio.html" title="portfolio">portfolio</a> | 
      <a href="contact.html" title="contact">contact</a>
    </div>
    
    <div id="content">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tempor. Curabitur adipiscing quam placerat pede. In hac 
        habitasse platea dictumst. Mauris ac eros in ligula consequat cursus. Aenean metus neque, accumsan et, interdum in, 
        hendrerit vitae, leo. Quisque ante. Aliquam augue sapien, venenatis a, consectetuer eget, varius eget, sapien. Donec 
        elementum feugiat lectus. Aliquam blandit, wisi quis venenatis egestas, orci dolor volutpat orci, id rhoncus arcu sem sed 
        nunc. Sed rutrum magna nec nulla. Aenean erat mauris, lobortis quis, tempor vitae, cursus id, ante. Aliquam vel ante a 
        magna tempus hendrerit.
      </p>
      <p>
        Sed ac dui et eros tristique consectetuer. Aenean lacinia. Vivamus vitae sem vitae risus vulputate semper. Suspendisse eget 
        <a href="index.html" class="content" title="link">nibh fermentum</a> lectus mollis fringilla. Nam velit sapien, bibendum 
        commodo, mollis vel, lacinia et, diam. Mauris placerat ultrices dolor. Fusce a quam id risus pulvinar hendrerit. Nulla 
        pretium. Sed condimentum. Morbi blandit vehicula turpis.
      </p>
    </div>
    
    <div id="bottom">
      Copyright &copy; 2004 redblizzard Design. All rights reserved. 
      <a href="http://validator.w3.org/check?uri=referer" title="This page uses valid XHTML 1.0.">XHTML</a> | 
      <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page uses valid CSS.">CSS</a>
    </div>
    </body>

  • #14
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thank you SO MUCH!!!! Everything works now! You are so kind .

    Sorry I didn't reply before, my network wasn't working so I couldn't get online.

  • #15
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Dumb question .. what's "margin: 0 auto" do exactly?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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