Solved

transparent background does not load properly in IE7

Posted on 2009-07-09
12
321 Views
Last Modified: 2012-06-27
@ http://tiny.cc/qtOll the transparent content box does not load or show properly as the content background in Internet Explorer 7. There is some space at the bottom. Why is that?
See screenshot
content-box-issue-ie7.jpg
0
Comment
Question by:rhandalthor
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 4
12 Comments
 

Author Comment

by:rhandalthor
ID: 24814293
And when I press F11 to enlarge the screen the transparent background covers the entire content box again. Very strange indeed! Any ideas what's the matter?
0
 
LVL 42

Expert Comment

by:David S.
ID: 24817634
This issue stopped showing up for me, but here's something you can try:
*:first-child+html .overlay-blog {
  height: auto;
}

Open in new window

0
 

Author Comment

by:rhandalthor
ID: 24821512
Doesn't really seem to make a difference. On http://lab.imagewize.net/klarezaken/2009/07/06/wordpress-installeren/ the read more is even ignored in IE7 and the text overflows..
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rhandalthor
ID: 24821520
Oh read more is just ignored cross browser. Well never mind this issue..
0
 

Author Comment

by:rhandalthor
ID: 24821536
Hmm well transparent background still recoils on most pages and the blog. For the other readmore not showing in IE7 (It does show in IE7) I will open another ticket.
0
 

Author Comment

by:rhandalthor
ID: 24821587
I view the site in IE8 Compatibility moe. In regular IE8 mode all is fine. Maybe everything is fine in regular IE7 as well...?
0
 
LVL 42

Expert Comment

by:David S.
ID: 24833329
I looked at it again in IE7 and the issue did appear.

Try giving "div.content" min-height:1px
0
 

Author Comment

by:rhandalthor
ID: 24833356
I added the code, but I do not think it is working yet. Please have a look. This is really strange and something I hope to solve as soon as possible. Planned to go live tomorrow...
/* IE& bizarre transparent box issue */
*:first-child+html .overlay-blog {
  height: auto;
}
 
div.content {min-height:1px;}

Open in new window

0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24833379
Hmm... try this then:
html>body #trans-box-blog {
  height: 365px;
  padding: 0 10px;
}
#trans-box-blog>div.content {
  padding: 10px 0;
}

Open in new window

0
 

Author Comment

by:rhandalthor
ID: 24833411
Added the the code to ie-hacks.css (loaded by <!--[if gte IE 6]>) and... it seems to be working. I just double check it all and post back.
0
 

Author Comment

by:rhandalthor
ID: 24833427
Well it is working. Just a little paranoid that's all. Thanks a lot once again. Why it works now I have to get in a bit more later. But the main thing for now is that it works and that the lay-out seems to be the same or 99.9% the same cross-browser.
0
 
LVL 42

Expert Comment

by:David S.
ID: 24835384
You're welcome.

It seems that IE7 was miscalculating what height:100% should be on that absolutely positioned element because of the top and bottom padding on its parent element. I would assume it got confused because height:100% is calculated a little differently on absolutely positioned elements than other elements. On absolutely positioned elements the top and bottom padding should be added to the computed height of the containing block to get the height for the element.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Head to not include on scroll 4 36
tiled banner 2 14
HTML question 2 33
Responsive Image Distorting 2 26
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

739 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