Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Images on top of each other in IE, but side by side on refresh

    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 )

    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.

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    You might want to try validating your document first. Try to use XHTML 1.0 or 1.1.

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    everything is still happening as described above

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:

    Code:
    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:
    Code:
    #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>
    Last edited by Excavator; 02-06-2007 at 03:34 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Or you can listen to the above person

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.
    Code:
    img#header
    {
    /* position: relative; */
    border:none;
    margin-left:200px;
    margin-right:50px;
    width: 60%;
    max-width:542px;
    height:153px;
    }
    Edit: simultaneous post... still listen to Excavator. He's right there is a lot of unnecessary markup and styles.
    Last edited by koyama; 02-06-2007 at 03:44 AM. Reason: commented on post above

  • #7
    New Coder
    Join Date
    Mar 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by eXquisition; 02-06-2007 at 03:53 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •