Solved

Inner Fieldset loosing border in Firefox NOT IE

Posted on 2007-11-20
2
803 Views
Last Modified: 2013-12-07
I am using a fieldsets within a fieldset to show extra information.
It works in IE but on firefox 2... the right hand border on the inner fieldset disappears/reappears while resizing the screen.
Can anyone explain the Firefox behavior and suggest a solution.


<!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" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>XYZ</title>

<style type="text/css">

div.info { 

    clear: both; 

    margin-left: auto;

    margin-right: auto; 

	width:95%; 

	text-align: left; 

}

div.info p{ 

	font-size: .85em;

}

div.info img{ 

	margin-left: 1.5em;

}

div.info legend {

	font-weight: bold; 

	color:#0046d5; 

}

.use-fieldset1 {

    float: left;

	width: 60%;

}

.use-fieldset2 {

    width: 35%;

	margin-right: 1em;

	padding: .5em; 

    float: right;

	border: .05em solid #dc0000;

	border-left: .05em solid #dc0000;

	border-bottom: .05em solid #dc0000;

	border-right: .05em solid #dc0000;

}

div.info .use-fieldset2 legend {

	color:#dc0000;

	background-color: #FFFFFF;

	font-weight: bold; 

	padding: 0.1em;

}

</style>

</head>

<body>

<!-- page caption -->

<div class="info noprint">

  <fieldset>

  <legend>Information</legend>

  <p> This list is updated on a regular basis for journals supplied by publishing partners.

    To report a problem or to update a link, please <a href="mailto:xyz"> contact HCN</a>.<br />

  </p>

  <div class="use-fieldset1">

    <p> = Subscription provided by the Condor Institute<br />

      = Subscription provided by Q&amp;S<br />

      = Open Access title<br />

      = Trial only<br />

    </p>

  </div>

  <fieldset class="use-fieldset2">

  <legend>Update!</legend>

  <p> Full Text Journal List now has new online collection management features and functionality. <a href="mailto:xyz"> Read&nbsp;more...</a> </p>

  </fieldset>

  </fieldset>

</div>

</body>

</html>

Open in new window

0
Comment
Question by:janinel
2 Comments
 
LVL 3

Expert Comment

by:Mr_Splash
ID: 20324638
You've specified the second field set's border in em's. This should be avoided as it can cause a number of problems such as this one.

The following code will correct the issue.
.use-fieldset2 {

  width: 35%;

  margin-right: 1em;

  padding: .5em; 

  float: right;

  border: 1px solid #dc0000;

}

Open in new window

0
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 20324701
When you use % age dimensions and to some extent ems browsers can guesstimate the actual dimension and you will sometimes get these sort of issues due to rounding.

The way I was able to fix this issue was to use fixed dimensions in px units.
.use-fieldset2 {

border:1px solid #DC0000;

float:right;

margin-right:20px;

padding:10px;

width:240px;

}

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Find out what you should include to make the best professional email signature for your organization.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now