Welcome to WebmasterWorld Guest from 18.208.186.19

Forum Moderators: open

Message Too Old, No Replies

Nested Block SPAN within DIV doesn't look good in FF 3

Difference between intended (which works in IE) and FF display

     
9:36 am on Sep 13, 2008 (gmt 0)

New User

10+ Year Member

joined:Sept 13, 2008
posts: 1
votes: 0


Hi,

What I want is pretty simple. A DIV with a header SPAN that includes 2 "buttons" on the right side for triggering other options, followed by data fields.

I have a containing DIV then a <P> with 2 SPANS floating right (the buttons) and then, after the </P>, a bunch of SPANS floating left for prompts and data.

In Opera, IE, Chrome it looks fine. In FF 3 the 2 navigation buttons are rendered below the panelHeader <P> instead of inside it.

I have tried SPAN in stead of P, and DIV instead of SPAN for the panelHeader, and used overflow: auto, and tried <BR> with clear: both after the navigation spans, but nothing gets FF to display properly.

I've re-read W3C guidelines and I think I'm in compliance, but I must be off somewhere if FF isn't rendering properly!

Any advice is appreciated!

---------------------
<!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-US" xml:lang="en-US">
<head>
<title>Nesting Div Buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
body {margin: 0px;
padding: 0px;
white-space: normal;
}
.panelHead{
margin-top: 2px;
padding-left:4px;
padding-right:0px;
margin-bottom: 2px;
font-weight: bold;
font-size: 14px;
color : #3097FF;
font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
height: 24px;
background-image: url(/images/misc/fadedblue.gif);
/*display: block;
float: left;*/
}
.fieldLabelText {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
color: #606060;
padding-left: 10px;
margin-bottom: 1px;
margin-top: 4px;
display: block;
float: left;
}
.widePanelEdit {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
color: #000000;
padding-left: 3px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
float: left;
display: block;
}
.navigation {
width: 4em;
background-color: #BAC4FF;
margin: 0;
margin-right: 5px;
margin-top: 3px;
margin-bottom: 3px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
display: block;
float: right;
}
.navigation a {
color: #303030;
padding: 3px 3px 3px 3px;
text-decoration: none;
font-weight: normal;
}
.navigation a:hover {
color: #FFF;
background-color: #69C;
}
/* ]]> */
</style>
</head>
<body>
<DIV id=application style="background-color: #F7F7FF;
width: 364px; height: 270px; margin: 5px;
border: 1px #3097FF solid">
<p id=head2 class=panelHead
style="width: 360px;">Application
<SPAN class="navigation"><a href="#">Edit</a></SPAN>
<SPAN class="navigation"><a href="#">New</a></SPAN>
</p>
<SPAN class=fieldLabelText style="width: 79px;">Date</SPAN>
<SPAN style="width: 5px; display: block; float: left;">
<img border=0 src="/images/misc/pixel.gif"></SPAN>
<SPAN class=fieldLabelText style="width: 113px;">Interviewer</SPAN>
<SPAN style="width: 5px; display: block; float: left;">
<img border=0 src="/images/misc/pixel.gif"></SPAN>
<SPAN class=fieldLabelText style="width: 113px;">Referred By</SPAN>
<SPAN style="width: 5px; display: block; float: left;">
<img border=0 src="/images/misc/pixel.gif">
</SPAN>
<SPAN class=widePanelEdit name=applicationdate
style="width: 79px;" id=applicationdate>23/08/2008
</SPAN>
<SPAN class=widePanelEdit name=interviewer
style="width: 113px;" id=interviewer>Carol
</SPAN>
<SPAN class=widePanelEdit name=referredby
style="width: 113px;" id=referredby>self
</SPAN>
</DIV><!-- END BLOCK -->
</BODY>
</HTML>

2:24 pm on Sept 14, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Weclome aboard pcrosley! You may get more help in the CSS forum. Spans are inline elements, I don't think they will float correctly. Try using a more semantic approach, such as a list:

<ul id="head2" class="panelHead"
style="width: 360px;">Application
<li><a href="#">Edit</a></li>
<li><a href="#">New</a></li>
</ul>

You can style the list items inline, removing padding and margins, to get a horizontal navigation. A less semantic style that will work is to use nested divs, as divs are block elements:

<div id="head2" class="panelHead"
style="width: 360px;">Application
<div><a href="#">Edit</a></div>
<div><a href="#">New</a></div>
</div>