|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
CSS and friggen IE
Code:
#container
{
margin: 0;
background-color: #F3F3F3;
background-image: url("/images/hxside.gif");
background-repeat: no-repeat;
}
#content_banner
{
background-color: transparent;
background-image: url("/images/topimg.jpg");
background-repeat: repeat-x;
margin-left: 170px;
padding: 10px 0px;
visibility: visible;
}
#content_banner h1
{
border-bottom: 0px;
text-align: center;
}
#content_left
{
float: left;
width: 150px;
padding: 10px;
}
[edit]Just updated the CSS to the latest version.[/edit] Firefox renders this like a champ. Looks exactly the way I want it to, etc. IE6 renders #content_left and #content_main correctly, but doesn't display the background-image for #content_banner. Actually, it basically seems to forget entirely to display the contents of #content_banner, although it positions the other elements of the page correctly, as if it had. The really weird thing, though, is that if you scroll the page down, so that the banner leaves the viewport, and then scroll back up, there's the content, like nothing was ever wrong. Actually, it never displays the border-bottom, but everything else is peachy. Any ideas? This is driving me crazy here. MPEDrummer Last edited by mpedrummer : April 28th, 2004 at 09:28 AM. |
|
#2
|
||||
|
||||
|
Proper Syntax may help :P
background-image: url("/images/topimg.jpg");
__________________
------------- vbrtrmn -------------- i think i'm missing some vowels here ------------------------------------ ---------- js.antinoc.net ---------- ------------------------------------ --- The Two Types of Programmers --- Motorcycles are cooler than computers! |
|
#3
|
|||
|
|||
|
Thanks, hadn't seen that.
However, it still does the same thing. MPEDrummer |
|
#4
|
||||
|
||||
|
I'm not sure what the issue is, can you put a demo up anywhere?
|
|
#5
|
|||
|
|||
|
I'll ask at work today if we can put it on the production server.
The problem seems to be a bug with IE, not a specific CSS issue...when the screen first renders the screen, it takes the space for the banner section properly, but then doesn't bother to display it. It's like visibility is set to hidden, but it's not. If the user scrolls the page down, so that the banner area leaves the viewport, and then scrolls back up, there's the banner, like nothing was ever wrong. It's 100% reproducable on multiple machines, all running IE6. If you sit there and refresh the page a bunch of times, it'll work every now and then. MPEDrummer |
|
#6
|
|||
|
|||
|
Could possibly be width/height related
Try to set an explicit width and height for #container. If you then see the image IE is rendering #container as 0 x 0 pixels with your original setup. To fix it you could try setting width and height to auto. If the tag with id="container" is an inline tag you could try a block tag instead.
|
|
#7
|
|||
|
|||
|
Well, I'm not allowed to put it on the production server, but here's some screenshots of the problem.
The only difference between the two screen shots is that I scrolled further down the page, and then back up. No refreshing, nothing. MPEDrummer |
|
#8
|
||||
|
||||
|
Let's try a couple of things. First, whack the style rules back to the minimum, eliminating redundancy. Then, if that doesn't do anything (likely), add a position rule. IE has bugs that sometime respond to an element being made "position: relative;" Maybe this element, maybe another. Don't change things willy-nilly though.
Code:
#content_banner {
position: relative;
background: url(/images/topimg.jpg) repeat-x;
margin-left: 170px;
padding: 10px 0px;
}
gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. Ask a better question, get a better answer. |
|
#9
|
|||
|
|||
|
Well, this makes no sense whatsoever, but I fixed it.
I moved the declaration of background-color from #container to body. Now it works. My kingdom for standards... MPEDrummer |
![]() |
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS and friggen IE |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|