SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are talking about the 1 or 2 pixel gaps that appear when the screen is resized then there's little you can do about that.

    As an example if you have a 100% width and divide it into 3 then each part is 33.3333% wide. When 33.333% is converted into a pixel width it has to be rounded up and down to find the exact pixel value. If you then multiply that by 3 it will never equal 100%.

    When the screen is resized the rounding up and down changes at every pixel and therefore at some sizes the layout is 1 pixel out and at some other sizes may even be 2 pixels out or it may fit exactly. There is nothing that can be done about this and all browsers exhibit this behavior. This happens with tables as well.

    The only thing you can do is to design with this in mind and make sure that you don't try to align things exactly to the edge of fluid columns.

    You could possibly try making the element bigger so that it overlaps but you will still get the jog.

    Regarding the missing scrollbar its because you have placed the subdata absolutely ans therefore is removed from the flow. It needs to be in the flow for IE and not positioned at all..

    Code:
    #subdata {padding-top: 22px; width: 100%; }
    You'll have to adjust the tabs to avoid covering the scrollbar though.

  2. #27
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Hi Paul

    Thanks for all your help man. I really really appreciate. Out of topic: Do you work for Sitepoint or you just enjoy helping others? You are great!

    Anyway, I fixed all the issues I mentioned. I just want you to check the latest files and see if you can help me with 2 final issues.

    For the latest updates, go here: http://www.webstunner.com/csm/

    and download the zip file or you can go ONLINE:
    http://www.webstunner.com/csm/default.html

    1. Click NETWORK TOPOLOGY tab, then click Circuit Name /VOSN/000000163, then on the right pane... click on TOPOLOGY tab. If you click the Map View button, it will toogle the content. I need the content for both Graph View and Map View to fill the whole SUBDATA div (100% width and height) which is containing it. If I use POSITION: ABSOLUTE, etc. it works on IE7 and FF but NOT on IE6. So I'm still struggling with a solution here!

    2. The EXPANDING/COLLAPSING on FireFox is not working. I honestly don't know why! Opera, IE6 and IE7 works like a charm.

    Thats it, man! After this, I'm done with this application. I couldn't do it without your help! Thanks in advance!

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

    Regarding 2) it seems to be your javascript where you have put a space between the unit and the px. Also you have defined imgHandle but then used imgToggle instead.

    Change it to imgToggle and remove the spaces as follows.

    Code:
        var imgToggle = document.getElementById("imgToggle");
    
        if(header){
            header.style.display = (toWhat == 1?"none":"block");
            mainpane.style.top=(toWhat == 1?"0px":"140px");
            rightpane.style.top=(toWhat == 1?"0px":"140px");
            //bodyEl.style.padding=(toWhat == 1?"0px 0px 20px":"160px 0px 20px");
    That should make it open and close correctly now. (You should know that I don't usually even look at Javascript as that is not my area )

    Re question 1 I'm not sure what will work for IE6. As you say you should be able to use absolute positioning and top,bottom, left and right (at the same time) to define the area for other browsers.

    For ie6 you will probably have to make it position:static and use height:100%. However that will make it a bit too big because you have other element inside #rightpane which is providing the height so you may need to backtrack if its only the background you need. Try nesting an element inside #rightpane and let that carry the 100% high background image then overlay the other bits you have at the top.

    I'm not sure if it will give the desired effect or not but you can't keep on getting 100% height from inner elements and have offsets etc. That's about all the spare time I have to work on this today as I am in the middle of something else See how you get on.

  4. #29
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hi Paul

    I fixed the problem with Firefox.

    Now, I'm still struggling with the 2 problem. I have created a screenshot. My Monitor has a resolution of 1680px x 1050px, so its perfect to show you what I need.

    Click here to see the screenshot:
    http://www.webstunner.com/csm/csm_screen.gif

    I just need the background to fill the whole DIV. So I assume I need to force that DIV to 100% height or something. The main problem is with IE6 since IE7, FF and Opera handle pretty well the POSITION: ABSOLUTE.

    BTW, in this screen I havent apply the POSITION: ABSOLUTE for FF, IE7 and Opera but I know it works because I have tested before.

    Hope you understand now what Im trying to achieve here.

    Thanks in advance!

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

    I've just looked at the page and it looks as though you have partially fixed the issue more or less.

    However it seems to me as though you could fill that area more easily by simply adjusting the background image in #rightpane.

    This already carries the left border and if you make a long repeating image that includes the graph and the left border you can just tile it on that element and save any other nested elements.

    The image would need to be wide enough for all monitors (about 2400px should be enough and just high enough to give the graph effect). You then just repeat that as you are already doing for the border.

    You can add it via an extra class as you obviously don't want it on all right panes but just add the class with the new image when required.

    Hope that helps


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
  •