Renegade605 Posted March 13, 2008 Share Posted March 13, 2008 I'm having a problem with the CSS navigation bar on my site. The CSS indicates that an anchor (<a>) should have a background image (the navigation button) with a specific height. However, on some pages it doesn't work, the image height is cut to only be as tall as the text, which is about half of what it should be. Through trial and error I found that it was the <!DOCTYPE> declaration causing this (deduced because it was one of 3 common elements, and removing it solved the problem). I don't want to remove that from my documents, so does anyone know why this might happen?P.S. If anyone needs a better description of the problem, I can post CSS, HTML, and screenies. Link to comment Share on other sites More sharing options...
Ingolme Posted March 13, 2008 Share Posted March 13, 2008 If you remove the <!DOCTYPE> your page will be running in quirks mode, meaning it's representing the page incorrectly.I recommend giving your <a> element a "line-height" CSS property, or giving it "display: block; float: left;" and assigning a width and height.Edit: Ouch, I didn't mean display: none, I meant display: block. Link to comment Share on other sites More sharing options...
jeffman Posted March 13, 2008 Share Posted March 13, 2008 (Hi, Ingolme!)I'd recommend putting the anchor in a div or a span and letting that container hold the background image. I've found sizes and positioning to be much more predictable. Link to comment Share on other sites More sharing options...
Renegade605 Posted March 14, 2008 Author Share Posted March 14, 2008 @Ingolme: Can't use display: block, that (obviously) make each anchor on a separate line, and I can't have that because they all need to be connected horizontally. I also can't use float: left because the bar should be centered.The "line-height" property half worked. Apparently what it does is set the amount of space above the line, so now the top-half of the image (above the text) is displayed, but the bottom-half (below it) still does not. I'll post my CSS and HTML. Lol, caught your edit too. It stuck me as odd that you would suggest a display: none...@Deirdre's Dad: I've thought of that, and tried it once. However the problem arose that the background of one specific section changes images to be a hover image so it's hard if not impossible to make the background change if it's all stored in the background div. On top of that, not all the buttons are the same width, some being small (64px eg) some being larger (2x wider eg), making it especially hard to use hover images.CSS (Located in external/stylesheet.css) div#navigation{ text-align: center;}div#navigation a{ background-image: url('../images/buttons/nav/nav_normal.gif'); height: 41px; width: auto; display: inline; text-align: center; padding-left: 6px; padding-right: 6px; padding-top: 12px; padding-bottom: 0px;}div#navigation a:hover { background-image: url(../images/buttons/nav/nav_hover.gif); }div#navigation a#nav_current { background-image: url(../images/buttons/nav/nav_current.gif); }div#navigation a#nav_left { background-image: url(../images/buttons/nav/nav_left.gif); width: 24px; }div#navigation a#nav_right { background-image: url(../images/buttons/nav/nav_right.gif); width: 24px; } HTML (Located on index.html, slightly variated for other pages) <!-- <!DOCTYPE> (XHTML 1.0 Strict), <html> (with xmlns), <head>, <title>, and <meta> --><link rel="stylesheet" type="text/css" href="external/stylesheet.css" /><!-- <script>(s), </head>, and <body> --><div id="navigation"> <a id="nav_left"></a><a href="index.html" id="nav_current">Home Page </a><a href="http://forums.theunitedfrontclan.com/index.php">Forums </a><a href="recruitment.php">Recruitment </a><a href="clan_information.html">Clan Information </a><a href="tools.html">Tools </a><a href="server_rules.html">Server Rules </a><a id="nav_right"></a></div><!-- More Content, </body>, </html> --> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.