The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Horizontally extending div background
rockon
post Jan 22 2010, 05:03 AM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 23-July 09
Member No.: 9,220



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!





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2010, 06:03 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,445
Joined: 9-August 06
Member No.: 6



In what style sheet do you have the CSS for that? You have so many of them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2010, 06:22 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,445
Joined: 9-August 06
Member No.: 6



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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rockon
post Jan 22 2010, 07:49 AM
Post #4


Newbie
*

Group: Members
Posts: 12
Joined: 23-July 09
Member No.: 9,220



QUOTE(pandy @ Jan 22 2010, 06:22 AM) *

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. wink.gif



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2010, 08:13 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,445
Joined: 9-August 06
Member No.: 6



And what style sheet is that in?

QUOTE

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. sad.gif


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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rockon
post Jan 22 2010, 08:21 AM
Post #6


Newbie
*

Group: Members
Posts: 12
Joined: 23-July 09
Member No.: 9,220



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

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;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2010, 08:33 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,445
Joined: 9-August 06
Member No.: 6



And where are the images so I can play with that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rockon
post Jan 22 2010, 08:36 AM
Post #8


Newbie
*

Group: Members
Posts: 12
Joined: 23-July 09
Member No.: 9,220



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

smile.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2010, 09:10 AM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,445
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rockon
post Jan 22 2010, 09:26 AM
Post #10


Newbie
*

Group: Members
Posts: 12
Joined: 23-July 09
Member No.: 9,220



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

Thanks! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2010, 09:32 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,445
Joined: 9-August 06
Member No.: 6



It's REALLY odd. blink.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th December 2019 - 12:03 PM