www.webdeveloper.com
Results 1 to 8 of 8

Thread: Page displays incorrectly in IE

Hybrid View

  1. #1
    Join Date
    Jan 2010
    Posts
    5

    Unhappy Page displays incorrectly in IE

    Hello and thanks in advance for the help.
    These are display problems happening only in IE:
    www.greatheightsphoto.com
    (let me know if I need to post the html/css or if the link is enough)

    I am putting the finishing touches on the first site I have ever designed from scratch (more or less...thanks to open source code..). I am starting to get the hang of it and my code displays "good enough" for me in Firefox, but when it opens in IE some weird stuff happens.

    1. The first line of the P in div id="con_main" is displaying squished up against the line below it. I have a feeling this has something to do with the em at the beginning of the sentence but cannot figure out how to correct it.
    2. The image/div/h1(?) on the top left side of my page decides to jump up about 10-20 px

    Again, these are only happening in IE so I dont want to "hack" the code to force it to display right if I do not have to...I am assuming it is a mistake on my part and would appreciate any help I could get before I start redoing all the code.
    Thanks again.
    Andrew

  2. #2
    Join Date
    Jan 2009
    Posts
    3,346
    It looks the same to me in FF3.5.7 and IE8.

  3. #3
    Join Date
    Jan 2010
    Posts
    5
    Thanks for checking. Now its even weirder. I updated to 8.0 and the spacing issues were corrected. However, now my links do not underline correctly upon hover. All the links in the main nav and in the spalsh box con_extra are supposed to underline on hover. So while the layout looks better, in 8.0 all the link/hover states are gone except for the photos in the splash box. I also noticed the compatibility mode icon in the top of the screen saying that this site may have been designed for older browsers. The Dreamweaver validation/browser compat. checks do not turn up any relevant issues.
    Thanks again.

  4. #4
    Join Date
    Mar 2007
    Posts
    946
    Quote Originally Posted by edcmf View Post
    Thanks for checking. Now its even weirder. I updated to 8.0 and the spacing issues were corrected. However, now my links do not underline correctly upon hover. All the links in the main nav and in the spalsh box con_extra are supposed to underline on hover. So while the layout looks better, in 8.0 all the link/hover states are gone except for the photos in the splash box. I also noticed the compatibility mode icon in the top of the screen saying that this site may have been designed for older browsers. The Dreamweaver validation/browser compat. checks do not turn up any relevant issues.
    Thanks again.
    When you build a website you want to make sure to check it in all browser and for IE you want to check IE6, IE7 and IE8. Things can be different in each version of IE.
    "Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman

  5. #5
    Join Date
    Jan 2010
    Posts
    5
    Thank you for the help but I do realize this. My question is what in particular is wrong with my a:hover(?) code that is making it display incorrectly in ie 8. As well as why the line spacing is incorrect in older versions. Firefox displays correctly.

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    Well....for starters:
    body {
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align: center;
    }
    Each browser has different default settings for padding and margin among others. I usually use something more like:
    Code:
    *{ padding:0; margin:0; }
    body {
            padding:0;
            margin:0;
    }
    You can also look at using one of the lightweight "css reset" scripts. Once you use those most of the time what you change will look nearly the same across modern browsers.

    Why are you using position: relative; for everything? The way I'm reading your CSS file makes it look like someone with a resolution of 800x600 will see garbage instead of your nice layout. I would try finding a way to get the elements to line up within the flow of the document (i.e. float, etc) instead of removing them from the document flow (i.e. position: anything).

  7. #7
    Join Date
    Jan 2010
    Posts
    5
    Thank you very much for responding, sorry I took so long to reply. Honestly I tried to keep the css and html as clean as possible but, this is my first site and I basically taught myself over the past two months using online tutorials and the like. The clear and float elements are the most confusing to me, in conjunction with the positioning system. I try to follow the rules but when it is not looking right I resort to the relative positioning to at least make it look right. If you could give me any pointers on those elements or how I might clean up/standardize my code a little better I would be in your debt.

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    It does look clean but I think some of the problems stem from the absolute sizes being used. There is considerable horizontal scrolling needed if a browser is not full screen at the size the layout was designed for. Looking at your css file it looks like there are several instances where you are re-declaring default values. If you are having to use position:relative as much as you are you might rethink the page a little. I very very rarely every have to use position:anything and I work with some very picky graphic artists and designers who want incredibly complicated designs.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles