SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 52
  1. #1
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layer Positioning across browsers

    Hi all,

    I am creating a website inwhich I am making use of layers. These layers are absolutely positioned, and after testing the website in Netscape and IE, and notice that the layers are positioned at different locations. The layers are to be positioned against the background image, so it is important that I get both browsers to yeild the same result.

    How can I do this? Do I have to use JavaScript to detect what broswer is being used and then load the appropriate CSS file (which details the layers position attributes)?

    I have tried setting the attributes margin-top and margin-left to '0' in the current CSS file, but that doesn't seem to make the layers work off the same off-set in both browsers.

    Cheers

    Tryst

  2. #2
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide a link to the code and CSS so that we can see what you mean?
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As John said if you can show us your code we can tell you where you are going wrong (with any luck).

    Javascript isn't needed. Have you tried setting this for the body style.
    Code:
    body {margin:0;padding:0}
    Although this won't make any difference to absolutely placed elements as they are placed relative to the top left anyway (outside of any margins - (unless they are nested within another parent that has a position set)). However this may straighten up other elements such as your background images etc.

    These are just guesses until we see your code though

    Paul

  4. #4
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all, sorry about the late reply, i've had a little holiday :-)

    Ok, before I post the code i'll try and get ya all to understand the problem I have.

    Ok, what I have is a layer which is absolutely positioned by setting the 'left' and 'top' values in the CSS file. The values set are, 'Left = 418' and 'top = 208'. But, because the offset of IE and netscape browsers are different (the webpage starts at different top-left corner positions across these browsers) it means the content is displayed at different positions within the browsers. This is especially the case when using absolutely positioned layers, because it means they are displayed at slightly different locations within the browsers.

    Does anyone understand what I mean yet? :-)

    Tryst

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    But, because the offset of IE and netscape browsers are different
    I can see no difference between an absolutely placed element in IE6, Mozilla 1.2, Firebird 0.6.1, netscape 6.2 and OPera7. (I've just double tested this).

    So i'll say this again for you, this time just a little bit louder :
    Although this won't make any difference to absolutely placed elements as they are placed relative to the top left anyway (outside of any margins - (unless they are nested within another parent that has a position set)).
    An absolute element is placed in reference to the top left of the viewport outside of any margins and padding on the body (excluding any bugs of course). Therefore the display should be the same across browsers.

    Where browsers do differ in that they some apply padding to the body element for the default margins and some apply margins to achieve this. So setting margin:0 and padding:0 starts them on even footing. However this will only apply to static content as absolute elements are placed as I quoted above.

    So, unless you are trying an old browser or have found another obscure bug we won't be able to help you until you give us a link (or show some code) as previously requested .

    Hope that helps.

    Paul

  6. #6
    web daemon jorasmi's Avatar
    Join Date
    Nov 2001
    Location
    Philippines
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i had that experienced before. there is a little difference. try using javascript. why dont you try posting the code here or provide a link so we can help you.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    had that experienced before. there is a little difference
    Not enough to worry about. It's probably your code thats incorrect .

    try using javascript
    NOoooooooo! 10 to 15% have javascript turned off or can't use it. You are going to alienate more visitors than by leaving the CSS alone.

    There may be very minor differences between browsers but the display in each browser should be consistent within itself so that it doesn't matter.

    If I understand from the original question the problem was lining up absolutely positioned elements with a background image. The co-ordinate system should match up internally even if the interpretation of the pixel is different. However I've checked many times and can find no difference.

    Unless we can see some code I cannot help. There may well be something I'm missing or not understanding. I've matched layouts between browsers many times. There are always differences between padding and margins on certain elements but absolutely placed elements always seem to be in the same place (unless its another bug of course in this particular instance).

    Hope that makes sense

    Paul

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here is an example:

    The middle image is in the background. The four images on the corners are absolutely placed in the foreground.

    http://www.pmob.co.uk/temp/positioningtest.htm

    In opera6, opera7.02, opera 7.22, Netscape 6.2, mozilla 1.2, mozilla 1.4, firebird 0.6.1, IE5, IE5.5 and IE6 I can see no discenible difference.

    All elements are placed exactly on the corners of the middle background image.

    I've shown you mine now show us yours please

    Paul

  9. #9
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, i'll post the code when I get home tonight. I 'll also post a sample screen shot of each browser.

    Cheers guy.

    Tryst

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok, i'll post the code when I get home tonight
    Great - can't wait
    (I like a challenge)

  11. #11
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok then guys,

    Sorry about not posting last nite as I said, I was a little busy else where :-s

    Ok, here is a segement of the CSS file in which the absolute layer is associated with...

    .servicesLayerGlobal {
    position: absolute;
    overflow: auto;
    left: 418px;
    top: 208px;
    width: 280px;
    height: 150px;
    background-image: url("images/layer_service.gif");
    border: 1px solid #99AAFF;
    font-size: 10px;
    color: FFFFFF;
    padding: 5px;
    }


    Here is the CSS for the body tag

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url("images/black_grey_tv2.gif");
    }


    Now here are the screen shots for the webpage in both IE and Netscape (The layer in question is the box in the centre-ish with a thin white line around it). The layers still seem somewhat off???

    Uhm, I've never used an image in a post before, so if I've screwed up a little, forgive me ;-)

    Cheers

    Tryst
    Attached Images Attached Images

  12. #12
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    test[IMG]

  13. #13
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but how do I insert images into my post??

    Tryst

  14. #14
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wait - the attachments need to be approved by moderators, so they take a while to appear

    elsewhere: it really will make it easier for us to help if you can let us see the whole page online.

    Secondly, does your page have a doctype? If not, IE will be using its non-standard box model, and the padding on the div would bahave differently compared to Netscape.

    (BTW, what versions of netscape and IE?)

  15. #15
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When U say 'They take a while', does that mean that they will appear within the initial post once they have been approved??

    I can't seem to find a doctype attribute with the meta tag. This is the meta tag...

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

    The versions of Netscape is 7.02, and IE is 6. Hope this helps.

    Cheers

    Tryst

  16. #16
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does that mean that they will appear within the initial post once they have been approved??
    Yes (as indeed they now have)

    Doctypes: this will tell you what they are, and give a bit of background: http://www.alistapart.com/articles/doctype/

    From your screenshots, though, I'm not sure if that's the problem.

    From your CSS, but also probably not the problem: color: FFFFFF; Shouldn't that be #FFFFFF; ?

    We really need to see the whole page in action.

  17. #17
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure the offsets have something to doing with the layers differing positions across the browsers.

    It seems I compressed the images too much :-s But, where U able to notice the layers positioned slightly differently in each screenshot?

    Tryst

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It seems I compressed the images too much :-s But, where U able to notice the layers positioned slightly differently in each screenshot?
    Yes I could see the difference in the layers but is it possible for you to put something on line (or post your whole page code not just the css).

    It is unlikely that the browsers will be that far out there's probably another explanation.

    Try moving the absolute .servicesgloballayer to the end of the html just before the closing body tag. As it is absolutely placed it does not matter where it comes in the html. Make sue it is outside all nested divs and see if that makes a difference.

    As blufive said if you dont have a doctype then the sizes of the elements will be different between ie6 and NN because ie uses the broken box model in quirks mode. However the top left corner of the element should still start in the same place but the box will be 10px smaller all around in ie because of the padding.

    When you looked at my example that I put on line in your two browsers did it look the same? If it did then theres no reason why yours shouldn't. Its basically the sam a background image with foreground images placed around it.

    We just need to find whats causing the difference

    Paul

  19. #19
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good afternoon guys. The saga continues

    Right, i've inserted a DocType within the document, and now it has completely balls up (as can be seen from the image below). It seems to have taken the vertical centering away from the table.

    I;ve also tried shifting the DIV elements to the bottom of the HTML page, but nothing seemed to have changed.

    OK, here is my code for the whole of the services.html page. Just to shed some light on the issues some more... What I have is a total of 4 layers all absolutely positioned in the same place, when the user clicks one of the 3 links on the left of the page the corosponding layer gets displayed, whilst the other 3 go invisible. Hence why I have a global layer that sets the attributes to the 4 layers, and then each layers then has its on set of unique attributes (ie border colour etc).

    Code...

    <HTML>
    <HEAD>
    <TITLE>services</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <SCRIPT TYPE="text/javascript">

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    services_05_over = newImage("images/services_05-over.jpg");
    services_07_over = newImage("images/services_07-over.jpg");
    services_07_services_09_over = newImage("images/services_07-services_09_ove.jpg");
    services_11_over = newImage("images/services_11-over.jpg");
    services_13_over = newImage("images/services_13-over.jpg");
    preloadFlag = true;
    }
    }

    </SCRIPT>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_showHideLayers() { //v6.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
    obj.visibility=v; }
    }
    //-->
    </script>
    </HEAD>

    <BODY BGCOLOR=#FFFFFF MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">

    <TABLE border="0" cellpadding="0" cellspacing="0" height="100%" align="center">
    <TR>
    <TD>
    <TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0 class="tableBorder">
    <TR>
    <TD COLSPAN=11>
    <IMG SRC="images/home_01.jpg" WIDTH=750 HEIGHT=80 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=11>
    <IMG SRC="images/home_02.jpg" WIDTH=750 HEIGHT=8 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=11> <IMG SRC="images/services_03.jpg" ALT="" WIDTH=750 HEIGHT=192 border="0" usemap="#Map"></TD>
    </TR>
    <TR>
    <TD>
    <IMG SRC="images/services_04.jpg" WIDTH=8 HEIGHT=73 ALT=""></TD>
    <TD>
    <A HREF="home.html"
    ONMOUSEOVER="changeImages('services_05', 'images/services_05-over.jpg'); return true;"
    ONMOUSEOUT="changeImages('services_05', 'images/services_05.jpg'); return true;">
    <IMG NAME="services_05" SRC="images/services_05.jpg" WIDTH=91 HEIGHT=73 BORDER=0 ALT=""></A></TD>
    <TD>
    <IMG SRC="images/services_06.jpg" WIDTH=12 HEIGHT=73 ALT=""></TD>
    <TD>
    <A HREF="portfolio.html"
    ONMOUSEOVER="changeImages('services_07', 'images/services_07-over.jpg'); return true;"
    ONMOUSEOUT="changeImages('services_07', 'images/services_07.jpg'); return true;">
    <IMG NAME="services_07" SRC="images/services_07.jpg" WIDTH=91 HEIGHT=73 BORDER=0 ALT=""></A></TD>
    <TD>
    <IMG SRC="images/services_08.jpg" WIDTH=12 HEIGHT=73 ALT=""></TD>
    <TD>
    <IMG SRC="images/services_09.jpg" WIDTH=91 HEIGHT=73 BORDER=0 ALT=""></TD>
    <TD>
    <IMG SRC="images/services_10.jpg" WIDTH=11 HEIGHT=73 ALT=""></TD>
    <TD>
    <A HREF="about_us.html"
    ONMOUSEOVER="changeImages('services_07', 'images/services_07-services_09_ove.jpg', 'services_11', 'images/services_11-over.jpg'); return true;"
    ONMOUSEOUT="changeImages('services_07', 'images/services_07.jpg', 'services_11', 'images/services_11.jpg'); return true;">
    <IMG NAME="services_11" SRC="images/services_11.jpg" WIDTH=91 HEIGHT=73 BORDER=0 ALT=""></A></TD>
    <TD>
    <IMG SRC="images/services_12.jpg" WIDTH=10 HEIGHT=73 ALT=""></TD>
    <TD>
    <A HREF="contact.html"
    ONMOUSEOVER="changeImages('services_07', 'images/services_07-services_09_ove.jpg', 'services_13', 'images/services_13-over.jpg'); return true;"
    ONMOUSEOUT="changeImages('services_07', 'images/services_07.jpg', 'services_13', 'images/services_13.jpg'); return true;">
    <IMG NAME="services_13" SRC="images/services_13.jpg" WIDTH=91 HEIGHT=73 BORDER=0 ALT=""></A></TD>
    <TD>
    <TABLE border="0" cellspacing="0" cellpadding="5"><TR>
    <TD background="images/services_14.jpg" width="242" height="73" valign="top"><font color="#FFFFFF">Our
    skills span across a wide range of computing boundaries, including
    multimedia, e-commerce, and graphic design. For an in-depth
    overview, please click the relevant link.</font></TD>
    </TR></TABLE>
    </TD>
    </TR>
    <TR>
    <TD COLSPAN=11>
    <IMG SRC="images/services_15.jpg" WIDTH=750 HEIGHT=12 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=11>
    <IMG SRC="images/home_16.jpg" WIDTH=750 HEIGHT=9 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=11>
    <IMG SRC="images/home_17.jpg" WIDTH=750 HEIGHT=26 ALT=""></TD>
    </TR>
    </TABLE>
    </TD></TR></TABLE>

    <div id="servicesNormal" class="servicesLayerGlobal">
    <font class="servicesLayerStyle">Services</font>
    <p>Please view the selection of our skill base by clicking on the
    links situated on the left.</p>
    </div>
    <div id="webDesignLayer" class="servicesLayerGlobal">
    <font class="servicesLayerStyle">Web Design/E-Business</font>
    <p>Whether you intend to create a website/e-business presence from start-up,
    or wish to simply upgrade and remodel your existing website/e-business to
    adapt to today's high standard of website layout and usability, we provide
    a comprehensive range of web development skills and tools to help aide your
    solution. Our team of designers specialise in a host of skills that allow
    us to implement simple and effective informational websites, e-business (e-commerce)
    frameworks, and website redesign and/or restructuring.</p>
    <p>Our goal, as innovative designers, is to visualise and implement websites/e-business'
    that are both unique, and imaginative, as well as adhering to web design principles,
    i.e. usability, functionality, interface design, and IA (Information Architecture).</p>
    <p>As well as the 'basics' we also strive to ensure that security and manageability are
    of the primary importance to e-business solutions, as well ensuring that database driven
    websites are fully functional and integrated within a companies business infrastructure.</p>
    <p>At the end of the day, we aim to provide our customers with a return on their
    investment, and by combining our development strategy with the latest use
    of web development technology we ensure such aims are satisfied.</p>
    <p>If you require any particular element of a website or e-business please contact
    us.<br>
    </p>
    </div>

    <div id="multimediaLayer" class="servicesLayerGlobal">
    <font class="servicesLayerStyle">Multimedia/Graphic Design</font>
    <p>Imagination, innovation and originality are key components of a diverse skill set that are required when delivering multimedia
    and graphic design projects. Our team aims to create work that will make an impact and influence our
    customers, as well as on our customers very own customers/clients.</p>

    <p>We apply our knowledge to a wide range of specialist high-end technologies to produce such
    multimedia assets so that our customers benefit from such investments in our work. As well as
    graphic design, and multimedia presentations, our team are also specialised in creating online
    animations (Flash). There are many avenues that can be taken with Flash animation ranging from
    simple modules of flash animation on a webpage, to fully integrated Flash driven websites.</p>

    <p>Our team posses extensive experience in graphic and multimedia creation, which can be geared
    towardsbr><br>
    <li>Logo design</li>
    <li>Image creation, and manipulation</li>
    <li>Multimedia Presentation CDs (Director)</li>
    <li>Graphic animations, and micro websites</li>
    <li>E-cards</li></p>

    <p>However you wish apply these various forms of multimedia to your website or e-business, our
    team are capable of merging such multimedia assets in with current websites, and/or creating
    standalone applications comprising of a variety of multimedia objects.</p>

    <p>Please contact us for issues or queries concerning multimedia development.</p>
    </div>

    <div id="consultancyLayer" class="servicesLayerGlobal">
    <font class="servicesLayerStyle">Consultancy/Reselling</font>
    <p>The internet is a big and overwhelming environment with
    many different features and possibilities, possibilities that can leverage your current business to a
    worldwide customer base. Gaining a firm and sound understanding of these potentially rewarding possibilities
    can sometimes be overwhelming and confusing. Our advice can help overcome such issues and misconceptions,
    as well bringing to you some our ideas regarding the core recommendations when creating new business
    channels and processes to accommodate the Internet enviroment.</p>

    <p>You may already have a website and simply need some partial advice on how to further improve your current
    online business strategy, or even need advice concerning usability and functionality. Whatever you questions,
    whether they are technical or not, we can provide the answers.</p>
    </div>

    <map name="Map">
    <area shape="rect" coords="102,81,216,111" href="#" onClick="MM_showHideLayers('servicesNormal','','hide','webDesignLayer','','hide','multimediaLayer','','show','consultancyLayer','','hide')">
    <area shape="rect" coords="127,122,224,155" href="#" onClick="MM_showHideLayers('servicesNormal','','hide','webDesignLayer','','hide','multimediaLayer','','hide','consultancyLayer','','show')">
    <area shape="rect" coords="126,33,218,65" href="#" onClick="MM_showHideLayers('servicesNormal','','hide','webDesignLayer','','show','multimediaLayer','','hide','consultancyLayer','','hide')">
    </map>
    </BODY>
    </HTML>



    Also, I tried the link U post Paul, and it worked fine.

    Cheers guys

    Tryst
    Attached Images Attached Images

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can we have all the css as well please?

    Paul

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just checked it using the css from your first post and I can confirm that the layer is in exactly the same place in both browsers (as I predicted earlier).

    However its the rest of the page that is not in alignment. Because you are not using a doctype you are working in quirks mode and using the broken box model in IE as well as all the other bad things that go with it.

    This means that all the other elements on your page that use padding/borders etc will be a different size to other browers. Therefore any absolutely placed element will appear to be in a different place because your layout is not the same in other browsers. In fact the layers (as you call them) are the only things that are in the same place.

    To rectify this you need to step into standards mode and then account for the broken box model in ie5 and ie5.5.

    Alternatively, you could position the layer relative to each layout which will make it appear to be in the same starting place. Although the size of the element will still be larger in netscape because of the padding and borders issue. To position absolutely from a parent element( instead of the body) the parent element just needs to have a position:relative (no co-ordinates) and then your absolute layer will be placed in relation to that parent.

    This would make the layout more consistent within itself and if you drop all borders and padding the page would look the same.

    The best solution is to code correctly with a full doctype and use standards mode. Then all you really need to take into account is iE5 and ie5.5. broken box model. If you are not sure what the broken box model is then just do a search and you will find.

    Other browers also have different default margins for elements such as <p> h1 etc and these have to be accounted for as well.

    As I can't get to your code and images (because you haven't put it on line) I can't show you how to do it. If you put your code online (then I can fix it locally) by linking to your images to check the display.

    It's not that difficult when you know what you're doing but I understand why its confused you. I could fix it in 10 minutes (with any luck) if you put it on line.

    However it's proabably best that you try and learn yourself as these problems will always be there.

    Paul

    PS
    Code:
    <font class="servicesLayerStyle">Web Design/E-Business</font>
    Now there's an abuse of CSS if there ever was one. The beauty of CSS was that it got rid of the font tag and here you are using it to put in CSS! Use a span for inline elements or <p> for paragraphs.

  22. #22
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the CSS...

    /* CSS Document */
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url("images/black_grey_tv2.gif");
    }

    td {
    font-size: 10px;
    color: #FFFFFF;
    }

    .detailsCell {
    font-size: 12px;
    cellpadding: 10px;
    }

    .tableBorder {
    border-top-width: 4px;
    border-top-style: solid;
    border-top-color: #000000;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    border-right-width: 4px;
    border-right-style: solid;
    border-right-color: #000000;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #000000;
    }

    .tableHeader {
    font: bold 14px verdana, arial, sans-serif;
    color: #FFFFFF;
    text-align: center;
    text-decoration: underline;
    }

    /* Services Layers */

    .servicesLayerGlobal {
    position: absolute;
    overflow: auto;
    left: 418px;
    top: 208px;
    width: 280px;
    height: 150px;
    background-image: url("images/layer_service.gif");
    border: 1px solid #99AAFF;
    font-size: 10px;
    color: FFFFFF;
    padding: 5px;
    }

    #servicesNormal {
    visibility: visible;
    border: 1px solid #FFFFFF;
    z-index: 4;
    }

    #webDesignLayer {
    visibility: hidden;
    border: 1px solid #99AAFF;
    z-index: 3;
    }

    #multimediaLayer {
    visibility: hidden;
    border: 1px solid #9977FF;
    z-index: 2;
    }

    #consultancyLayer {
    visibility: hidden;
    border: 1px solid #99AA33;
    z-index: 1;
    }

    .servicesLayerStyle {
    font: bold 10px verdana, arial, sans-serif;
    color: #FFFFFF;
    text-align: left;
    text-decoration: underline;
    }
    /* Services Layers */
    /* END CSS DOCUMENT */

    I'll see if My friend can chuck it on his server tomorrow, if thats any good.

    Right, i'm off to learn about this broken box model :-s

    Tryst

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You say your layer is exact in IE so tell me what happens when you make the window smaller?

    It seems to me you have a centred table that will move as the window is resized but you have placed an element absolutely on the screen in relation to the body so it will not move.

    If you resize the screen the element will stay where it was but the whole table will move.

    I think you need to redesign that a bit! Either have the element relative to the table somehow so that it moves with it or ditch the tables and use a css layout. (Although vertical centering will be awkward unless its a fixed size.)

    paul

  24. #24
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dumb reply?
    Looking at the CSS you have got both pading and a border on the .servicesLayerGlobal layer. So is it not somthing as simple as the Box model bug in IE shifting the layer around?

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi mediaman,

    Not really a dumb reply but it was covered in one of the (many) posts above.
    if you dont have a doctype then the sizes of the elements will be different between ie6 and NN because ie uses the broken box model in quirks mode. However the top left corner of the element should still start in the same place but the box will be 10px smaller all around in ie because of the padding.
    I've identified the problem in that the absolute element is placed exactly where it should be in both browsers however the rest of the page is out (probably due to the box model etc and the fact that the page is centred and the absolute positioning is independent of this).

    (I was waiting for a live version before offering some real code otherwise it will be diificult to check the result etc.)

    Paul

    Paul


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
  •