SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast dalar's Avatar
    Join Date
    Jul 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wierd Border issue with IE

    Hi everyone.

    I've got a problem, basically I have a calendar generated via javascript, and has its own CSS style.

    Today's date contains a 2px border around its cell, when hovering over any cell, the background should be light grey - this works well across all browsers.

    When hovering over today's date, the background turns grey just like it and every cell should, along with this the border around todays date should also dissapear - this works too, however in IE it nudges everything around.

    Ive searched the net for answers, I thought it was IE6's dreaded content box problem, but this is also happening in IE7!

    In FF and other non-IE browsers its fine.

    Any ideas?

    * please see attached

    attached within zip are:

    + html file
    + 1 js file for menu
    + 1 css file for menu
    +2 images


    Thank you for your help in advance!
    Attached Files Attached Files

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    debug on haslayout see sticky at the top of this forum

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Set the border gray on hover?
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Enthusiast dalar's Avatar
    Join Date
    Jul 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok here we go,

    you can see a live version at:

    http://72.9.232.178/~dali/sitepoint/calendar.htm

    Notice in firefox everything is perfect, but in IE as you rollover todays date "shown in a black border" the whole calendar jiggles!


    The following is just the CSS ... I have not included the JS/HTML file that creates the menu because it isnt neccesarry to the problem. - However if you wish to run this on your local machine you will need to download the zip above which contains the js file in order to make it work.

    Code CSS:
    table.calendar {
    	/*font-family: Helvetica, Arial, sans-serif;*/
    	font-size: 14px; /* was 0.8 by default */
    	border-collapse: collapse;
    	background-color: white;
    	background-color: white;
    	width: 158px;
    	text-align: center;
    	/*prevent user from selecting text in Mozilla & Safari - check calendar constructor for IE code)*/
    	-moz-user-select: none;
    	padding: 0;
        /*-khtml-user-select: none;*/
    }
     
     
    table.calendar input, table.calendar select {
    	font-size: 10px; /* was 10 */
    }
    table.calendar td {
    	border: 0;
    	font-size: 10px; /* was 10 */
    	text-align: center;
    	padding-bottom: 0px;
    }
    table.calendar .mainheading {
    	font-size: 1.2em;
    	padding-left: 16px; /* So the month selector appears centre. */	
    	padding-bottom: 0px;
    	margin-bottom: 0px;
    	vertical-align: bottom;
    }
    table.calendar .mainheading a {
    	margin-left: 5px;
    	margin-right: 5px;
    }
    table.calendar table td {
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    div.mainheading {
    	margin: 2 2 0 2;
    }
    table.caldayheading {
    	border-collapse: collapse;
    	cursor: pointer;
    	empty-cells: show;
    }
    table.caldayheading td {
    	vertical-align: middle;	
    	color: black;
    	font-weight: bold;
    	width: 19px; /*should match calendar cell's width*/
    }
    table.caldayheading td.wkhead {
    	width: 21px;
    	border-top: 0;
    	border-left: 0;
    	border-bottom: 0;	
    }
    table.calcells {
    	border-collapse: collapse;
    	cursor: pointer;
    }
    table.calcells td {
    	border: solid #CCCCCC 1px;
    	vertical-align: middle;		
    	width: 19px;
    	height: 15px; /*IE doesn't like ems*/
    }
    table.calcells td div {
    	padding: 1px;
    	margin: 0;
    }
     
     
    /* day cells in general */
    table.calcells td.wkhead {
    	background-color: white;
    	text-align: center;
    	width: 21px;
    	color: black;
    	border-top: 0;
    	border-left: 0;
    	border-bottom: 0;	
    }
    table.calcells td.wkday {
    	background-color: white;
    }
    table.calcells td.wkend {
    	background-color: white;
    }
     
    /* curr date */
    table.calcells td.curdate {
     
    	border: solid black 2px;
    }
     
     
    table.calcells td.cell_selected {
    	background-color: #fdcf9e;
    	/*font-weight: bold;*/
    	color: black;
    }
    table.calcells td.notmnth {
    	background-color: #FFFFFF;
    	color: #CCCCCC;
    }
    table.calcells td.notallowed {
    	background-color: white;
    	color: #EEEEEE;
    	font-style: italic;
    }
     
    /* the hover */
    table.calcells td.hover {
    	background-color: #CCCCCC;
    }
     
     
     
    div#dateSelector {
    	border: 0;
    }
    #monthSelect, #yearSelect {
            display: none;
    }

  5. #5
    SitePoint Enthusiast dalar's Avatar
    Join Date
    Jul 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump

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

    It looks a like JS issue to me where you are add .hover class but losing the .curdate class so the border disappears.

    Bearing in ming I know nothing about javascript changing the code as follows seems to fix the issue.

    Code:
    CalCell.prototype.onmouseover = function () //replicate CSS :hover effect for non-supporting browsers <iehack>
    {
    
        //reduce indirection:
        var cell = this.cellObj;
        var owner = cell.owner;
        
         if (cell.date.getYear() < owner.curDate.getYear()) {
            return;
        } else if (cell.date.getMonth() < owner.curDate.getMonth() &&
                   cell.date.getYear() == owner.curDate.getYear()) {
            return;
        } else if ( (cell.date.getDate() < owner.curDate.getDate()) &&
                    (cell.date.getMonth() == owner.curDate.getMonth()) &&
                    (cell.date.getYear() == owner.curDate.getYear()) ) {
            return;
        }
    
        this.setAttribute('class',  this.className+=" hover");
        this.setAttribute('className',   this.className+=" hover");
        
    };
    It was previously:
    Code:
        
        this.setAttribute('class',this.cellClass + ' hover');
        this.setAttribute('className',this.cellClass + ' hover');
    However cellClass seems to be undefined but as I said I know nothing virtually nothing about javascript

  7. #7
    SitePoint Enthusiast dalar's Avatar
    Join Date
    Jul 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, that didnt fix the problem but thank you very much for helping me out on that, I have added the changes. - I've seen what you've seen in Firefox with the CSS debugger.

    Anyways, I solved it .. in IE, is treated the general hover class (that makes all the cells grey on mouseover) as a new style completley, therefore losing its border...whilst firefox still retains its border.

    It was solved by getting the Javascript to write an ID name onto the CUR_DATE cell so I could get a fix on it and apply a direct border style eg. #CurrentDayCell .... because its low level it now stays there even on hover.

    Thanks a lot!



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
  •