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 26
  1. #1
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts

    Weird margins appearing when under XHTML 1.1 Doctype

    My page is at: http://f1unleashed

    The code of the logo and nav bar is:
    Code:
    <h1><a href="/index.php"><img src="/logo.jpg" alt="F1 Unleashed" class="logo" /></a></h1>
    <p class="links"><a class="links" href="/index.php">News / Home</a> *
    <a class="links" href="/calendar.php">Calendar</a> * 
    <a class="links" href="/championship.php">Championships</a> * 
    <a class="links" href="/circuits.php">Grand Prix</a> * 
    <a class="links" href="/drivers.php">Drivers</a> * 
    <a class="links" href="/forums/">Forums</a></p>
    and the CSS for that is:
    Code:
    h1 {
    background-image: url('http://f1unleashed.com/h1bg.jpg');
    background-repeat: repeat-x;
    cursor: pointer;
    color: #ffffff;
    text-align: left;
    font-family: arial, veranda, sans-serif, sans-serif;
    font-size: 2.25em;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 0;
    }
    
    p, td, ul, li {
    color: #000000;
    text-align: left;
    font-family: arial, veranda, sans-serif;
    font-size: 0.9375em;
    }
    
    p.links {
    background-color: #98CAFD;
    background-image: url('http://f1unleashed.com/menubg.png');
    background-repeat:no-repeat;
    text-align: center;
    padding: 2px 0px 2px 0px;
    cursor: pointer;
    margin-top: 0px;
    font-weight: bold;
    }
    
    img.logo {
    margin-bottom:0px;
    }
    
    a.links:link {color: #000000}
    a.links:visited {color: #000000}
    a.links:hover {color: #000064}
    a.links:active {color: #000064}
    a.links {text-decoration: none;margin-top:0;}
    I know that most of those margin-top/bottoms are probably useless, but I was just trying to remove the gap all together.
    Last edited by gsnedders; 09-21-2004 at 09:51 PM. Reason: Adding Andrew's padding

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Try padding: 0; for your <h1>.

  • #3
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Nope, still not fixed.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What exactly is the problem? I don't see anything particularly "weird"...

    You want that header image to be snug against the viewport edges? My guess is that you need to remove margins from the body.

    Just for kicks, try:

    * { margin: 0; padding: 0; }

    If THAT doesn't remove whatever you think shouldn't be there, then there's something else awry.

    Edit: Am now thinking you don't want the space between the nav and the header? For one: Why's your menu a paragraph? As for why that space is there, I can't be sure. I can only guess that another rule in your stylesheet has more specificity over these rules you've shown us and is applying margins to them. Check your "p" rules. Try * { -moz-outline: 1px solid #f00; } to see the outlines of all the boxes on the page. Often handy. Right now I'd say you have another rule overriding these ones.
    Last edited by AaronW; 09-21-2004 at 10:02 PM.

  • #5
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    OK, I changed the <h1>'s margin-bottom to -10px, and all is now well... as for why my nav bar is a <p>, what should it be?

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    body {margin:0;}
    You're not actually sending that page as application/xhtml+xml. It's still being sent as text/html. As you're using PHP, you can use the header function to send the correct MIME type.

  • #7
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by hemebond
    Code:
    body {margin:0;}
    You're not actually sending that page as application/xhtml+xml. It's still being sent as text/html. As you're using PHP, you can use the header function to send the correct MIME type.
    Also, in my previous post I said I had fixed my problem, which was the gap between the logo and the nav bar...
    Anyhow, if you do want to have body {margin: 0;}, I think I read somewhere that you should put html, body {margin: 0;} for compatibility with Safari...


    Your browser obviously isn't telling PHP it supports application/xhtml+xml, as header.php, which is included to be the header is:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
            "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="generator"
    content="HTML Tidy for Mac OS (BBTidy vers 1st December 2002), see www.w3.org" />
    <meta http-equiv="Content-Type" content="<?php
    $mime = "text/html";
    if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) {
            if(preg_match("/application\/xhtml\+xml;q=([01]|0\.\d{1,3}|1\.0)/i",$_SERVER["HTTP_ACCEPT"],$matches)) {
                    $xhtml_q = $matches[1];
                    if(preg_match("/text\/html;q=q=([01]|0\.\d{1,3}|1\.0)/i",$_SERVER["HTTP_ACCEPT"],$matches)) {
                            $html_q = $matches[1];
                            if((float)$xhtml_q >= (float)$html_q) {
                            $mime = "application/xhtml+xml";
                            }
                    }
            } else {
                    $mime = "application/xhtml+xml";
                    }
    }
    echo $mime;
    ?>; charset=ISO-8859-1" />
    <title>F1 Unleashed :: <?php print $strPagetitle; ?></title>
    <link rel="stylesheet" type="text/css" href="/style.css" media="all" />
    <link rel="stylesheet" type="text/css" href="/print.css" media="print" />
    <link rel="shortcut icon" href="http://geoffers.uni.cc/favicon.ico" /> 
    </head>
    <body>
    <h1><a href="/index.php"><img src="/logo.jpg" alt="F1 Unleashed" class="logo" /></a></h1>
    <p class="links"><a class="links" href="/index.php">News / Home</a> *
    <a class="links" href="/calendar.php">Calendar</a> * 
    <a class="links" href="/championship.php">Championships</a> * 
    <a class="links" href="/circuits.php">Grand Prix</a> * 
    <a class="links" href="/drivers.php">Drivers</a> * 
    <a class="links" href="/forums/">Forums</a></p>
    
    <h2><?php print $strPagetitle; ?></h2>
    PHP tags playing with DOCTYPE... arg...
    Last edited by gsnedders; 09-21-2004 at 10:30 PM.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your <p> should be a <ul>, as menus are lists. Not a huge biggy, but they just make more sense as lists (and you'll avoid the bit of classitis you've got going on there)

    Code:
    <ul id="menu">
      <li><a href="#">blah</a></li>
      <li><a href="#">blah</a></li>
      <li><a href="#">blah</a></li>
    </ul>
    CSS:

    Code:
    #menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    #menu li {
      display: inline;
    }
    That should give you something similar to what you have now. You'll have to add the background colours and borders etc to the relevant objects, though.

    By the way: Why you using XHTML 1.1? XHTML 1.0 is acceptibly sent as text/html, but XHTML1.1 as text/html seems to be very much discouraged by the gurus. Unless you're the type of designer who just flips IE users the bird and forwards them to mozilla.org... Heh.

  • #9
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Error 404
    Your browser obviously isn't telling PHP it supports application/xhtml+xml
    My browser sends
    Code:
    Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
    I am using Firefox 1.0PR. What you're doing is adding a meta tag, not sending the correct headers. They're completely different. One is an HTML element, the other is a set of instructions sent from the server. I provided you with a link to the exact function required to send the correct headers.
    Also, in my previous post I said I had fixed my problem, which was the gap between the logo and the nav bar...
    True. There is usually a length of time between when I open a thread, and when I reply to it. Your post wasn't there when I opened the thread.

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What you need to be doing is:

    header ("Content-Type: application/xhtml+xml");

    So rather than echoing it into the meta tag, use this at the top of your pages (VERY top, nothing before it - not even whitespace)

    PHP Code:
    <?
      $mime 
    'text/html';
      if (
    stristr ($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')
        if (
    preg_match ('/application\/xhtml\+xml;q=([01]|0\.\d{1,3}|1\.0)/i'$_SERVER['HTTP_ACCEPT'], $matches))
        {
          
    $xhtml_q $matches[1];
          if (
    preg_match ('/text\/html;q=q=([01]|0\.\d{1,3}|1\.0)/i'$_SERVER['HTTP_ACCEPT'], $matches))
          {
            
    $html_q $matches[1];
            if ((float) 
    $xhtml_q >= (float) $html_q$mime 'application/xhtml+xml';
          }
        } else 
    $mime 'application/xhtml+xml';
      
      
    header ('Content-type: ' $mime);
    ?>

  • #11
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Look, I'm not the one who wrote that script... also, why link to the us4 mirror, the mirror you should link to is uk2

    There also isn't much difference between what the server tells the browser, and what the browser parses from the XHTML... It's only IE which won't follow what you put in the <meta> tag...

    As for putting the menu as a list... I never thought of that... Well, it'll change...
    Last edited by gsnedders; 09-22-2004 at 06:35 PM.

  • #12
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When you convert that menu to a list (and you will, 'cause you want to do good work), you can make use of the :after or :before pseudo classes and the content property to insert those * dividers where you need them. Don't make them part of the list item because, well, they're not

  • #13
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Just to keep you happy I've sent the mime as a header as well, and turned the menu into a list...

  • #14
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by ]|V|[agnus
    When you convert that menu to a list (and you will, 'cause you want to do good work), you can make use of the :after or :before pseudo classes and the content property to insert those * dividers where you need them. Don't make them part of the list item because, well, they're not
    Arg... another clash of Mac encoding and *nix encoding... It was meant to be &nbsp;...

  • #15
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Writing more meaningful markup should be done for you, not us!

    Pity you don't need to use those selectors to insert the phantom asterisks. Those selectors and the content property are a great tool for keeping markup more pure. Not supported by IE, of course, but oh well.


  •  
    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
    •