?
Solved

Legend and layout looks weird on Opera, Konqueror and IE6/IE7 but ok on firefox

Posted on 2007-08-09
4
Medium Priority
?
297 Views
Last Modified: 2008-01-09
Here's the html (it's part of a bigger page but this should show the problem):

<!DOCTYPE html PUBLIC "XHTML 1.0 Transitional">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Legend</title>
  <link href="legend.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body class="lab" id="tbleveranse">

<div id="wrapper">
  <div class="small">
    <form name="konfigurasjon" METHOD="get" ACTION="configuration.php">

    <h2 class="center">Configuration</h2>

    <div>
      <fieldset>
        <legend>Email</legend>
        <div class="row">
          <span class="large">Name</span>
          <input type="text" name="emailsendername" id="emailsendername" class="large" value="Name" tabindex="1" />
        </div>
      </fieldset>
    </div>
    <div>
      <fieldset>
        <legend>Configuration</legend>

        <div class="row">
          <span class="medium">Start-URL</span>
          <input type="text" name="baseurl" id="baseurl" class="largepluss" value="/start" tabindex="3" />
        </div>
      </fieldset>
    </div>
    </form>
  </div>
</div>

</body>
</html>

And her's the css:
#wrapper
{
  width: 56em;
  margin: 0px auto;
}

input {
  font: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: left;
  border: 1px solid darkgrey;
}

input.large {
  width: 12.2em;
}

input.largepluss {
  width: 15em;
}

span {
  color: black;
  text-align: left;
  display: -moz-inline-stack;
  display: inline-block;
  margin: 0px;
  border: 0px;
  padding: 0px;
  border: 1px solid #EFEFEF;
}

span.medium {
  width: 7.8em;
}

span.large {
  width: 12.2em;
}

div
{
  margin: 0px;
  border: 0px;
  padding: 0px;
}

div.row
{
  margin-top: 0.1em;
}

div.small
{
  top: 2.5em;
  width: 29em;
  left: 11.5em;   /* (wrapper:width - this:width)/2 */
  text-align: center;
  position: relative;
}

legend {
  font-size: 13pt;
  font-weight: bold;
  background: #FF7A31;
  color: white;
  border: 1px solid darkgrey;
  padding: 0.1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  width: 12em;
  float: left;
}

fieldset {
  border: 1px solid darkgrey;
  background: #EFEFEF;
}

h1, h2, h3, h4, h5 {
  font: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: black;
  text-align: center;
}


In Firefox it looks ok, but in Opera and Konqueror the legend is embedded into the fieldset and not floating on top of the fieldset as in firefox (ok maybe awkward explanation but try it out). In IE (at least my wine-running IE6) the legend is correct, but the the colour from inside the fieldset extends outside the area.

Can anybody help me out with this?
0
Comment
Question by:johnnybaluba
  • 2
  • 2
4 Comments
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 19666694
Have a look at this page - looks like it's an IE problem:

   http://www.gunlaug.no/tos/moa_18.html

And see if the described fix works for you...
0
 
LVL 28

Assisted Solution

by:TName
TName earned 2000 total points
ID: 19666799
0
 

Author Comment

by:johnnybaluba
ID: 19667854
Thanks for the links. They seem to address the problems I have. Will take a closer look later today.
0
 

Author Comment

by:johnnybaluba
ID: 19673388

Some tweaking and it works like a charm (well, good enough at least).

It turned out that the  'float: left;' attribute for legend was the problem for opera/konqueror...

Thanks again
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

809 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