...

View Full Version : Images on top of each other in IE, but side by side on refresh



eXquisition
02-06-2007, 03: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.

http://www.thedustycover.com

the css is at:

http://www.thedustycover.com/top/style.css

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.

Sman5109
02-06-2007, 03:34 AM
You might want to try validating your document first. Try to use XHTML 1.0 or 1.1.

eXquisition
02-06-2007, 04: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

Excavator
02-06-2007, 04:32 AM
Hello eXquisition,
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#header {
MARGIN-LEFT: 150px;
HEIGHT: 153px
}
IMG#icon {
HEIGHT: 155px;
float: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: -5px;
margin-left: 25px;
}



<DIV id=wrap>
<div class="header">
<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>
<DIV class=topmenu>
<UL id=nav>

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:



#wrap {
MARGIN: 0px auto; WIDTH: 99%; BACKGROUND-COLOR: #ffcc99
}
.header {
height: 150px;
background-image: url(header.gif);
background-repeat: no-repeat;
background-position: 200px;
}
IMG#icon {
HEIGHT: 155px;
float: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: -5px;
margin-left: 25px;
}
.topmenu {


<BODY>
<DIV id=wrap>
<div class="header">
<img src="Dusty_files/book032.gif" alt="The Dusty Cover Bookstore" width="132" height="196" id="icon"></div><DIV class=topmenu>
<UL id=nav>

Sman5109
02-06-2007, 04:33 AM
Or you can listen to the above person :)

koyama
02-06-2007, 04: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.


img#header
{
/* position: relative; */
border:none;
margin-left:200px;
margin-right:50px;
width: 60%;
max-width:542px;
height:153px;
}


simultaneous post... still listen to Excavator. He's right there is a lot of unnecessary markup and styles.

eXquisition
02-06-2007, 04: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 :)

Thanks guys.

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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum