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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    link tag outside of html tag

    can some explain why this is:

    i am linking a stylesheet
    when the header code looks like this:
    Code:
    <!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">
    <head>
    <link rel="stylesheet" type="text/css" href="../../community/inventory.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    the page looks mostly right but spacing and my relative and aboslute positioning and alignments are totaly wrong

    when the header code looks like this:
    Code:
    <link rel="stylesheet" type="text/css" href="../../community/inventory.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">
    <head>
    <link rel="stylesheet" type="text/css" href="../../community/inventory.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    it looks correct

    even if i comment out the link tag above the document delairation the spacing is as intended
    Code:
    <!--<link rel="stylesheet" type="text/css" href="../../community/inventory.css" />-->
    why is this happening?

  • #2
    Senior Coder djm0219's Avatar
    Join Date
    Aug 2003
    Location
    Wake Forest, North Carolina
    Posts
    1,304
    Thanks
    4
    Thanked 204 Times in 201 Posts
    Without the doctype being the very first line you are throwing browsers into quirks mode and they're doing the best they can with the styling. You should run your page through the validator and your CSS through the CSS validator and correct anything they find rather than masking the problem.
    Dave .... HostMonster for all of your hosting needs

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have actually done both
    my css and my HTML come out clean (baring the <link> prior to the <!document>) but the style only works properly with he link in line one

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    It would really help if you showed us the page in question.

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well you can go to the page but the www incarnation is currently just patched to work

    the local file is what i have been working on, just testing on my test server

    i can dump the entire page if you want

    Code:
    <!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" lang="en" xml:lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="./inventory.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <script type="text/javascript" src="./js_lib.js"></script>
     
     
    <title>Switch Community</title>
    </head>
     
    <body class="bg">
    <div align="right">
    	<div id="l_stat">Logged In</div>
    	<div id="l_name">matt</div>
    	<div><form name="log_bar" action="logout.php" method="post">
    									<span class="logbar">
    										<img id="log_bar1" class="logbar1" src="../../img/community/buttonup_01.png" alt="" />
    										<img id="log_bar2" class="logbar2" src="../../img/community/buttonup_02.png" alt="" />
    										<img id="log_bar3" class="logbar3" src="../../img/community/buttonup_03.png" alt="" />
    		<a class="button" style="margin-right=15px" onclick="document.log_bar.submit();" href="#" onmouseover="button_roll('log_bar')" onmouseout="button_roll('log_bar')">Log Out</a></span></form></div>
    </div><div class="content">
    <div class="title"><h1 class="title">Switch Database</h1><h1 class="shadow">Switch Database</h1><img class="title" src="../../img/community/title_marker.png" alt="" /><hr class="title" /></div>
    <form name="nav" method="post" action="">
    <div class="frame">
    <img class="frame" src="../../img/community/border_bottom_l.png" alt="" />
    <table>
    <tr><td>&nbsp;</td></tr>
    <tr>
    <td><span class="button"><img id="inventory_functions1" class="button1" src="../../img/community/buttonup_01.png" alt="" />
    						<img id="inventory_functions2" class="button2" src="../../img/community/buttonup_02.png" alt="" />
    						<img id="inventory_functions3" class="button3" src="../../img/community/buttonup_03.png" alt="" />
    						<a class="button" onclick="document.nav.action = 'inventory_functions.php';document.nav.submit();" href="#" onmouseover="button_roll('inventory_functions')" onmouseout="button_roll('inventory_functions')">Inventory Functions</a></span></td>
    </tr>
    <tr>
    <td><span class="button"><img id="stock_functions1" class="button1" src="../../img/community/buttonup_01.png" alt="" />
    						<img id="stock_functions2" class="button2" src="../../img/community/buttonup_02.png" alt="" />
    						<img id="stock_functions3" class="button3" src="../../img/community/buttonup_03.png" alt="" />
    						<a class="button" onclick="document.nav.action = 'stock_functions.php';document.nav.submit();" href="#" onmouseover="button_roll('stock_functions')" onmouseout="button_roll('stock_functions')">Stock Functions</a></span></td>
    </tr>
    <tr>
    <td><span style="width:200px" class="button"><img id="custom_templates1" class="button1" src="../../img/community/buttonup_01.png" alt="" />
    						<img id="custom_templates2" class="button2" src="../../img/community/buttonup_02.png" alt="" />
    						<img style="left:173px" id="custom_templates3" class="button3" src="../../img/community/buttonup_03.png" alt="" />
    						<a class="button" onclick="document.nav.action = 'custom_templates.php';document.nav.submit();" href="#" onmouseover="button_roll('custom_templates')" onmouseout="button_roll('custom_templates')">Custom Template Catalogue</a></span></td>
    </tr>
    <tr>
    <td><span class="button"><img id="event_functions1" class="button1" src="../../img/community/buttonup_01.png" alt="" />
    						<img id="event_functions2" class="button2" src="../../img/community/buttonup_02.png" alt="" />
    						<img id="event_functions3" class="button3" src="../../img/community/buttonup_03.png" alt="" />
    						<a class="button" onclick="document.nav.action = 'event_functions.php';document.nav.submit();" href="#" onmouseover="button_roll('event_functions')" onmouseout="button_roll('event_functions')">Event Functions</a></span></td>
    </tr>
    <tr>
    <td><span class="button"><img id="user_functions1" class="button1" src="../../img/community/buttonup_01.png" alt="" />
    						<img id="user_functions2" class="button2" src="../../img/community/buttonup_02.png" alt="" />
    						<img id="user_functions3" class="button3" src="../../img/community/buttonup_03.png" alt="" />
    						<a class="button" onclick="document.nav.action = 'user_functions.php';document.nav.submit();" href="#" onmouseover="button_roll('user_functions')" onmouseout="button_roll('user_functions')">User Functions</a></span></td>
    </tr>
    <tr><td>&nbsp;</td></tr>
    </table>
    </div>
    </form>
    </div>
    </body>
    </html>
    the ccs

    Code:
    html { 
    	overflow: hidden;
    }
    
    body { 
    	text-align:center;
    	background-color:#555555;
    }
    
    .report {
    	display: none;
    }
    
    .gobo {
    	border:none;
    }
    
    .bg {
    	background:url(../img/community/bg-01.png);
    	background-repeat:no-repeat;
    	background-position:right;
    	background-color:#555555;
    	background-attachment:fixed;
    	padding:0;
    	border:0;;
    	width:100%;
    	height:100%;
    }
    
    a:link {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	color:#FFFF00
    }
    
    a:hover {
    	color:#FFFF99;
    }
    
    a:visited {
    	color:#5A718B;
    }
    
    a.button {
    	width:100%;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    }
    
    a.button:link {
    	text-decoration:none;
    	color:#000000;
    }
    
    a.button:visited {
    	text-decoration:none;
    	color:#000000;
    }
    
    a.gobo:link {
    	border:none;
    }
    
    a.gobo:hover {
    	border:none;
    }
    
    a.gobo:visited {
    	border:none;
    }
    
    span.button {
    	width:140px;
    	height:30px;
    	text-align:center;
    	vertical-align:middle;
    	position:relative;
    }
    
    span.logbar {
    	width:60px;
    	height:30px;
    	text-align:center;
    	vertical-align:middle;
    	position:relative;
    }
    
    span.title {
    	position:relative;
    	text-align:left;
    	z-index:3;
    }
    
    div.title {
    	position:relative;
    	text-align:left;
    	z-index:3;
    }
    
    img.button1 {
    	width:auto;
    	height:25px;
    	left:2px;
    	position:absolute;
    	z-index:-1;
    }
    
    img.button2 {
    	width:100%;
    	height:25px;
    	left:14px;
    	position:absolute;
    	z-index:-1;
    }
    
    img.button3 {
    	width:auto;
    	height:25px;
    	left:115px;
    	position:absolute;
    	z-index:-1;
    }
    
    img.logbar1 {
    	width:auto;
    	height:25px;
    	right:60px;
    	position:absolute;
    	z-index:-1;
    }
    
    img.logbar2 {
    	width:75%;
    	height:25px;
    	right:18px;
    	position:absolute;
    	z-index:-1;
    }
    
    img.logbar3 {
    	width:auto;
    	height:25px;
    	right:-5px;
    	position:absolute;
    	z-index:-1;
    }
    
    img.title {
    	width:250px;
    	left:-120px;
    	top:-60px;
    	position:absolute;
    	z-index:-2;
    }
    
    img.frame {
    	position:absolute;
    	border-style:none;
    	left:-50px;
    	bottom:18px;
    	z-index:0;
    }
    
    h1.title {
    	width:100%;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#CCCCCC;
    }
    
    h1.shadow {
    	font-family:Arial, Helvetica, sans-serif;
    	color:#000000;
    	position:absolute;
    	left:-2px;
    	top:3px;
    	z-index:-1;
    }
    
    hr.title{
    	color:#000000;
    	position:absolute;
    	top:35px;
    	width:100%;
    	text-align:left;
    	z-index:-3;
    }
    
    .content {
    	width:65%;
    	text-align:left;
    	background-color:transparent;
    }
    
    .frame {
    	position:relative;
    	border-style:solid;
    	border-width:thin;
    	border-color:#000000;
    }
    
    table {
    	background:url(../img/community/black50.png);
    	width:100%;
    	border-style:solid;
    	border-color:#FFFF66;
    	border-width:thin;
    }
    
    
    td {
    	font-family:Arial, Helvetica, sans-serif;
    	color:#CCCCCC;
    	position:relative;
    	z-index:10;
    }
    Last edited by mmworm; 06-19-2009 at 11:31 PM. Reason: oops- here is the ccs

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    35
    Thanks
    4
    Thanked 1 Time in 1 Post
    Im not sure about this, so i have to ask, why are you using src="../../img/community/border_bottom_l.png"? Shouldnt ../ be enough to point out to root of web server?

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    not if the img directory is off of the root directory and the page is generated by a php script that is in a different directory calling a template file in yet another sub directory....

    ./
    /img/community/imgfile.png
    /community/templates/temptatefile.tpl
    /community/pagegenerator.php


    you're right- i'm dumb only one ../ is required

    either way this is not the issue
    Last edited by mmworm; 06-20-2009 at 05:31 PM. Reason: stupid


  •  

    Posting Permissions

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