02-06-2007, 02:23 AM
I have just changed the header on my website. Everything works fine in firefox as far as I've seen, but in the new IE (haven't tried the older ones) The two images load on top of each other. If you refresh the page, they then load side by side. They then go on top of each other again if you resize the window, but sort themselves out if you refresh the page. I have also been told that in IE, the first image (the guy with the books) loads to the size of the screen at times, though I haven't had that happen to me before. ( I also haven't tried different resolutions etc yet, I'm only concerned right now with getting it to work :eek: )
Can somebody offer any insight as to why it would work on a refresh, but not originally or on a window resize? I think that I could probably clean up my CSS considerably, but am out of ideas on ways to do things differently. If anybody has an older version of IE on their computer, I would appreciate any comments if it happens in those versions as well.
the css is at:
the first four concern the heading, so you shouldn't have to search for it.
Thank you, as always. You guys are often my saviors.
02-06-2007, 02:34 AM
You might want to try validating your document first. Try to use XHTML 1.0 or 1.1.
02-06-2007, 03:14 AM
It is now 'tentatively' valid (missing character encoding. )the Css Validated no problem, and the only error it found was that I forgot to self close an input tag. ... I don't see how that helped, but at least it caught one mistake.
Web page validation is here (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thedustycover.com%2F)
everything is still happening as described above
02-06-2007, 03:32 AM
While validation is always a good thing, it had nothing to do with your problem.
You are using both conflicting and unecessary positioning and styling. It works better if you try to keep it simple.
In this first example I float the icon image and bump the header over with margin. Like this:
<img src="Dusty_files/book032.gif" alt="The Dusty Cover Bookstore" width="132" height="196" id="icon">
<img src="Dusty_files/header.gif" alt="The Dusty Cover Bookstore" width="542" height="152" id="header"></div>
And that works fine till you size the window down a bit. Because there is no min-width it can be sized to a smaller width than the two images can fit together in so the header image drops down. That's what it's supposed to do.
A minwidth would fix that but so does this:
MARGIN: 0px auto; WIDTH: 99%; BACKGROUND-COLOR: #ffcc99
<img src="Dusty_files/book032.gif" alt="The Dusty Cover Bookstore" width="132" height="196" id="icon"></div><DIV class=topmenu>
02-06-2007, 03:33 AM
Or you can listen to the above person :)
02-06-2007, 03:36 AM
This is a weird one. I have sometimes seen cases with IE where merely setting position: relative makes things behave strangely when they aren't suppose to.
You have set position: relative for your right image although it has no effect. Try removing this in red. That solved it when I tried. The question still remains why IE behaves like it does, but I've heard that one shouldn't ask.
/* position: relative; */
simultaneous post... still listen to Excavator. He's right there is a lot of unnecessary markup and styles.
02-06-2007, 03:48 AM
Thank you both for your suggestions, I tried them both and they both work.
I never thought of a background. That's so brilliant, I banged my head on my desk when I read it. Why can't I think of things like that.
.You're so right about Internet explorer. Best not to ask. I had a hunch it would come down to some weird quirk like that.
The position:relative was something left over from the old heading. I didn't realize that it was unneeded until you mentioned it. A very simple fix. I just changed it that way and uploaded it.
and the added bonus of validating my site :)
EDIT: I have a problem with unnecessary things.. I will go through it later and tone it down. I think that I wll eventually end up with the background suggestion, but for now I just wanted it up and running quickly. If it works, I am happy :)