...

View Full Version : Weird margins appearing when under XHTML 1.1 Doctype



gsnedders
09-21-2004, 07:53 PM
My page is at: http://f1unleashed

The code of the logo and nav bar is:
<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:
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.

Antoniohawk
09-21-2004, 09:46 PM
Try padding: 0; for your <h1>.

gsnedders
09-21-2004, 09:51 PM
Nope, still not fixed.

AaronW
09-21-2004, 09:57 PM
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.

gsnedders
09-21-2004, 10:09 PM
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?

hemebond
09-21-2004, 10:22 PM
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 (http://us4.php.net/manual/en/function.header.php) to send the correct MIME type.

gsnedders
09-21-2004, 10:23 PM
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 (http://us4.php.net/manual/en/function.header.php) 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:
<!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...

AaronW
09-22-2004, 12:01 AM
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)


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

CSS:



#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.

hemebond
09-22-2004, 12:57 AM
Your browser obviously isn't telling PHP it supports application/xhtml+xmlMy browser sends
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5I 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.

AaronW
09-22-2004, 01:14 AM
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)



<?
$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);
?>

gsnedders
09-22-2004, 06:32 PM
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 :p

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

]|V|[agnus
09-22-2004, 07:04 PM
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

gsnedders
09-22-2004, 07:07 PM
Just to keep you happy I've sent the mime as a header as well, and turned the menu into a list...

gsnedders
09-22-2004, 07:10 PM
|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;...

]|V|[agnus
09-22-2004, 07:11 PM
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.

AaronW
09-22-2004, 07:46 PM
When I write lists, I tend just give the first element a class:

<ul id="menu">
<li class="first">...</li>
<li>...</li>
</ul>

Then if I want anything to seperate the menus, I just save that graphic and apply it as a background to the top-left of all #menu li elements, applying margin-left to nudge them all over. Then I tell #menu li.first not to have a background image. In an ideal world you could use ul li:first-child and the content thing.

AaronW
09-22-2004, 07:49 PM
Woah, dude... I just looked at your source and your menu is:



<ul class="links">
<li class="links"><a class="links" href="/index.php">News / Home</a></li>
<li class="links"><a class="links" href="/calendar.php">Calendar</a></li>
<li class="links"><a class="links" href="/championship.php">Championships</a></li>
<li class="links"><a class="links" href="/circuits.php">Grand Prix</a></li>
<li class="links"><a class="links" href="/drivers.php">Drivers</a></li>
<li class="links"><a class="links" href="/forums/">Forums</a></li>
</ul>


What's with all the classes?!

You should only need this:



<ul id="menu">
<li><a href="/index.php">News / Home</a></li>
<li><a href="/calendar.php">Calendar</a></li>
<li><a href="/championship.php">Championships</a></li>
<li><a href="/circuits.php">Grand Prix</a></li>
<li><a href="/drivers.php">Drivers</a></li>
<li><a href="/forums/">Forums</a></li>
</ul>


To select the li elements, use #menu li. To select the a elements, use either #menu li a or just #menu a. :)

Something very much worth reading: http://css.maxdesign.com.au/selectutorial/

Gives you an idea what you've got to work with, and which browsers they work with.

gsnedders
09-22-2004, 08:16 PM
The classes... Because that's how I code... It's how I'm used to working with... and using things like ul.links li in the CSS just confuses me, because I expect each li to have a class, although I have a thorough understanding of how these work, it's how I code.

]|V|[agnus
09-22-2004, 08:20 PM
That's fine, but it's still bad technique.

Descendant selectors are pretty straightforward. How do they confuse you?

gsnedders
09-22-2004, 08:24 PM
It's the fact that there's no class in the XHTML...

]|V|[agnus
09-22-2004, 08:30 PM
Because there doesn't need to be one... inheritance is assumed, so if your <ul> is marked as being your mainNav (<ul id="mainNav">), it's assumed all of the <li>s within it share a common set of properties unique to the main navigation. Putting a class attribute on all of them is redundant.

I mean, this idea comes from a basic concept that supercedes computers: general classification. You assume all mammals have certain similar characteristics because that's what makes them mammals. What makes them stand out is what they get a more specific classification for.

That might have been a terrible example... but I gotta say, I'm not sure how to explain this. It's one of those things that seems like, "DUH!" to me, so maybe I'll just let somebody else try...

gsnedders
09-22-2004, 08:52 PM
It's not that I don't understand how it works or anything like that, I just for some odd reason ask myself, "How is it getting that style, it's not under li {}..."

It's just one of those things... :p

AaronW
09-22-2004, 08:56 PM
Indeed...

I liken it to writing a comment for every single element you have on the page, no matter how many other instances of that same element you may already have.

#links li versus #links li.links seems clearer to me when I think that "li" is an actual tag, and #links is its parent.

Perhaps you'd prefer to include the tag in the id selector:

ul#menu li {}

To me that screams <ul id="menu"><li>. If you get in the habbit of it, I bet it will for you too.

You should take advantage of the cascading abilities of CSS, as it'll save you loads of time in more complex layouts, not to mention bandwidth (not that a few bytes are even remotely significant for a site that isn't get beaten with traffic).

]|V|[agnus
09-22-2004, 08:59 PM
Error,
I understand! Believe me, I do. I have plenty of those things. Brains is weird things sometimes. But try to get over this one, man! Your code suddenly becomes cleaner, lighter, etc. J00 can d00 eet!~!1

gsnedders
09-22-2004, 09:11 PM
|V|[agnus']Brains is weird things sometimes.

Hehe... you should've seen the PMs I've been sending George...

hemebond
09-22-2004, 10:04 PM
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 :pIt was the link served to me.
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...There is a huge difference. You need to read this (http://www.webstandards.org/learn/askw3c/dec2002.html). The gist of it is, the browser should follow what the server tells it. And most browsers do. Which is why I can't read the Unicode website, because they're serving their HTML as text. Internet Explorer doesn't support XHTML at all, and in many cases ignores what the server tells it, resulting in servers incorrectly configured (which is why people using good browsers get served movies as text). This is wrong, and this is why you need to set your server to send pages with the correct MIME type.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum