Horizontally extending div background Options

[rockon]

Hey,

In Internet Explorer, the background for my titles aren't hiding away and stretching when needed - they're showing the whole thing all the time.

The link is:
http://ndox.co.uk/Home.aspx

Can someone please have a look and give me any ideas?

it;s working in chrome (and I presume Firefox).

Thanks!

[pandy]

In what style sheet do you have the CSS for that? You have so many of them.

[pandy]

Specifically, why is the SPAN there and what do you do with #dnn_ctr390_dnnTITLE_lblTitle? Don't find it anywhere in the CSS.

BTW there's something to say for meaning full class and id names.

[rockon]

Specifically, why is the SPAN there and what do you do with #dnn_ctr390_dnnTITLE_lblTitle? Don't find it anywhere in the CSS.

BTW there's something to say for meaning full class and id names.

Sorry, here's the CSS:

CODE

.head_title_top {
    height: 53px;
    background-image: url(titleleft.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    padding-right: 30px;
    padding-left: 15px;
    line-height: 53px;
    margin-left: -10px;
}

.head_title_top h1 {
    height: 53px;
    background-image: url(titleextend.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    padding-right: 24px;
}

I've noticed that the cms we use churns out some horrrrible mark-up. But, what can I do to fix how it looks in IE so that it looks like what it does in chrome?

[pandy]

And what style sheet is that in?

But, what can I do to fix how it looks in IE so that it looks like what it does in chrome?

I don't know. There's a lot of markup with classes and IDs around each of those headings and I'm afraid I don't want to read through 12 style sheets to figure out what it does.

CODE

    <div class="head_title_top">
        <div class="c_actions">
        </div>
          
        <div class="c_icon">            
            <h1><span id="dnn_ctr381_dnnTITLE_lblTitle" class="TitleHead">Links</span></h1>
        </div>
        <div class="title_vis"></div>
        <div class="clear_float"></div>
     </div>

[rockon]

That's what I like about Google Chrome and the inspector tool

All the CSS in that bit of mark-up is:

CODE

.head_title_top {
    height: 53px;
    background-image: url(titleleft.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    padding-right: 30px;
    padding-left: 15px;
    line-height: 53px;
    margin-left: -10px;
}

.c_icon, .c_actions {
        float: left;
}

.head_title_top h1 {
    height: 53px;
    background-image: url(titleextend.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    padding-right: 24px;
}

h1 {
       font-family: 'Times new roman';
       font-size: 20px;
       font-weight: normal;
}

.c_head_bfs h1, .c_head_bfs h1 input {
       color: #ec2020;
}

[pandy]

And where are the images so I can play with that?

[rockon]

The static image that stays on the left is:

http://ndox.co.uk/Portals/_default/Contain...h/titleleft.jpg

and the extendable image is:

http://ndox.co.uk/Portals/_default/Contain...titleextend.jpg

[pandy]

Well, it seem that ' height: 53px' in the' .head_title_top h1' rule triggers something in IE that makes it expand the H1 and push the shrink-wrapped .c_icon with it. From what I can see a height isn't needed, so just remove it and see how that works. Note that I've only tried this in IE6, but since the problem was the same as you saw it's likely the fix is too.

I don't know why this happens. Possibly it has to do with that hight gives H1 layout (mystery property of IE). But giving something layout usually is a bug fix, not the cause of one. Has anyone else seen this before?

On having layout - the concept of hasLayout in IE/Win
http://www.satzansatz.de/cssd/onhavinglayout.html

[rockon]

That's rather odd! Removing the height attribute for the H1 does in fact sort the problem.

Thanks!

[pandy]

It's REALLY odd.

Hey, what version if IE did you check in? 7 or 8? Both (says pandy hopefully)?


I tested it with the simplest possible markup and CSS and the thing is still there. So nothing else in your HTML or CSS is involved. A height is all it takes.
http://forums.htmlhelp.com/index.php?showtopic=10694