Problem with fielset layout

hey folks,
i have a fieldset. in which the legend the text display. showing 1 of 2 and it has next and previous arrow for going on next record and back. i am having trouble. i have 2 fieldset boxes.floating next to eachother and both have showing 1 of 2 (depending on record set). i can’t make the arrows sit at place. here is my code


<fieldset class="lBox">  
          <?php
         
        if($Prev_Page)
        {
            echo "<span class=\\"prv\\"><a href='$_SERVER[SCRIPT_NAME]?Page=$Prev_Page'><img title=\\"Previous Record\\" src=../images/previous.png border=0 /></a></span>";
        }
        
          
         if($Num_Rows != 0)
         {
          ?>

             <legend>&nbsp;Displaying &nbsp;<?php echo $Page; ?>&nbsp;of&nbsp;<?php echo $Num_Rows;?>  Meters</legend>
            <?php
         }
        if($Page!=$Num_Pages)
        {
            echo "<span class=\\"nxt\\"><a href='$_SERVER[SCRIPT_NAME]?Page=$Next_Page'>&nbsp;<img title=\\"Next Record\\" src=../images/next.png border=0 /></a></span>
            ";
        }
          
        ?>

and here is the css

span.prv{width:11px; height:15px;top:-12px; position:relative;}
span.nxt{width:11px; height:15px;top:-8px;left:180px; position:absolute;}

need help guys!
here is a image of what is happening

It would be better if you could show the generated HTML. The PHP code is of no use here.

Generated HTML as in? i didn’t got what u mean

Ralph means; what you see after the page has been parsed by the PHP parser/server and loaded in the browser not the raw PHP statements themselves.

here is the first fieldset


<fieldset class="lBox">  
          
             <legend>&nbsp;Displaying &nbsp;1&nbsp;of&nbsp;2</legend>

            <span class="nxt"><a href='page.php?Page=2'>&nbsp;<img title="Next Record" src=../images/next.png border=0 /></a></span>
             <img class="addIcon" src="../images/add.png" title="Add" border="0" href="#" id="view"/>
</fieldset>

and the 2nd fieldset


<fieldset class="rBox"> 
          <span class="prv"><a href='....'><img title="Previous Record" src=../images/previous.png border=0 /></a></span>
             <legend>&nbsp;Displaying &nbsp;2&nbsp;of&nbsp;3</legend>
            <span class="nxt"><a href='.....'>&nbsp; &nbsp;<img title="Next Record" src=../images/next.png border=0 /></a></span>           

Hi,

If you want the arrows next to the text then why don’t you put them in the same element and then you won’t have to position them much ?

I don’t think the legend is the correct element to be applying pagination to as it should be the description for the form controls only.

Anyway something like this should work.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.prv {margin:0 10px 0 0;}
.nxt {margin:0 0 0 10px;}
.prv,.nxt,.prv img, .nxt img{
    display:inline;
    border:none;
    text-decoration:none;
}
.prv img, .nxt img{vertical-align:middle}
</style>
</head>
<body>

<fieldset class="rBox">
<legend><a class="prv" href='....'><img title="Previous Record" src="../images/previous.png" alt="prev" /></a>&nbsp;Displaying &nbsp;2&nbsp;of&nbsp;3<a class="nxt" href="#"><img title="Next Record" src="../images/next.png" alt="next"  /></a></legend>

</fieldset>
</body>
</html>


The legend is pretty hard to style at best of times and is best left alone being just a legend describing the form controls contained within the fieldset.

Pagination is a completely separate element with a different function.

Paul is on the right track – and word of advice, you’ll find your code a lot less of a train wreck if you use ECHO instead of constantly dropping in and out of parse mode for no good reason with <?php ?> – but there’s a reason I consider using php as a ‘on/off scripter’ to be a crutch for people coming from crappy languages instead of using it like a real programming language.

It also helps not to drag execution to a crawl by doing the double quote escape double quote nonsense. Single quotes are faster, and you don’t have to turn the code into a confusing MESS by escaping everything.

Some carriage returns and tabs wouldn’t hurt either… and TITLE doesn’t belong on IMG, ALT does. You want to use TITLE put it on the ANCHOR.

It also wouldn’t hurt to get rid of the things that have no business in modern markup like the border attribute, non-breaking spaces to do padding and white-space:nowrap’s job, and as paul pointed out lose the span being used to do what can be directly done to the anchor.

… and as Paul mentioned, legend is a pain in the ass to style, which is why I usually put a dummy span inside the legend and APO it off the fieldset or div wrapping the fieldset (since fieldsets also are completely unpredictable cross-browser).


<?php

echo '
<div class="lBox"><fieldset>
	<legend><span>',(!$Prev_Page ? '' : '
		<a
			href="'.$_SERVER[SCRIPT_NAME].'?Page='.$Prev_Page.'"
			title="Previous Record"
			class="prv"
		>
			<img
				 src="../images/previous.png"
				 alt="<<" 
			/>
		</a>'),($Num_Rows== 0 ? '' : '
			Displaying'.$Page.' of '.$Num_Rows.' Meters'
		),($Page==$Num_Pages ? '' : '
				<span class=\\"nxt\\">
		<a href="'.$_SERVER[SCRIPT_NAME].'?Page='.$Next_Page.'"
			title="Next Record"
			class="nxt"
		>
			<img 
				src="../images/next.png"
				alt=">>"
			/>
		</a>'),'
	</span></legend>';
          
?>

It sucks to put the extra div around the fieldset and the span inside the legend, but you cannot trust either element for to accept styling the same way cross browser but you need them for semantics – so you have to use semantically neutral wrappers to fix that.

… and don’t give me that horse hockey you hear from php developers on how it’s too hard to make clean code output or use single quotes instead of doubles, because, well… there it is :smiley:

deathshadow the php isn’t my designed. neither i like the way that guy writes the code. i m just the designer guy :slight_smile: