www.webdeveloper.com
Results 1 to 12 of 12

Thread: box model which is works fine always in IE but not in FF and NS

  1. #1
    Join Date
    May 2006
    Posts
    12

    box model which is works fine always in IE but not in FF and NS

    hi all

    i have a box model which is works fine always in IE but not in FF and NS (not always)

    sometimes needs refresh to work...otherwise the last div takes the properties of the second last div.... and i dont know what is happening

    i forgot to mension that if i have 50 boxes only 1-2 have this problem...and always random....of course when i hit f5 everything works fine

    <DIV class=boxnav><a href="prod_sub.asp?id=<%=RSevent("CategoryID") %>">
    <DIV id=iconidio_big style="background-image: url(../media/boxnav/<%=RSevent("icon_file") %>);"><IMG src="../media/boxnav/<%=RSevent("icon_file") %>" border=0></DIV>
    <DIV><%=RSevent("name") %></DIV><div id=learn>learn more...</div></a></DIV>

    /*---css boxes-----*/
    div.boxnav {
    z-index:1;
    margin: 0pt;
    font: 11px Tahoma, Arial, sans-serif;
    white-space: nowrap;
    height: 140px;
    width: 18em;
    float:left;
    position:relative;
    display:block;
    border-right: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    }
    div.boxnav div {
    margin-left: 8px;
    float:left;
    width: 16em;
    }

    div.boxnav a {
    text-decoration: none;
    color: #999;
    font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    cursor: hand;
    }
    div.boxnav a:hover { background-color: #f4f4f4; color: #000066;}

    div.boxnav #iconidio {
    margin-top: 50px;
    width: 16em;
    height: 50px;
    background-position: left -50;
    background-repeat: no-repeat;
    cursor: hand;
    }
    div.boxnav #iconidio_big {
    margin-top: 20px;
    width: 16em;
    height: 80px;
    background-position: left -80;
    background-repeat: no-repeat;
    cursor: hand;
    }
    div.boxnav a:hover #iconidio, div.boxnav a:hover #iconidio_big {background-position: left 0;}
    div.boxnav #iconidio img, div.boxnav #iconidio_big img {display: none;}

    div.boxnav #learn {
    padding-left: 10px;
    font: 10px Tahoma, Arial, sans-serif;
    color: #FF9900;
    text-decoration: none;
    background-image: url(imgs/boxarrow.gif);
    background-repeat: no-repeat;
    background-position: 0 5;
    }
    div.boxnav a:hover #learn {color: red;}
    /*---end css boxes-----*/

  2. #2
    Join Date
    May 2006
    Posts
    12
    one more thing that you must know is that...this problem occures only when the site is online...locally i don't have those issues

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Full doctype?
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    May 2005
    Posts
    2,040
    Box Model 'Problems' are related to IE since it is the reason such problems exist. If FF and NS are not display your box as you wish, then you must have designed using IE, which is the browser with "Box Model Problems". (See my "But it works in IE!" link below). Showing us the CSS will not allow us to help you so we need the complete code or, preferably, a link.

  5. #5
    Join Date
    May 2006
    Posts
    12
    drhowarddrfine

    here's the test link, the problem occurs only in NS & FF but not always (usually before reload) :

    http://www.2ymorrow.gr/en/prod_main.asp


    ray my doctype is

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    i didnt had any problems with that doctype in the past

    thanks for your reply

  6. #6
    Join Date
    May 2006
    Posts
    12
    please ignore the left menu...i have fixed that

  7. #7
    Join Date
    May 2005
    Posts
    2,040
    Your doctype is incomplete and IE is in quirks mode. Fix it with this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    You will never get IE to display like modern browsers, such as Firefox, while in quirks mode.

    Why are you using transitional/loose/sloppy doctype? All new pages should always use a strict doctype.

    In addition, you have 277 html errors and way too many css errors.
    Last edited by drhowarddrfine; 07-31-2006 at 08:25 AM.

  8. #8
    Join Date
    May 2006
    Posts
    12
    sorry drhowarddrfine
    this is not fix my problem and adds me more
    maybe this is the right way but i dont have time to remake all the css

    see yourself:
    http://www.2ymorrow.gr/gr/prod_main.asp & http://www.2ymorrow.gr/en/prod_main.asp

    plus since the website is dynamic i dont have 227 errors because the 220 refers in the way that i define the items...which i cannot understand what is the wrong with that
    Last edited by ithinkcss; 07-31-2006 at 08:42 AM.

  9. #9
    Join Date
    May 2005
    Posts
    2,040
    Well, your errors are what the browser sees and some browsers will ignore that code and everything after it. And, like I said, with IE in quirks mode you will never get IE to perform correctly or any other browser to perform the same.

  10. #10
    Join Date
    May 2006
    Posts
    12
    my friend drhowarddrfine

    im sure that you are right...but if you spend 3minutes to see the pages and locate the actual problem maybe you will understand that is more simplier than you talk about.... i cant change all of my css right now....

    plus i dont have prob with IE, i dont have problem to the layout either....something is bother the ns and ff (to a very specific point) and i cann't understand what is this ( as i already wrote, not always...after the reload everything is ok)

    thanks again for the post

  11. #11
    Join Date
    May 2006
    Posts
    12
    Well, your errors are what the browser sees and some browsers will ignore that code and everything after it.
    if something like that happen i should take wrong ALL the boxes, EVERYTIME
    ps.sorry for my eng, i dont know if you completly understand me

  12. #12
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    The first step in fixing problems with the way a web page displays differently in different web browsers is to fix the HTML errors making sure that the page has a valid doctype.

    The second step is to fix the CSS errors.

    Only with valid HTML and CSS is there even a possibility of getting the page to display the way you want across more than one browser.

    If you want web pages to work then take the time to create web pages and not just throw something together and hope that browsers can read your mind as to what you meant.
    Stephen

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles