SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site works fine in Chrome, but not in IE

    I have a simple built website, I built it in Chrome, but I visited it in IE and it looks like complete crap

    What are the steps of fixing this? I am fairly new to this, I bought a template and just modified the code a bit...

    My site: containship.com it looks like only in Chrome

    Mostly the stuff that is messed up is in the read part of the site, all those objects have "position:absolute;" is there anyway around this??

    Please help me!!

    Thank you

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Looks bad in all browsers, the form under "Start Here" is in the wrong place in all browsers. I can already tell why, it is based on the resolution of your monitor...and not mine. Position absolute is the cause. Second, the DOCTYPE is all wrong, its throwing IE into quirks mode, you do not want that.

    Next, remove this line of code: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

    You then have a <style> element nested inside another <style> element.

    Please also see: http://validator.w3.org/check?verbos...ainship.com%2F

    There is a lot more wrong with the page in question...but I don't have the time nor am I paid enough to tear it apart.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Hi millhugz and welcome to the SitePoint forums.

    First lesson in Web Design - check it in a range of browsers as you go. Second rule of Web Design - beware absolute positioning. (Isn't hindsight a wonderful thing?)

    So, as logic_earth says, you want to start by replacing your DOCTYPE declaration with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and removing <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />. Then run each page through the W3C Validator which will pick up any coding errors (including typos and other daft mistakes that can cause chaos ). Start at the top of each page, and fix one error at a time, then re-validate after each fix. Sometimes, fixing one mistake automatically corrects everything after it. If you need assistance interpreting what the Validator is telling you, then post back here and we can help.

    Once you've ironed out any coding errors, we can try to help with any remaining problems.

  4. #4
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My main issue is adding a <script> over an image, and the only way of doing this is with absolute positioning. (from what I have researched) unless there's another way around..
    Can anyone help me out with the issue?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by millhugz View Post
    My main issue is adding a <script> over an image
    It's not clear what you mean by that. Can you clarify?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you want to absolutely place an element on top of another then you can do thiss by setting position:relative on a suitable parent and then the absolute child will be placed in relation to that parent.

    Here's a short commented demo:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .imgholder{
    	position:relative;/* set stacking context for absolute child*/
    	width:300px;/* same as image width */
    	height:100px;/* same as image height */
    }
    .overlay{
    	position:absolute;
    	top:0;
    	left:0;
    	width:300px;/* same as image width */
    	height:100px;/* same as image height */
    	overflow:hidden;/* hide any overflow */
    }
    </style>
    </head>
    
    <body>
    <div class="imgholder">
    		<img src="images/logo.jpg" width="300" height="100" alt="Logo"> 
    		<span class="overlay">This is the overlay</span> 
    </div>
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See that works, but the padding on the code doesn't, I need to position the form script within a certain area of the image, check out my site containship.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you are trying to position that form over to the right then just change the rules to this:

    Code:
    .imgholder{
    position:relative;
    width:auto;
    height:auto;
    }
    
    .overlay{
    left:auto;
    right:60px;
    top:85px;
    width:auto;
    height:auto;
    }

  9. #9
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seems to put the script below the picture

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The overlay should have had position:absolute added to it
    Code:
    .overlay{
    position:absolute;
    left:auto;
    right:60px;
    top:85px;
    width:auto;
    height:auto;
    }

  11. #11
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, well that brings me to my original problem, different browsers and monitors don't like absolute

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Browsers have no problem with absolute position (most of the time) and without wishing to offend it is your invalid structure and incorrect use of tables for everything that is the real root of the problem.

    You have placed the imageholder inside a table element but you have used no tr or td so it is an incomplete and invalid structure. Add the correct html and the element should display in the correct position.

    Code:
    <table style="text-align: left; width: 100%;"
     border="0" cellpadding="0" cellspacing="0">
    		<tr>
    				<td><style type="text/css">
    .imgholder{
    position:relative;
    width:auto;
    height:auto;
    background:blue;
    widfth:100%;
    height:400px;
    }
    
    .overlay{
    position:absolute;
    left:auto;
    right:60px;
    top:85px;
    width:auto;
    height:auto;
    background:red
    }
    </style>
    						<div class="imgholder"> <img src="http://www.containship.com/images/bg33.png" width="902" height="421" alt="Logo"> <span class="overlay"><script type="text/javascript" src="http://form.jotform.us/jsform/21624725859159"></script></span> </div></td>
    		</tr>
    </table>
    Of course those styles should be in the external css file and not in the middle of the code as that is invalid.

    You should not also be using all those inline styles in the tags because that means there is no simple solution to fix any errors. Indeed you are trying to absolute position table-cells which is not allowed anyway. All css should be external in 99% of cases.

    There are too many problems to fix in the present form and it would be better to start again with a table-free layout or at least not nested tables. You can always throw a table in where you need three equal columns but there really is no need these days to use tables for layout.

    Hopefully the above fix will get your image into position but I feel you would be better starting again and using up to date methods and structures to achieve that rather simple design.

  13. #13
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It puts it in position, but when different monitor views the site, or a different browser, it goes out of position, is there a code that makes it glued to that picture? Or any other way of doing what I am trying to accomplish?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The form now starts in the same position im IE8+, Chrome and Firefox so I'm not sure what you mean.

    The form is a different size in all those browsers because form elements are handled differently and are different sizes. The form is not coded well enough anyway as you would need to control every detail to get browsers to look similar. They will never be exactly the same though. But as to the starting position of the form then it is exactly the same in those browsers I mentioned.

    It's never a good idea to try and squeeze elements into a picture like that because you don't know what size text I may have set and your form will not fit. Layouts should be built to grow and shrink and elements constructed around them with that process in mind. Pushing text into little squares of fixed height and width is a major design flaw and shouldn't really be done. You can get away with it for a couple of words or a heading but for substantial content you should never do that.

    A web page is a living breathing thing and should adapt to what is thrown at it.

  15. #15
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works for me now.. thank you!! One more thing though, I see a blue line in IE below the red background?? Why is this?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You have a blue background to the image holder.

    Code:
    .imgholder {
        background:blue;
    }
    Remove the background-color and it will go away.


Tags for this Thread

Bookmarks

Posting Permissions

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