• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

CSS issue with H2 and IE

T

TechBoyJK

Lifer
Hi Guys,

I'm getting a weird formatting problem with IE.

I'm trying to create an H2 element, and it's working fine in Chrome and FF.

But in IE, it's all spaced out. For the life of me I can't figure out why.

Check out this link in IE and FF (or chrome)

http://details.at/h2_test.cfm

In FF/Chrome, it looks right. Title, underlined, and a button floated to the right. They are all level. in IE, it seems to push the button below the title text, but then floats it to the right.

Here's the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<STYLE>

#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #146eb4;
font-size: 1.2em;
width:100%;
}

.h2_button
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
float:right;
margin: 0 0 0 0;
}

</STYLE>
<title>Untitled</title>
</head>

<body>
<div id="content">
<H2>This is a test <INPUT class="h2_button" type="submit" name="Go" value="Create"></H2>

<P>brown fox jumps over fat piggie</P>
</div>

</body>
</html>
 
Welcome to the fresh hell that is multi-browser development.

Maybe using <p> and <div> might be a better solution for this. Another solution (that I haven't tested) is display:inline.
 
Last edited:
Change the order of your html.

Code: 
<H2>This is a test <INPUT class="h2_button" type="submit" name="Go" value="Create"></H2>

to

Code: 
<H2><INPUT class="h2_button" type="submit" name="Go" value="Create">This is a test </H2>
 
Thanks.. I read through that thread, and no luck..

I'm starting to think it might not be possible due to IE's rendering.

How can I get around this? You can look at the page in Chrome/FF and see exactly what I want.

Text on the left, text on the right (could be button), entire segment underlined
 
You could also do it like:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<STYLE>

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

#content h2
{
    margin: 0.5em 0; 
    padding-bottom: 0.25em;
    border-bottom: 1px solid #146eb4;
    font-size: 1.2em;
    width:100%;
}

#content h2 span
{
    float:left;
    padding-right: 100px;
}

.h2_button
{
    font: .9em Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #146eb4;
    border: 1px solid #146eb4;
    float:right;
    margin: 0;
}

</STYLE>
<title>Untitled</title>
</head>

<body>
    <div id="content">

        <h2 class="clearfix">
            <span>This is a test </span>
            <input class="h2_button" type="submit" name="Go" value="Create" />
        </h2>

        <p>brown fox jumps over fat piggie</p>

    </div>
</body>
</html>
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top