Results 1 to 6 of 6

Thread: Problem with layout in IE

  1. #1
    Join Date
    Jan 2007
    Location
    Sweden
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with layout in IE

    Hi all.

    I have a problem with IE... In this case at least.

    I'm using a layout from DD, http://www.dynamicdrive.com/style/la...1-fixed-fixed/
    , as a base for my site.
    Then I want to add layers with content inside the layout.
    This works perfect in FF 1.5 but when viewing it in IE6 or 7 the div layers aren't showing at all!?
    I must have missed something in the coding.

    I'm pretty new to css coding so I hope you guys can help me out.

    You can look at a working example on http://baze.wideworks.net/lindallen/ and here to see the stylesheet, http://baze.wideworks.net/lindallen/lindallen.css

    Thanks alot in advance.

    /Claes

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there baz3,

    and a warm welcome to these forums.

    You rarely need to use absolute positioning for layout purposes.
    Try it like this instead...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Lindall&#233;n - Startsida</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <script  src="functions.js" type="text/javascript"></script>
    
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        background-color:#b7ca90;
        color:#000;
     }
    #maincontainer {
        width: 994px;
        margin: 0 auto;
     }
    #topsection img {
        float:left;
        width:497px;
        height: 216px; 
     }
    #meny img {
        border:0 none;
        float:left;
     }
    #leftcolumn{
        float:left;
        width: 497px; 
        height:475px;
        background-image:url(images/newbg-left-bot.jpg);
     }
    #hands {
        float:left;
        width:133px;
        height:100px;
        margin:192px 0 0 104px;
     }
    #first_page {
        float:left;
        width:246px;
        height:134px;
        margin:174px 0 0 7px;
     }
    #rightcolumn {
        float:left;
        width: 497px; 
        height:475px;
        background-image:url(images/newbg-right-bot.jpg);
     }
    #massage,#stenar,#ansiktsmas {
        float:left;
        width:133px;
        height:100px;
        margin:192px 0 0 5px;
     }
    #footer{
        clear:both;
        background-color:#7a8660;
        font-family: verdana,arial,helvetica,sans-serif; 
        font-size:10px; 
        color:#000;
        text-align:center;
        padding-bottom:8px;
     }
    #footer a:link,#footer a:visited { 
        color:#fff;
        text-decoration:none;
        background-color:#7a8660;
     }
    #footer a:hover,#footer a:active {
        color:#fff;
        text-decoration:underline;
        background-color:#7a8660;
     }
    </style>
    
    </head>
    <body>
    
    <div id="maincontainer">
    
    <div id="topsection">
    <img src="images/newbg-left-top.jpg" alt=""/>
    <img src="images/newbg-right-top.jpg" alt=""/>
    </div>
    
    <div id="meny">	
    <img src="images/meny03-all-guides-00-off.jpg" alt=""/>
    <a href="om_oss.html" onmouseover="turnOn('image1');return true" onmouseout="turnOff('image1'); return true">
    <img name="image1" src="images/meny03-all-guides-01-off.jpg" alt=""/>
    </a>
    <a href="behandlingar.html" onmouseover="turnOn('image2');return true" onmouseout="turnOff('image2'); return true">
    <img name="image2" src="images/meny03-all-guides-02-off.jpg" alt=""/>
    </a>
    <a href="spadbarn.html" onmouseover="turnOn('image3');return true" onmouseout="turnOff('image3');return true">
    <img name="image3" src="images/meny03-all-guides-03-off.jpg" alt=""/>
    </a>
    <a href="#" onmouseover="turnOn('image4');return true" onmouseout="turnOff('image4');return true">
    <img name="image4" src="images/meny03-all-guides-04-off.jpg" alt=""/>
    </a>
    <a href="#" onmouseover="turnOn('image5');return true" onmouseout="turnOff('image5');return true">
    <img name="image5" src="images/meny03-all-guides-05-off.jpg" alt=""/>
    </a>
    <a href="#" onmouseover="turnOn('image6');return true" onmouseout="turnOff('image6');return true">
    <img name="image6" src="images/meny03-all-guides-06-off.jpg" alt=""/>
    </a>
    <a href="#" onmouseover="turnOn('image7');return true" onmouseout="turnOff('image7');return true">
    <img name="image7" src="images/meny03-all-guides-07-off.jpg" alt=""/>
    </a>
    <a href="presentkort.html" onmouseover="turnOn('image8');return true" onmouseout="turnOff('image8');return true">
    <img name="image8" src="images/meny03-all-guides-08-off.jpg" alt=""/>
    </a>
    <a href="#" onmouseover="turnOn('image9');return true" onmouseout="turnOff('image9');return true">
    <img name="image9" src="images/meny03-all-guides-09-off.jpg" alt=""/>
    </a>
    <img src="images/meny03-all-guides-10-off.jpg" alt=""/>
    </div>
    
    <div id="leftcolumn">
    <img id="hands" src="images/hands.png" alt=""/>
    <img id="first_page" src="images/text_first_page.png" alt=""/>
    </div>
    
    <div id="rightcolumn">
    <img id="massage" src="images/massage.png" alt=""/>
    <img id="stenar" src="images/stenar2.png" alt=""/>
    <img id="ansiktsmas" src="images/ansiktsmask2.png" alt=""/>
    </div>
    
    <div id="footer">
    A website made by Claes Adamsson, contact <a href="mailto:claes.adamsson@gmail.com">webmaster</a>. &copy; 2007 <a href="index.html">www.lindallen.se</a>. All Rights Reserved.
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 01-16-2007 at 07:59 PM. Reason: very minor modification

  3. #3
    Join Date
    Jan 2007
    Location
    Sweden
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi coothead!
    Thanks for the really fast response.
    Your code works great, I'll recode the other pages the same way.

    Good idea to put the images as backgrounds instead.
    As I said, I'm pretty new to xhtml but it's really fun.

    Thanks again for helping me out.
    I'll send you a link of the result when it's done.

    Take care!

    /baz3

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    No problem, you're welcome.

  5. #5
    Join Date
    Jan 2007
    Location
    Sweden
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi again.

    I used the code you gave me and that works great.
    I tried to add a layer on top of the two columns, like a content layer.
    IE breaks of the layer in half but it works fine in firefox.
    I'm not sure if I'm using the right way to do it, I tried with
    Code:
    margin:92px 0 0 -158px;
    in the right column, I started out as a trial and error just to see if it worked, and it did, in firefox...

    Maybe I should have just one layer and put a background atribute in that, then put a content layer on top of that. What do you think?

    Check out http://baze.wideworks.net/lindallen/behandlingar.html
    as an example.

    Take care.

    /baz3

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there baz3,
    Maybe I should have just one layer and put a background atribute in that, then put a content layer on top of that. What do you think?
    I think that you will always have problems with the content area split into two.
    With that in mind check out a complete re-working of the code - (no javascript used) - here...
    ...if this interests you, I have put it all into a zip file which can be downloaded here...
    coothead

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
  •