16 replies [Last post]
Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

Hello ... I'm in need of help once again ...

I'd like to make a custom dropdown box that's inside a div tag ... it works fine so far in Internet Explorer and Opera ... in Firefox however the div tag slips below the <p> tags that are below it although I have assigned a higher z-index to the dropdown div ...

Here's the link to the test page .... http://www.boardgames.at/bgattest/test.php

Sorry for the bad layout of the PHP file as the dropdown is javscript created but not formatted yet ...

You can watch the CSS file ... the dropdown declarations are at the bottom of the file ...

Thanks for any help I can get ...

Greetings ... Andreas.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV below &lt;p&gt; tag in Firefox

I think you are approaching this from the wrong angle and your also OD'ing on the styling.

Use a select in your HTML code. Then use javascript to hide that select and replace it with your construct. That way if someone doesn't have javascript enabled they still get the select box.

Your common style rule seems over the top. Overflow hidden on every element in particular. Font properties are inherited. You only need to declare them once. That'll give you something like

* { margin: 0; padding: 0; }
body {
font: 66% Verdana, Arial, Helvetica, sans-serif;
color: #666;
background: ...
}

There is no need to specify widths (and other properties) when their default values will work. Doing this will keep your CSS simple which will make it easier to maintain.

For get your JS. Create a page with your html structure on it, then add the styles one by one (use something like editCSS in FF) to get the look you want.

Once that's done, write your JS to find all select tags and replace them with your construct.

If you hunt around the web you'll most likely find already written versions that work just fine.

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

Hello ... thanks for answering ...

As for the definitons of my CSS file ... I HAVE declared the font style only once and there IS a default size for it ... the only font properties I adjust accordingly are font-weight and color ... but my design requires that little bit of flexibility ...

I can't go for a javascript-free webpage ... so if people don't have it enabled they just will have a lot of restrictions on my site ... too many things on my page already require enabled javascript ...

I'm actually happy with the way my dropdown workaround is implemented ... it's juts that issues with the drop being behinf the <p> tags ...

Once I have more time and if a lot of people are complaining about the javascript issue I will take care of that later ....

For now I only have to get rid of that particular issue ...

Thanks ... Andreas.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV below &lt;p&gt; tag in Firefox

I'd still put in a real select and replace it as being simpler than having the script tag where the select would be, but whatever...

You might find this useful, http://www.easy-designs.net/articles/replaceSelect/

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

Thanks Chris ... I appreciate your help ... I'll take a look at it ...

But replacing the select tags would not solve my problem I guess ....

I'd like to know the reason for that behaviour of Firefox cause it might come up in another form somewhere else ...

Greetings ... Andreas.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

DIV below &lt;p&gt; tag in Firefox

I think you missed Chris's point. You must always start with fully functional html. Then you add the style rules, followed by whatever javascript you need/want. That is not to say you can't have all sorts of js widgets and wingdings, only that a page should work without them; or without styles, for that matter. Your js can rewrite the whole page, if you wish, but the core content and markup lies beneath.

You will not get complaints, because those folks will simply go away.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

Hello Gary ... I understand your point and I try to keep my javascript use at a minimum because I'm no expert in it and I don't wont to overcomplicate things ....

But as you might have seen in the code of that page, my site is heavily build on XAJAX with is using javascript ... so I can't get around that anyway ...

I've read that article about the select replacement and it looks like a nice method ...

Anyway ... that problem I have with my version of the dropdown is a CSS issue right? ... and I'd like to know what I'm doing wrong in CSS here that makes it behave like that in Firefox ...

Thanks ... Andreas.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV below &lt;p&gt; tag in Firefox

My point is the link is to someone who has done something similar to what you have done. Their styles don't have the same problem. Take a look at how they are doing it.

I feel your styling is too complex, a side effect of that is your page isn't a simple thing to investigate.

My other point is that the javascript is irrelevant to the CSS problem. So put together a page with no javascript, but with the html structure that would be in place if the javascript had run, then style it - step by step.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

DIV below &lt;p&gt; tag in Firefox

I must just reinforce what Gary and Chris are saying, when you initially posted the question I had a look through the CSS and also came back to it later and spent some time with it and failed to get to grips with the rules, they are fundamentally overly complex and prevented me tracking down the cause of the problem which might possibly be a fairly simple thing.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

Thanks Chris & Huge for the comments....

One thing I have to mention is, that the attached CSS includes the main CSS file which is mostly not used on that test page ... so for that little bit of HTML that CSS looks too much ... and it is ...

I have to say that I'm no CSS guru at all ... that why I'm in the beginner section here where I belong ... there might be some issues with complexity here but I assume, that it will take me some time and experience to get rid of them step by step ...

As Gary's footer comment says ... I'm a graphic designer and I'm about to make a pixel-perfect webpage ... otherwise I would not care for that stupid selection box that much ... that's why the CSS might be a bit too complex and detailed ... I'm also a bit finicky .... that's why I always write "margin: 2px 0px 0px 0px" instead of "margin-top: 2px" ... just for conformity

Anyway ... here Hugo is the part of the CSS that has to do woth the problem ... maybe you can take another look upon it ...

/* DROPDOWN_01 */
.dropdown_01 {
   width: 144px;
   position: absolute;
}
   /* DROPDOWN_01 - HEADER */
   .dropdown_01 .header {
      width: 144px;
      height: 2px;
      background-image: url(../../images/theme_01/dropdown144_hdr.gif);
      overflow: hidden;
   }
   
   /* DROPDOWN_01 - CONTENT */
   .dropdown_01 .content {
      width: 140px;
      border-left: 2px solid #6C737C;
      border-right: 2px solid #6C737C;
      background-color: #F2EDE7;
   }
   
      /* DROPDOWN_01 - CONTENT - DATA */
      .dropdown_01 .content .data {
         width: 122px;
         height: 14px;
         padding: 0px 0px 0px 4px;
         float: left;
      }
      
         /* DROPDOWN_01 - CONTENT - DATA - ENTRY */
         .dropdown_01 .content .data .selectedentry {
            height: 14px;
            text-decoration: none;
            float: none;
            display: block;
         }
      
         /* DROPDOWN_01 - CONTENT - DATA - ENTRY */
         .dropdown_01 .content .data .entry {
            height: 15px;
            padding: 1px 0px 0px 0px;
            text-decoration: none;
            outline: none;
            float: none;
            display: block;
         }
         
         /* DROPDOWN_01 - CONTENT - DATA - ENTRY - HOVER */
         .dropdown_01 .content .data .entry:hover {
            background-color: red;
         }
         
      /* DROPDOWN_01 - CONTENT - EXPANDBUTTON */
      .dropdown_01 .content .expandbutton {
         width: 14px;
         height: 14px;
         background-image: url(../../images/theme_01/dropdown_expand.gif);
         outline: none;
         float: right;
      }
      
      /* DROPDOWN_01 - CONTENT - EXPANDBUTTON - HOVER */
      .dropdown_01 .content .expandbutton:hover {
         background-position: 14px 0px;
      }
      
   /* DROPDOWN_01 - FOOTER */
   .dropdown_01 .footer {
      width: 144px;
      height: 2px;
      background-image: url(../../images/theme_01/dropdown144_foot.gif);
      overflow: hidden;
   }

Thanks .... Andreas

/edit :oops: apologies to anyone who saw this post before I corrected my mistake - I accidentally hit edit rather than quote. I hope I have restored it accurately. -- Chris..S

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

Besides ... if you could point out some of the bigger mistaskes I made here CSS-wise it would be nice if you could tell me which ones they are so Iwould not make them in the future again ...

Thanks ... Andreas.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV below &lt;p&gt; tag in Firefox

Can you also paste the HTML for the drop down. It doesn't show up in the code Wink

For the CSS, your comments mostly duplicate the style rule, so seem superfluous to me. Also the increasing indentation makes using tools like FF's edit CSS facility difficult - it puts the CSS in the sidebar, which is necessarily a limited width column.

Try this ...

.dropdown_01 {
  width: 144px;
  position: absolute;
  text-decoration: none;
}

.dropdown_01 .header {
  height: 2px;
  background-image: url(../../images/theme_01/dropdown144_hdr.gif);
  overflow: hidden;
}
	
.dropdown_01 .content {
  border-left: 2px solid #6C737C;
  border-right: 2px solid #6C737C;
  background-color: #F2EDE7;
}

.dropdown_01 .content .data {
  width: 122px;
  height: 14px;
  padding: 0px 0px 0px 4px;
  float: left;
}
		
.dropdown_01 .content .data .selectedentry {
  height: 14px;
  float: none;    /* possibly not necessary */
  display: block; /* possibly not necessary */
}

.dropdown_01 .content .data .entry {
  height: 15px;
  padding: 1px 0px 0px 0px;
  float: none; /* probably not necessary */
  display: block; /* probably not necessary */
}
			
.dropdown_01 .content .data .entry:hover {
  background-color: red;
}
			
.dropdown_01 .content .expandbutton {
  width: 14px;
  height: 14px;
  background-image: url(../../images/theme_01/dropdown_expand.gif);
  float: right;
}
		
.dropdown_01 .content .expandbutton:hover {
  background-position: 14px 0px;
}
		
.dropdown_01 .footer {
  height: 2px;
  background-image: url(../../images/theme_01/dropdown144_foot.gif);
}

I removed as many of the widths as possible. One to simplify the CSS and two as if you find yourself needing a wider selection box then you want to have as few widths to change as possible.

Personally, I'd use ems for the width, at all of the ones that contain text. If the user increases the font-size in their browser the select box will then expand with them.

I'd also position the expand button absolutely. This means you don't need to float the other content and therefore its width can be controlled without needing an explicit width - just give it enough right margin (or padding) to leave space for the expand button. By doing this, you now only have two widths to generate the whole thing. The overall width (should be ems) and the expand button width (its an image, so should be px). For the expand button, you could oversize the image, make it foreground and control its width and height with ems. That way the image would maintain a reasonable size relative to the font-size of the select box. Font-size increases, button increase.

Paste up the html as well and I'm sure someone will take a look at it.

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

OK ... I have cleaned up the CSS code a bit and removed as much as possible to make it easier to read ...

/* DROPDOWN_01 */
.dropdown_01 {
	width: 144px;
	position: absolute;
	overflow: hidden;
}
	/* DROPDOWN_01 - HEADER */
	.dropdown_01 .header {
		height: 2px;
		background-image: url(../../images/theme_01/dropdown144_hdr.gif);
		overflow: hidden;
	}
	
	/* DROPDOWN_01 - CONTENT */
	.dropdown_01 .content {
		width: 136px;
		height: 14px;
		padding: 0px 2px;
		border-left: 2px solid #6C737C;
		border-right: 2px solid #6C737C;
		background-color: #F2EDE7;
	}
		
		/* DROPDOWN_01 - CONTENT - SELECTED ENTRY */
		.dropdown_01 .content .selectedentry {
			height: 14px;
			padding: 0px 4px;
			text-decoration: none;
			display: block;										/* LINK AT FULL WIDTH */
		}
	
		/* DROPDOWN_01 - CONTENT - ENTRY */
		.dropdown_01 .content .entry {
			height: 15px;
			padding: 1px 4px 0px 4px;
			text-decoration: none;
			outline: none;
			display: block;										/* LINK AT FULL WIDTH */
		}
		
		/* DROPDOWN_01 - CONTENT - ENTRY - HOVER */
		.dropdown_01 .content .entry:hover {
			background-color: red;
		}
		
	/* DROPDOWN_01 - FOOTER */
	.dropdown_01 .footer {
		height: 2px;
		background-image: url(../../images/theme_01/dropdown144_foot.gif);
		overflow: hidden;
	}

Here is the HTML that's created by the javascript ... (don't care for the object that are in the event calls)

<div class="dropdown_container">
		<div class="dropdown_01">
			<div class="header"></div>
			<div id="mydd_content" class="content">
				<a href="#" id="mydd_selectedentry" class="selectedentry" onmouseup="mydd.expandData(); return false;">Österreich</a>
				<a href="#" class="entry" onclick="mydd.selectEntry(0); return false;">Deutschland</a>
				<a href="#" class="entry" onclick="mydd.selectEntry(1); return false;">Italien</a>
				<a href="#" class="entry" onclick="mydd.selectEntry(2); return false;">Österreich</a>
				<a href="#" class="entry" onclick="mydd.selectEntry(3); return false;">Schweiz</a>
			</div>
			<div class="footer"></div>
		</div>
	</div>

Hope it's easier now to figure out the problem ...

I've also uploaded the new version to the webpage - check it out ...

Waiting for help ... Andreas.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV below &lt;p&gt; tag in Firefox

First up, I'd change your markup to something similar to this.

  <div class="dropdown">
    <p class="selected"><a href="#" onmouseup="selectToggle(this); return false;">Österreich</a></p>
    <a class="btn" href="#" onclick="selectToggle(this); return false;" ></a>
    <ul class="options" style="display: none;">
      <li><a href="#" onclick="selectEntry(this); return false;">Deutschland</a></li>
      <li><a href="#" onclick="selectEntry(this); return false;">Italien</a></li>
      <li><a href="#" onclick="selectEntry(this); return false;">Österreich</a></li>
      <li><a href="#" onclick="selectEntry(this); return false;">Schweiz</a></li>
    </ul>
  </div>

Which will work with javascript similar to this

function getParentByClass(e, classname) {
  if (!e.parentNode) return false;
  if (e.parentNode.className) {
    ptn = new RegExp("\\b"+classname+"\\b")
    if (e.parentNode.className.match(ptn))
      return e.parentNode;
  }
  
  return getParentByClass(e.parentNode, classname);
}

function selectEntry(e) {

  eSelect = getParentByClass(e, 'dropdown');
  if (eSelect) {
    eSelected = eSelect.getElementsByTagName('A')[0];
    eSelected.innerHTML = e.innerHTML;
  }
}

function selectToggle(e) {
  
  eSelect = getParentByClass(e, 'dropdown');
  if (eSelect) {
    eOptions = eSelect.getElementsByTagName('UL')[0];
    eOptions.style.display = (eOptions.style.display == 'block') ? 'none' : 'block';
  }
}

And you can style it like so ...

.dropdown, .dropdown * { margin: 0; padding: 0; }
.dropdown { 
  position: relative; 
  width: 10em; 
  font-size: 12px; 
  line-height: 1.5em;
  border-left: 2px solid #6c737c;
  border-right: 2px solid #6c737c;
  border-bottom: 1px solid #6c737c;
  padding: 3px 1px 3px 1px;
  background: url(http://www.boardgames.at/bgattest/images/theme_01/dropdown144_hdr.gif) top left no-repeat #f2ede7;
}
.dropdown a { 
  color: #666;
  text-decoration: none;
}
.dropdown .selected { 
  padding-left: 1px;
  padding-right: 19px; 
}
.dropdown .btn { 
  position: absolute;
  top: 3px; right: 1px;
  width: 17px; 
  height: 17px; 
  background: url(images/select.gif) no-repeat top left; 
}
.dropdown .btn:hover {
  background-position: bottom;
}

.dropdown ul.options { 
  position: absolute;
  left: -2px;
  top: 1.5em;
  margin-top: 6px;
  line-height: 1.4em;
  width: 100%;
  list-style: none;
  background: url(http://www.boardgames.at/bgattest/images/theme_01/dropdown144_foot.gif) bottom left no-repeat #f2ede7;
  border-left: 2px solid #6c737c;
  border-right: 2px solid #6c737c;
  padding-bottom: 2px;
}
* html .dropdown ul.options { padding: 0 1px; }
.dropdown ul.options li { width: 100%; }
.dropdown ul.options li a { padding: 0 20px 0 2px; display: block;}
.dropdown ul.options li a:hover { background: #fec; }

Note: no ids, one width for the whole thing.

example

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

Wow ... that was a lot of help ... I will implement the code on my testpage and upload it once it's working ...

Thank you so much ... I've learned a lot ....

Greetings ... Andreas.

Gonzaga
Offline
Regular
Austria
Last seen: 14 years 38 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

DIV below &lt;p&gt; tag in Firefox

Hello ...

... I've adapted Chris' code a bit and it works perfect for me now ... there might be some little changes that I will add later but that will not change the layout of it a lot ...

You can watch the result here ... http://www.boardgames.at/bgattest/test.php

I've done it without the <UL> tag because it leaves a bit more flexibility for me ... I will consider the javascript dependant replacement of a standard option list anyway ...

Thanks for all the help here ... what a great forum ...

Greetings ... Andreas.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV below &lt;p&gt; tag in Firefox

I'm glad its all sorted out.

Just an fyi - the choice to use a list or not is subjective, but ...
- using a list is considered better semantic html. It is a list of options.
- normally having the extra element gives you more styling flexibility. Two elements allow two backgrounds, ie. sliding door style appearances which are independent of element width.